ObjectオブジェクトをJSで詳しく説明する

この記事は、JS 学習の基礎、Object オブジェクトのプロトタイプの概念について説明したものです。興味のある友人は参照してください。

オブジェクトの概念

JavaScript では、すべての参照型はオブジェクトです。 たとえば、関数 Foo () {} では、Foo 自体がオブジェクトへの参照です。

Create object メソッド リテラル メソッド 新しいコンストラクター関数宣言 Object.create

リテラル オブジェクト

組み込みオブジェクトのコンストラクターを通じてオブジェクトのインスタンスを素早く作成するための JavaScript 言語レベル

var obj = {foo: 'foo', bar: 'bar'}; // Object对象字面量
var obj2 = [obj, 'foo', 'bar']; // Array数组字面量
var obj3 = /^[a-zA-Z0-9]$/; // RegExp正则字面量
var obj4 = function(){}; // Function函数字面量

新しいコンストラクター

、またはカスタム関数。 new 演算子を使用して、オブジェクトが作成され、コンストラクター メソッドが実行されます。 new 操作符，创建一个对象，并且执行构造函数方法。

var obj = new Object();
var obj2 = new Array(1000);
var obj3 = new RegExp('^[a-zA-Z0-9]$');
var obj4 = new Function('a', 'b', 'return a + b;');

函数声明

函数声明创造的对象. 函数属于特殊的对象.

function Foo() {}
Foo instanceof Object;
Foo instanceof Function;

Object.create

传入一个对象作为返回对象的原型，创建一个新对象, 并将新对象的原型指向传入的对象中。

var foo = {
 'foo': 'foo',
 'bar': 'bar'
};
var o = Object.create(foo); // o.__proto__ = foo
console.log(o.foo); // o.__proto__.foo

使用Object.create(null) 可以返回一个字典型对象.

var o = Object.create(null);
o instanceof Object; // return false;
o.toString(); // Uncaught TypeError

对象原型

每一个对象都有一个内置的 __proto__ 属性指向构造它的函数prototype属性. 而构造函数的

prototype.constructor 则指向构造函数本生。一个对象的属性的寻找过程由以下几个部分组成:

寻找对象属性的数据描述符(writable, value)或存取描述符(getter, setter)，如果查询到了，则返回 对应的值。如果查询不到，则进入第2步骤。寻找对象属性的值是否有被显示定义 (可以通过 Object.getOwnPropertyNames)检测，如果对象属性定义了，则返回定义的值。 如果没有，则进入第3步骤。寻找对象的隐藏原型__proto__对象的属性，规则同1，2步骤。如果还未找到，则重复第3步骤， 直到__proto__ 为null 为止。

具体案例如下图所示:

检测对象原型

测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性

instanceof Object.prototype.isPrototypeOf

instanceof

运算符，语言级别的检测对象的原型链是否包含构造函数的原型

function Foo () {}
Foo instanceof Function; // return true
Foo instanceof Object; // return true

模拟instanceof查找对象的原型链的构造函数是否包含传入的构造函数, __proto__ 在一些特定的浏览器有暴露给用户

function Bar () {}
function isInstanceof (obj, Constructor) {
 if (obj === null) {
 return false;
 }
 // 忽略 string, number, boolean, null, undefined 类型干扰
 if (!~['object', 'function'].indexOf(typeof obj)) {
 return false;
 }

 var prototype = obj.__proto__;
 while(prototype) {
 if (prototype.constructor === Constructor) {
  return true;
 }
 prototype = prototype.__proto__;
 }
 return false;
}
isInstanceof(Bar, Function);
isInstanceof(Bar, Object);

isPrototypeOf

构造函数的原型对象自带的函数属性, 用于检测目标对象的原型链中是否存在构造函数的原型对象。

function Baz () {}
var baz = new Baz();
Baz.prototype.isPrototypeOf(baz);
Function.prototype.isPrototypeOf(baz);
Object.prototype.isPrototypeOf(baz);

获取对象原型 Object.getPrototypeOf __proto__

var o = {};
var prototype = Object.getPrototypeOf(o);
console.log(prototype === Object.prototype); // return true
// 部分浏览器有效
var o2 = {};
console.log(o2.__proto__ === Object.prototype); // return true

