ホームページ > 記事 > ウェブフロントエンド > JSでObjectオブジェクトのプロトタイプを使用する方法
今回はJSでObjectオブジェクトのプロトタイプを使用する方法についてお届けします。JSでObjectオブジェクトのプロトタイプを使用する際の注意点を実際に見てみましょう。
オブジェクトの概念
JavaScript では、すべての参照型はオブジェクトです。 たとえば、function Foo () {}
では、Foo 自体がオブジェクトへの参照です。
function Foo () {}
中,Foo本身就是一个对象的引用。创建对象方式 字面量方式 new 构造函数函数声明 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
小结
对象具有许多考验开发者的一些知识点。能够完全理解并整理出来是不容易的。后续我会针对对象的继承
オブジェクトの作成
関数宣言 Object.create
リテラルオブジェクトオブジェクトのインスタンスを素早く作成するためのJavaScript言語レベル
rrreee
new
演算子を使用して、オブジェクト 🎜 を作成し、コンストラクター メソッドを実行します。 🎜rrreee🎜🎜関数宣言🎜🎜🎜関数宣言によって作成されたオブジェクト。関数は特別なオブジェクトに属します。🎜rrreee🎜🎜Object.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
はユーザー 🎜 に公開されますrrreee🎜🎜isPrototypeOf 🎜🎜🎜 コンストラクターのプロトタイプオブジェクトに付属する function 属性は、ターゲットオブジェクトのプロトタイプチェーンにコンストラクターのプロトタイプオブジェクトが存在するかどうかを検出するために使用されます。 🎜rrreee🎜オブジェクトのプロトタイプを取得します Object.getPrototypeOf proto
🎜rrreee🎜オブジェクトのプロトタイプを設定します Object.create Object.setPrototypeOf🎜🎜🎜Object.create 🎜🎜🎜オブジェクトを返し、そのプロトタイプを設定します🎜rrreee🎜 🎜Object.setPrototypeOf 🎜🎜🎜 オブジェクト proto
の暗黙的なプロトタイプを直接設定します🎜rrreee🎜🎜概要🎜🎜🎜 オブジェクトには、開発者をテストする多くの知識ポイントがあります。それを完全に理解し、整理するのは簡単ではありません。 オブジェクト継承
については後ほど詳しく説明します。スクリプトハウスをご支援いただき誠にありがとうございます。 🎜🎜この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨読書:🎜🎜🎜Angular2の親子コンポーネント通信方法🎜🎜🎜🎜🎜Node.jsの非対称暗号化について詳しく解説🎜🎜
以上がJSでObjectオブジェクトのプロトタイプを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。