JSプロトタイプとプロトタイプチェーンについて最も詳しく解説-jsチュートリアル-php.cn

JSプロトタイプとプロトタイプチェーンについて最も詳しく解説

hzc

リリース： 2020-06-24 09:50:49

転載

1758 人が閲覧しました

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 の インスタンス です。両方の instances には constructor (コンストラクター) 属性があり、これは (ポインター) 人を指します。つまり:

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

ログイン後にコピー

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

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

JavaScript では、オブジェクト (関数もオブジェクト) が定義されるたびに、そのオブジェクトはいくつかの事前定義されたプロパティが含まれています。各 関数オブジェクトには、関数の プロトタイプオブジェクトを指す prototype 属性があります。 (最初に何を使用するかに関係なく、__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

ログイン後にコピー

最初の「law##」が得られました。この記事 #》：

 每个对象都有 __proto__ 属性，但只有函数对象才有 prototype 属性

ログイン後にコピー

それでは、プロトタイプオブジェクトとは何でしょうか?上記の例を変更すると、次のことがわかります。

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

ログイン後にコピー

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

# 上記では、名前、年齢、職業、sayName という 4 つの属性を A に追加しました。実際、これにはデフォルトの属性もあります:

constructor

デフォルトでは、すべての
プロトタイプオブジェクトは prototype 属性が配置されている関数を指す (ポインターである) constructor (コンストラクター) 属性を # 自動的に取得します。 (人) ##上の文は少しわかりにくいので、「翻訳」しましょう: A にはデフォルトの
constructor

属性。この属性は、人を指すポインターです。つまり:

Person.prototype.constructor == Person上記の 2 番目のセクション「コンストラクター」では、

の構造がわかります。インスタンス関数属性 (コンストラクター) はコンストラクターを指します

person1.constructor == person これら 2 つの「式」は多少関連しているようです。

 person1.constructor == Person
 Person.prototype.constructor == Person

ログイン後にコピー

person1 コンストラクター属性があるのはなぜですか?これは、person1 が person のインスタンスであるためです。

Person.prototype にコンストラクター属性があるのはなぜですか? ?同様に、 Person.prototype (A と考えてください) も Person のインスタンスです。

つまり、Person が作成されると、インスタンスオブジェクトが作成され、そのプロトタイプに割り当てられます。基本的なプロセスは次のとおりです。

var A = new Person();
Person.prototype = A; // 注：上面两行代码只是帮助理解，并不能正常运行

ログイン後にコピー

结论：原型对象（Person.prototype）是构造函数（Person）的一个实例。

原型对象其实就是普通对象（但 Function.prototype 除外，它是函数对象，但它很特殊，他没有prototype属性（前面说道函数对象都有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(&#39;Mick&#39;);
   person1.getName(); //Mick

ログイン後にコピー

从这个例子可以看出，通过给 Person.prototype 设置了一个函数对象的属性，那有 Person 的实例（person1）出来的普通对象就继承了这个属性。具体是怎么实现的继承，就要讲到下面的原型链了。

小问题，上面两个 this 都指向谁？

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

ログイン後にコピー

故两次 this 在函数执行时都指向 person1。

推荐教程：《JS教程》

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

JSプロトタイプとプロトタイプチェーンについて最も詳しく解説

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

2. コンストラクター

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

上文提到凡是通过 new Function( ) 产生的对象都是函数对象。因为 A 是函数对象，所以Function.prototype 是函数对象。

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

上文提到凡是通过 new Function( ) 产生的对象都是函数对象。因为 A 是函数对象，所以`Function.prototype` 是函数对象。