JSプロトタイプとプロトタイプチェーンの詳しい解説(1)

今回はJSプロトタイプとプロトタイプチェーンの注意点について詳しく解説します。実際の事例を見てみましょう。

1. 通常のオブジェクトと関数オブジェクト

JavaScript では、すべてがオブジェクトです。しかし、オブジェクトも異なります。これらは通常のオブジェクトと関数オブジェクトに分かれており、Object と Function は JS に付属する関数オブジェクトです。例を示します

var o1 = {}; 
var o2 =new Object();
var o3 = new f1();
function f1(){}; 
var f2 = function(){};
var f3 = new Function('str','console.log(str)');
      console.log(typeof Object);  //function
      console.log(typeof Function);  //function 
      console.log(typeof f1); //function 
      console.log(typeof f2);//function
      console.log(typeof f3);//function 
      console.log(typeof o1);// object
      console.log(typeof o2);//object
      console.log(typeof o3);  //object

上記の例では、o1 o2 o3 は通常のオブジェクト、f1 f2 f3 は関数オブジェクトです。区別する方法は実際には非常に簡単です。 new Function() によって作成されたオブジェクトはすべて関数オブジェクトであり、その他は通常のオブジェクトです。 f1、f2 はすべて、最終的な分析で new Function() を通じて作成されます。 Function オブジェクトは New Function() によっても作成されます。

以下では、通常のオブジェクトと関数オブジェクトを区別してください。

2. コンストラクター

まずコンストラクターの知識を復習しましょう:

function Person(name, age, job) {
 this.name = name; 
 this.age = age;
  this.job = job; 
  this.sayName = function() { alert(this.name) } 
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');

上の例では、person1 と person2 は両方とも person のインスタンスです。どちらのインスタンスも、コンストラクター プロパティを持ちます。これは、Person へのポインターです。 つまり:

console.log(person1.constructor == Person); //true
  console.log(person2.constructor == Person); //true

2 つの概念 (コンストラクター、インスタンス) を覚えておく必要があります:
person1 と person2 は両方ともコンストラクター person のインスタンスです
式:
インスタンスのコンストラクター属性 (コンストラクター) はコンストラクターを指します。

3. プロトタイプオブジェクト

JavaScript では、オブジェクト (関数もオブジェクト) が定義されるたびに、そのオブジェクトには事前定義されたプロパティがいくつか含まれます。各関数オブジェクトには、関数のプロトタイプ オブジェクトを指すプロトタイプ属性があります。 (最初に __proto__ を使用します。2 番目のコースで詳細に分析します)

function Person() {}
Person.prototype.name = 'Zaxlct';
Person.prototype.age  = 28;
Person.prototype.job  = 'Software Engineer';
Person.prototype.sayName = function() {
  alert(this.name);
}  
var person1 = new Person();
person1.sayName(); // 'Zaxlct'var person2 = new Person();
person2.sayName(); // 'Zaxlct'console.log(person1.sayName == person2.sayName); //true

この記事の最初の「法則」を理解しました:

すべてのオブジェクトは __proto__ 属性を持ちますが、関数オブジェクトだけがプロトタイプ プロパティを持ちます

それでは、プロトタイプオブジェクト?
上記の例を変更してみましょう。理解していただけると思います:

Person.prototype = {   name:  'Zaxlct',   age: 28,   job: 'Software Engineer',   sayName: function() {
     alert(this.name);
   }
}

プロトタイプ オブジェクトは、その名前が示すように、通常のオブジェクトです (ナンセンス = =!)。ここからは、プロトタイプ オブジェクトが Person.prototype であることを覚えておいてください。まだ心配な場合は、それを文字 A と考えてください: var A = Person.prototype

上記の属性に 4 つ追加しました: name、年齢、仕事、名前を言います。実際、これにはデフォルトの属性もあります:constructor

デフォルトでは、すべてのプロトタイプオブジェクトは自動的にコンストラクター (constructor) 属性を取得します。この属性は、プロトタイプ属性が配置されている関数 (パーソン) を指す (ポインターです)

上の文は少しわかりにくいので、「翻訳」しましょう。 A にはデフォルトのコンストラクター属性があり、これは Person を指すポインターです。つまり:

Person.prototype.constructor == Person

上記の 2 番目のセクション「コンストラクター」では、インスタンスのコンストラクター属性 (constructor) がコンストラクターを指していることがわかります: person1.constructor == person

これら 2 つの「式」は、いくぶん似ているようです。 Connected:

person1.constructor == person
person.prototype.constructor == person

person1 なぜコンストラクター属性があるのでしょうか?これは、person1 が person のインスタンスであるためです。
では、なぜ Person.prototype にはコンストラクター属性があるのでしょうか? ?同様に、 Person.prototype (A と考えてください) も Person のインスタンスです。
つまり、Person が作成されると、そのインスタンス オブジェクトが作成され、そのプロトタイプに割り当てられます。基本的なプロセスは次のとおりです。 : プロトタイプ オブジェクト (person.prototype) は、コンストラクター (person) のインスタンスです。

Prototype オブジェクトは、実際には通常のオブジェクトです (関数オブジェクトである Function.prototype を除く)。これは非常に特殊です。プロトタイプ属性はありません (前述したように、関数オブジェクトはすべてプロトタイプ属性を持ちます)。以下の例を見てください:

function Person(){}; console.log(Person.prototype) //Person{}
 console.log(typeof Person.prototype) //Object
 console.log(typeof Function.prototype) // Function，这个特殊
 console.log(typeof Object.prototype) // Object
 console.log(typeof Function.prototype.prototype) //undefined

Function.prototype なぜこれが関数オブジェクトなのでしょうか?

var A = new Function (); Function.prototype = A;

上で述べたように、new Function() によって生成されるオブジェクトはすべて関数オブジェクトです。 A は関数オブジェクトであるため、Function.prototype も関数オブジェクトです。

プロトタイプ オブジェクトは何に使用されますか?主に継承に使用されます。例:

 var Person = function(name){    this.name = name; // tip: 当函数执行时这个 this 指的是谁？
  };
  Person.prototype.getName = function(){    return this.name;  // tip: 当函数执行时这个 this 指的是谁？
  }  var person1 = new person('Mick');
  person1.getName(); //Mick

この例から、関数オブジェクトのプロパティを Person.prototype に設定することで、Person インスタンス (person1) から生成される通常のオブジェクトがこのプロパティを継承することがわかります。具体的に継承を実装する方法は、以下のプロトタイプ チェーンによって異なります。

ちょっとした質問ですが、上の 2 つは誰を指しているのでしょうか?

 var person1 = new person('Mick');
  person1.name = 'Mick'; // 此时 person1 已经有 name 这个属性了
  person1.getName(); //Mick

つまり、関数が実行されるとき、これはどちらの場合も person1 を指します。

以上がJSプロトタイプとプロトタイプチェーンの詳しい解説(1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。