ホームページ > ウェブフロントエンド > jsチュートリアル > jsでオブジェクトを作成する方法まとめ(例)

jsでオブジェクトを作成する方法まとめ(例)

怪我咯
リリース: 2017-06-29 10:31:03
オリジナル
1636 人が閲覧しました

この記事では主にjsでオブジェクトを作成する方法を紹介します 興味のある方はぜひ参考にしてください jsでオブジェクトを作成する方法は3つあります。 . ここでまとめてみましょう

1. オブジェクト直接量

この方法は、私が個人的に最も推奨する方法でもあります。ここでキー値の名前に引用符が含まれていないことに気づいたかもしれませんが、実際にはこれらの引用符 (js と同じ単一引用符と二重引用符) を追加しても問題ありません。それらを追加することをお勧めします。なぜそれが可能ですか? 追加後のキーの値は非常に任意になる可能性があるからです。

//创建简单对象
var obj1 = {}; //空对象

var obj2 = {
  name: "ys",
  age: 12
};
//创建复杂对象
var obj3 = {
  name: "ys",
  age: 12,
  like: {
    drink: "water",
    eat: "food"
  }
};

console.log(typeof obj1);  //object
console.log(typeof obj2);  //object
console.log(typeof obj3);  //object
ログイン後にコピー

上記の例を通して、属性にアクセスするための「.」と「[]」の違いがわかります

キーと値のペアの値は

式をサポートしています。 , 以下のように

var obj4 = {
  "my name": "ys",  //键值名中间有空格
  "my-age": 12,    //键值名中间有连字符
  "while": 111    //键值名是关键字
}

console.log(obj4['my name']);  //ys
console.log(obj4['my-age']);  //12
console.log(obj4.while);    //111
console.log(typeof obj3);    //object
ログイン後にコピー

2.new オブジェクトを作成します

1).システム組み込みオブジェクト

var obj3 = {
  name: "ys",
  age: obj2.age,   //引用obj2.age
  like: {
    drink: "water",
    eat: "food"
  }
};

console.log(obj3.age); //100
ログイン後にコピー

2).カスタムオブジェクト

var obj1 = new Object();
var obj2 = new Array();
var obj3 = new Date();
var obj4 = new RegExp("ys");

console.log(typeof obj1);  //object
console.log(typeof obj2);  //object
console.log(typeof obj3);  //object
console.log(typeof obj4);  //object
ログイン後にコピー

3.Object.create() createこのメソッドには 2 つのパラメータがあります。最初のパラメータについてのみ説明します。2 番目のパラメータは一般的には使用されません (オブジェクトのプロパティ用)。詳しくは、

最初のパラメータ: 継承するプロトタイプ オブジェクトを渡します。

この文はどうやって理解できますか?

function Person(name, age){
  this.name = name;
  this.age = age;
}

var obj1 = new Person("ys", 12);

console.log(Object.prototype.toString.call(obj1));  //object
console.log(Person instanceof Object);        //true
console.log(typeof obj1);              //object
console.log(obj1.age);                //12
ログイン後にコピー
obj1 は {} ですが、なぜ属性値にアクセスできるのでしょうか?最初のパラメータ「継承するプロトタイプオブジェクトを渡す」の意味を理解しましょう

console.log(obj1.
proto
); //Object {name: "ys", age: 12}

オブジェクトそのものは空ですが、プロトタイプチェーン上のデータは空ではなく、obj1.age が存在するため、アクセスできます。

1) 最初のパラメータが null のときに

var obj1 = Object.create({
  name: "ys",
  age: 12
});
console.log(obj1);     //{}
console.log(obj1.age);   //12
ログイン後にコピー

がエラーを報告するのはなぜですか?通常のパラメータで生成された図は次のとおりです。

この図から、継承されるプロトタイプ オブジェクト (つまりパラメータ) が Object のプロトタイプ オブジェクトを継承していることがわかります。これが主な理由です。オブジェクトにはいくつかの js オブジェクトが含まれています (indexOf()、toString()、'+' 関数など)。この時点でパラメーターが null の場合、継承チェーンは壊れます。

この時点で誰もがこの文を理解しているはずです。

JavaScript のすべてのオブジェクトは Object から継承し、Object は継承チェーンの最上位にあると見なされます。

2). 空のオブジェクトを作成します

var obj2 = Object.create(null);   //不继承对象应有的属性和方法
console.log(obj2 + "abc");     //报错 ,失去 + 功能
ログイン後にコピー

コードの図:

この方法で作成されたオブジェクトには、オブジェクトの基本メソッドのみが含まれます。

3) 最後に、Object.create() メソッドをより深く理解できるように、次のコードを見てください:

《新しい JavaScript オブジェクト の作成》 Method Object .create()》

var obj3 = Object.create(Object.prototype); 
console.log(obj3);              //{},(空对象,与前两个方法 {},new Object 相同)
console.log(obj3.proto);         //如下图 ,只包含了基本对象的方法
ログイン後にコピー
rreee分からない人は下の画像を見てください

var obj1 = {
  name: "ys",
  age: 12
};
obj1.prototype = {
  sayName: function(){
    return console.log(this.name);
  }
};
ログイン後にコピー

コードが分からない人は画像を見てください(設定後の画像)名前):


現時点では、皆さんは最初のパラメータを理解していると思います。

以上がjsでオブジェクトを作成する方法まとめ(例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート