Javascript オブジェクトリテラルを理解する (グラフィックチュートリアル)-jsチュートリアル-php.cn

Javascript オブジェクトリテラルを理解する (グラフィックチュートリアル)

亚连

リリース： 2018-05-21 09:37:17

オリジナル

1706 人が閲覧しました

この記事は主に Javascript オブジェクトリテラルの理解を紹介します。理解しやすいので、必要な友人は参照できます。

オブジェクトリテラルの出力方法と定義の利点

1. オブジェクトリテラルを出力するには 2 つの方法があります。 '、配列モード、ただし、配列モードで出力する場合は、

var box = {
  name:&#39;abc&#39;;
  age:28
};
alert(box[&#39;name&#39;]);

ログイン後にコピー

オブジェクトのメソッドを定義するなど、角かっこを引用符で囲む必要があります。

A: 従来のオブジェクト定義を使用する場合 この方法では、最初にメソッドを定義し、次に括弧なしでこのメソッドを呼び出したい場合はメソッドコードが返されます。オブジェクト属性の後に括弧を付けたメソッドです。メソッドの戻り値を取得するには

function objrun(){
  return &#39;123&#39;;
}
var box = new Object();
box.name=&#39;abc&#39;;
box.age = 28;
box.run = objrun;
alert(box.run());       //结果为123
// alert(box.run);       //结果为function objrun(){ return &#39;123&#39;; }
//如果box.run = objrun();
//alert(box.run);       //结果为123，如果带上圆括号，就报错啦

ログイン後にコピー

リテラル定義を使用します、オブジェクトのこの属性に直接関数を記述するだけです。関数名はありません。この関数では、それは匿名関数です。このメソッドを呼び出すには、上記と同じことを行うだけです

例:

var box = {
  name:&#39;abc&#39;,
  age:28,
  run:function(){
    return &#39;123&#39;;
  }
}
alert(box.run());

ログイン後にコピー

2。のオブジェクトリテラルを使用すると、多数の関数パラメータを 1 対 1 対応で出力する必要がある状況に簡単に対処できます。彼の対策は、オブジェクトを関数に渡すことです。関数は単なるコードであり、呼び出す必要があるため、対応する属性と値はリテラルな方法で定義されています。例:

function AA(obj){
  alert(obj.name);
  alert(obj.age);
}
var obj = {
  name: &#39;abc&#39;,
  age: 28
}
AA(obj);

ログイン後にコピー

js オブジェクトリテラルデモ

/**
 * @author zhanghua
 */
var literal = {
  add: function(){
    alert("add");
  },
  del: function(){
    alert("delete");
  },
  update: function(){
    alert("update");
  },
  name: "zhangsan",
  callLiteral: function(){
    // 对于当前字面量对象的调用，要加this关键字
    this.add();
  }
};

ログイン後にコピー

html ファイル:

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Literal--字面量</title>
    <script type="text/javascript" src="jslib/literal.js"></script>
  </head>
  <body>
    <input type="button" value="add" onclick="javascript:literal.add()"/>
    <input type="button" value="delete" onclick="javascript:literal.del()"/>
    <input type="button" value="update" onclick="literal.update()"/>
    <input type="button" value="name" onclick="javascript:alert(literal.name)"/>
    <input type="button" value="name" onclick=&#39;javascript:alert(literal["name"])&#39;"/>
    <input type="button" value="caller" onclick=&#39;javascript:literal.callLiteral()&#39;"/>
  </body>
</html>

ログイン後にコピー

上記は、将来皆さんのお役に立てば幸いです。 関連記事:

jsについて

入力中央値変化のリアルタイム監視(グラフィックチュートリアル)

jsについて string()の一般的なメソッドの概要(グラフィックチュートリアル)

phpの読み取りファイル

上のローカル

jsのメソッドは何ですか

以上がJavascript オブジェクトリテラルを理解する (グラフィックチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。