设置对象原型 Object.create Object.setPrototypeOf

Object.create

返回一个对象，并设置它的原型

function Foo () {}
 function Bar () {}
 Foo.prototype.foo = 'foo';
 Bar.prototype = Object.create(Foo.prototype); 
 Bar.prototype.constructor = Bar; // 修正原型链的constructor
 var o = new Bar();
 console.log(o.foo); // return foo;
 console.log(o instanceof Bar); // return true

Object.setPrototypeOf

直接设置对象的隐式原型__proto__

function Foo () {}
 Foo.prototype.name = 'foo';
 var o = Object.create(null);
 Object.setPrototypeOf(o, Foo.prototype);
 console.log(o.name); // return foo

関数宣言

関数宣言によって作成されたオブジェクト。関数は特別なオブジェクトに属します。

rrreeeObject.create

返されたオブジェクトのプロトタイプとしてオブジェクトを渡し、新しいオブジェクトを作成します。新しいオブジェクトを追加します。プロトタイプは、渡されたオブジェクトを指します。 rrreee

辞書オブジェクトを返すには、Object.create(null) を使用します。

rrreeeオブジェクト プロトタイプ

🎜🎜すべてのオブジェクトには、組み込みの __proto__ 属性があります。それを構築した関数の prototype 属性と、コンストラクターの 🎜🎜prototype.constructor はコンストラクター自体を指します。オブジェクトの属性を検索するプロセスは次の部分で構成されます: 🎜🎜 オブジェクトの属性のデータ記述子 (書き込み可能、​​値) またはアクセス記述子 (ゲッター、セッター) を検索します。見つかった場合は、対応する値が返されます。クエリが見つからない場合は、ステップ 2 に進みます。オブジェクト プロパティの値が明示的に定義されているかどうかを確認します (Object.getOwnPropertyNames によって検出できます)。オブジェクト プロパティが定義されている場合は、定義された値が返されます。 そうでない場合は、ステップ 3 に進みます。オブジェクト __proto__ の非表示のプロトタイプとオブジェクトのプロパティを見つけます。ルールは手順 1 および 2 と同じです。見つからない場合は、__proto__ が null になるまで手順 3 を繰り返します。 🎜🎜具体的なケースを以下に示します:🎜

🎜🎜🎜オブジェクトのプロトタイプを検出🎜🎜🎜オブジェクトのプロトタイプ チェーンにコンストラクターのプロトタイプ属性があるかどうかをテストします🎜🎜instanceof Object.prototype.isPrototypeOf🎜🎜🎜instanceof 🎜🎜🎜操作キャラクター、言語オブジェクトのプロトタイプ チェーンにコンストラクターのプロトタイプが含まれているかどうかのレベル検出 🎜rrreee🎜 instanceof をシミュレートして、オブジェクトのプロトタイプ チェーンのコンストラクターに、渡されたコンストラクター __proto__ code> 一部の特定のブラウザでは、ユーザーに公開される関数属性があります 🎜rrreee🎜🎜isPrototypeOf 🎜🎜🎜 コンストラクターのプロトタイプ オブジェクト。コンストラクターのプロトタイプ オブジェクトが存在するかどうかを検出するために使用されます。ターゲット オブジェクトのプロトタイプ チェーン内。 🎜rrreee🎜オブジェクトのプロトタイプを取得する Object.getPrototypeOf <code>__proto__🎜rrreee🎜オブジェクトのプロトタイプを設定する Object.create Object.setPrototypeOf🎜🎜🎜Object.create 🎜🎜🎜オブジェクトを返し、そのプロトタイプを設定する🎜rrreee🎜 🎜Object.setPrototypeOf 🎜🎜🎜 オブジェクト __proto__ の暗黙のプロトタイプを直接設定します🎜rrreee🎜 上記は私がまとめたもので、将来的に皆さんのお役に立てれば幸いです。 🎜🎜関連記事: 🎜🎜🎜vuexデータが消えず、ページ更新時にページジャンプする問題(詳細チュートリアル) 🎜🎜🎜🎜AngularJS双方向データバインディング原則(詳細チュートリアル) 🎜🎜🎜🎜関連データストレージとその関連WeChat アプレットの問題 値の問題🎜🎜

以上がObjectオブジェクトをJSで詳しく説明するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。