ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript プロトタイプ チェーンとプロトタイプ オブジェクト属性インスタンスの詳細な説明

JavaScript プロトタイプ チェーンとプロトタイプ オブジェクト属性インスタンスの詳細な説明

伊谢尔伦
伊谢尔伦オリジナル
2017-07-22 13:09:341480ブラウズ

プロトタイプ チェーン:

すべての関数はコンストラクターになることができ、各関数はプロトタイプ オブジェクトを持ち、各プロトタイプ オブジェクトはインスタンス化されたオブジェクトにすることもできます。たとえば、オブジェクトをインスタンス化するコンストラクター関数である関数 fun を作成します。 function のプロトタイプ オブジェクトは、Object のインスタンス オブジェクトでもあります。したがって、 fun には、関数のプロトタイプ オブジェクトにアクセスできる _proto_ 属性があり、また、オブジェクトのプロトタイプ オブジェクトにアクセスできる _proto_ 属性もあります。したがって、 _proto_ 属性を通じてラインが形成されます。プロトタイプのチェーン。インスタンス化された各オブジェクトはチェーン上のメソッドとプロパティにアクセスできるため、fun は Object プロトタイプ オブジェクトの下のメソッドとプロパティにアクセスできます。実際、すべてのオブジェクトは Object のプロトタイプ オブジェクトにアクセスできます。

プロトタイプ チェーンのアクセス ルール: まず自分の下を検索し、次にプロトタイプ チェーンをレベルごとに上に移動します。

は次のとおりです:

function Aaa(){}
Aaa.prototype.num = 3;
var a1 = new Aaa();
a1.num =10;
alert(a1.num); //10

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

プロトタイプ オブジェクトの下に 3 つの属性がある場合があります:

1 プロトタイプ オブジェクトによって保持されるメソッドと属性 2 コンストラクター 3_proto_attributes

コンストラクター: コンストラクター属性、それぞれのプロトタイプ オブジェクトfunction 一部のデフォルト属性は関数を指します。

インスタンス化された各オブジェクト自体にはコンストラクター属性はありません。デフォルトでは、プロトタイプ オブジェクトを接続するために使用される _proto_ 属性が 1 つだけあり、コンストラクター自体と直接の関係はありません。したがって、そのコンストラクターは、アクセスされるプロトタイプ オブジェクト上にあります。したがって、プロトタイプ オブジェクトのコンストラクターが変更されると、インスタンス化されたオブジェクトのコンストラクターも変更されます。ただし、オブジェクト自体がプロトタイプ オブジェクトとインスタンス化されたオブジェクトの両方である場合は、コンストラクター プロパティを持つため、プロトタイプ オブジェクトからアクセスする必要はありません。 **

私たちが言っていることを確認するには、以下の例を見てください:

function CreatePerson(name){
 this.name = name;
}
CreatePerson.prototype.showName = function(){
 console.log(this.name);
 };
var p1 =new CreatePerson('haha');
p1.showName();
console.log(p1.constructor); // CreatePerson 来自CreatePerson.prototype
console.log(CreatePerson.prototype);
// {showName:{},constructor:CreatePerson,__proto__:Object.prototype}
//可见,原型对象保存了
  1 自身添加的方法,
  2 构造函数constructor
  3 _proto_(和上一层构造函数原型对象的连接)
console.log(CreatePerson.prototype.__proto__===Object.prototype);
// true 这个原型对象本身又是object的实例化对象,所有_proto_指向Object的原型对象
console.log(CreatePerson.prototype.__proto__===Object);
// false 可见是和构造函数下原型对象的连接,不是构造函数
console.log(CreatePerson.prototype.constructor);
//CreatePerson CreatePerson.prototype是Object实例化对象,也是原型对象,所以自身拥有constructor属性
console.log(Object.prototype.__proto__);
// null 原型链的终点是null
console.log(CreatePerson.__proto__); //function.prototype
// CreatePerson本身既是构造函数又是function的实例化对象,拥有_proto_属性,指向function的原型对象
console.log(CreatePerson.constructor);
// function 继承自function.prototype
console.log(CreatePerson.prototype instanceof CreatePerson )
//验证是否在一条原型链上 false

リテラルメソッドはプロトタイプを定義します:

オブジェクトを作成するコードをより便利にするために、そのようなコードを見たことがあるはずです。これはリテラルですメソッド:

function Aaa(){}
Aaa.prototype = {
 showName:function(){},
 showSex:function(){}
};
var a1 = new Aaa();
console.log(Aaa.prototype);
//{showName:function(){},_proto_}
//你会发现constructor不见了,因为这种方式相当于重新赋值了Aaa.prototype
console.log(Aaa.prototype.constructor);
//Object 因为自身没有了constructor属性,就去上级原型对象找,找到了Object
console.log(a1.constructor );
//Object 也变了,验证了它是访问的原型对象上的

そのため、次のように記述するときにプロトタイプの方向を修正する必要があります:

function Aaa(){}
Aaa.prototype = {
constructor:Aaa,
num1:function(){alert(10);}
}
var a1 = new Aaa();
a1.constructor // Aaa

以上がJavaScript プロトタイプ チェーンとプロトタイプ オブジェクト属性インスタンスの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。