Javascriptのプロトタイプと__proto__の関係を詳しく解説-jsチュートリアル-php.cn

Javascriptのプロトタイプと__proto__の関係を詳しく解説

亚连

リリース： 2018-05-31 10:27:37

オリジナル

1685 人が閲覧しました

この記事では、主に Javascript のプロトタイプと __proto__ の関係について、サンプルコードを通じて詳しく紹介します。必要な方はフォローしてください。編集者と一緒に学びましょう。

まえがき

プロトタイプを知ったとき、頭がクラクラするような気分になりました/(ㄒoㄒ)/~~特にプロトタイプと__proto__は、検索しても区別がつかなかったほど愚かでした。

1. コンストラクター:

コンストラクター: new キーワードを通じて特定のタイプのオブジェクトを作成するために使用できる関数。たとえば、Object と Array は組み込みのネイティブコンストラクターであり、実行時に実行環境に自動的に表示され、直接使用できます。以下のように:

var arr = new Array();//使用Array构造函数创建了一个array实例arr
arr[0]="a";
arr[1]="b";
alert(arr);//a,b

var obj=new Object();//使用Object构造函数创建了一个Object实例obj
obj.name="c";
obj.age=12;
alert(obj.name);//c

ログイン後にコピー

カスタムコンストラクターを作成し、そのプロパティとメソッドをカスタマイズできます。次のとおりです:

//创建构造函数Person
function Person(name,age){
 this.name=name;
 this.age=age;
 this.sayName=function(){
 alert(this.name)//
 };
}

//使用new关键字，来生成Person实例
var person1=new Person("Tom",22);
var person2=new Person("Jerry",21);
person1.sayName();//Tom
person2.sayName();//Jerry

ログイン後にコピー

次の点に注意してください:

コンストラクターの名前は常に大文字である必要があります。はじめに (主に非コンストラクター関数、つまり通常の関数と区別するため)
コンストラクターを定義するための構文は、通常の関数を定義する場合と同じです。コンストラクターと通常の関数の違いは、その使用方法にあります。 new 演算子を使用して呼び出された関数であればコンストラクターとして使用できますが、new 演算子を使用せずに呼び出された関数は通常の関数です

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

//当做构造函数使用
var person=new Person("Tom",22);
person.sayName();//Tom 
//当做普通函数使用
Person("Jerry",30);//添加到window
sayName();//Jerry 等同于window.sayName();

ログイン後にコピー

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

すべての関数には、プロトタイプオブジェクトへのポインターであるプロトタイププロパティがあります。プロトタイプオブジェクトは、関数の定義と同時に作成されます。プロトタイプオブジェクトの目的は、すべてのインスタンスで共有されるプロパティとメソッドを含めることです。

function Person(){
}
//自定义原型对象的属性和方法
Person.prototype.name="Tom";
Person.prototype.age=25;
Person.prototype.sayName=function(){
 alert(this.name);
};
//原型对象中的所有属性和方法 都会自动被所有实例所共享
var person1=new Person();
var person2=new Person();
person1.sayName();//Tom
person2.sayName();//Tom

ログイン後にコピー

新しい関数が作成される限り、各関数が作成されます。その後、関数のプロトタイプオブジェクトを指すプロトタイプ属性を取得します（プロトタイプオブジェクトは関数の定義と同時に作成されます）このプロトタイプオブジェクトには、「constructor」という名前の属性もあり、関数自体を指し、ループは次のようなものを指します。

function Person(){}
alert(Person.prototype.constructor===Person);//true

ログイン後にコピー

alert(Person.prototype.constructor===Person);//会返回true

3 (注) proto の左側と右側に 2 つの "_" があること)

新しいインスタンスを作成するためにコンストラクターが呼び出されるとき、インスタンスの内部には、インスタンスを指すポインター [[Prototype]] が含まれます。それを作成したコンストラクターのプロトタイプスクリプトで [[Prototype]] にアクセスする標準的な方法はありませんが、ほとんどのブラウザーは __proto__ 経由でサポートしています。

function Person(){
}
//自定义原型对象的属性和方法
Person.prototype.name="Tom";
Person.prototype.age=25;
Person.prototype.sayName=function(){
 alert(this.name);
};
//原型对象中的所有属性和方法 都会自动被所有实例所共享
var person1=new Person();
var person2=new Person();
person1.sayName();//Tom
person2.sayName();//Tom
alert(person1.__proto__===Person.prototype);//true

ログイン後にコピー

上記のサンプルコードを例にすると、各オブジェクトの関係は以下のようになります: