JavaScript プロトタイプチェーンを理解する方法-jsチュートリアル-php.cn

プロトタイプチェーンは実際には、限定されたインスタンスオブジェクトとプロトタイプの間の限定されたチェーンであり、共有プロパティと継承を実装するために使用されます。主な問題は 2 つあります: 1. 親の型にパラメーターを渡すのは不便です; 2. 親の型内の参照型はすべてのインスタンスで共有されます。

JavaScript プロトタイプチェーンを理解する方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

new 演算子は具体的に何をするのですか? これは実際には非常に単純で、3 つのことを行います。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

ログイン後にコピー

最初の行では、空のオブジェクト obj

# を作成します。2 行目では、この空のオブジェクトの __proto__ メンバーを Base 関数オブジェクトのプロトタイプメンバーオブジェクトを指します

3 行目では、Base 関数オブジェクトの this ポインタを obj に置き換えて Base 関数を呼び出します。そのため、obj オブジェクトに id メンバ変数を割り当てます。このメンバ変数の値は "base" です。通話機能の使い方について。

プロトタイプチェーンについて話す前に、まずカスタム関数と関数の関係とは何なのか、またコンストラクター、プロトタイプ、インスタンスの間には切っても切れない関係があるのかを理解する必要があります。実際、すべての関数は Function のインスタンスです。コンストラクターには、これもオブジェクトであるプロトタイプ属性のプロトタイプがあり、次に、プロトタイプオブジェクトには、コンストラクターを指すコンストラクター属性があり、インスタンスオブジェクトには、これもプロトタイプを指す _proto_ 属性があります。 . オブジェクトであり、このプロパティは標準プロパティではないため、プログラミングでは使用できません。このプロパティはブラウザによって内部的に使用されます。

// _proto_
在函数里有一个属性prototype
由该函数创建的对象默认会连接到该属性上
    //prototype 与 _proto_ 的关系
_proto_是站在对象角度来说的
prototype 是站在构造函数角度来说的

ログイン後にコピー

次に、写真を見て話しましょう。

1. コンストラクター、プロトタイプ、インスタンスの関係

① オブジェクト

## ② 関数オブジェクト配列

これを理解した後、プロトタイプチェーンとは何かについて説明します。率直に言うと、これは実際には、限定されたインスタンスオブジェクトとプロトタイプの間に形成される限定されたチェーンであり、共有プロパティと継承を実装するために使用されます。次に、コードを見てみましょう。

 var obj = new Object();
对象是有原型对象的
原型对象也有原型对象
   obj._proto_._proto_._proto_
原型对象也有原型对象，对象的原型对象一直往上找，会找到一个null
// 原型链示例
   var arr = [];
   arr -> Array.prototype ->Object.prototype -> null
   var o = new Object();
   o -> Object.prototype -> null;

ログイン後にコピー

function Foo1(){
   this.name1 = &#39;1&#39;;
}
function Foo2(){
   this.name2 = &#39;2&#39;;
}
Foo2.prototype = new Foo1();
function Foo3(){
   this.name = &#39;3&#39;;
}
Foo3.prototype = new Foo2();
var foo3 = new Foo3();
console.dir(foo3);

ログイン後にコピー

次のステップは継承です。

2. 継承

1) プロトタイプの継承

function Animal(name){
       this.name = name;
   }
   function Tiger(color){
       this.color = color;
   }
//   var tiger = new Tiger(&#39;yellow&#39;);
//   console.log(tiger.color);
//   console.log(tiger.name);  //undefined
//      Tiger.prototype = new Animal(&#39;老虎&#39;);   //一种方式
   Object.prototype.name = &#39;大老虎&#39;;   //第二种方式
        var tiger = new Tiger(&#39;yellow&#39;);
        console.log(tiger.color);
        console.log(tiger.name);

ログイン後にコピー

ここには 2 つの主な問題があることに注意してください: ① パラメータを親の型に渡すのは不便です。 ②親型の参照型はすべてのインスタンスで共有されます

2) ES5 では継承を実装する Object.create() メソッドが提供されています

————做兼容
  //shim垫片
    function create(obj){
        if(Object.create){
            return Object.create(obj);
        }else{
            function Foo(){}
            Foo.prototype = obj;
            return new Foo();
        }
    }

ログイン後にコピー

このメソッドは ES5 の新機能です。実際に継承をコピーします。

3) コピーの継承

var obj = {};
obj.extend = function(obj){
    for(var k in obj){
      this[k] = obj[k];
    }
}

ログイン後にコピー

4) 借用したコンストラクターの継承

# 借用したコンストラクターのプロトタイプメンバーは借用されていません

function Animal(name){
    this.name = name;
}
function Mouse(nickname){
    Animal.call(this,&#39;老鼠&#39;);
    this.nickname = nickname;
}
var m = new Mouse(&#39;杰瑞&#39;);
console.log(m.name);
console.log(m.nickname);

ログイン後にコピー

既存の問題: プロトタイプ継承におけるパラメータの受け渡しの問題は解決できますが、親型のプロトタイプオブジェクトのメンバー (プロパティとメソッド) を

に継承することはできません。 5) 組み合わせ継承

——プロトタイプオブジェクトは動的です。

function Person(name){
   this.name = name;
}
Person.prototype.showName = function(){
   console.log(this.name);
}
function Student(name,age){
   Person.call(this,name);
   this.age = age;
}
Student.prototype = new Person();
Student.prototype.contructor = Student;
Student.prototype.showAge = function(){
    console.log(this.age);
}
var stu = new Student(&#39;张三&#39;,12);
stu.showName();
stu.showAge();

ログイン後にコピー

[プロトタイプの継承はコンストラクターの継承を借用します] その特徴は、各インスタンスが属性と共有メソッドのコピーを 1 つ持つことです。

[概要]つまり、いわゆるプロトタイプチェーンは母親を探す方法であり、人間の母親から人間が生まれ、モンスターからモンスターが生まれることが分かります。実際には、プロトタイプチェーンのコアは 1 つだけです: 属性の共有と独立した制御です。オブジェクトインスタンスに独立した属性が必要な場合、すべてのメソッドの本質は、オブジェクトインスタンスに属性を作成することです。あまり深く考えずに、必要な独立した属性を Person で直接定義して、プロトタイプの属性をオーバーライドすることができます。つまり、プロトタイプ継承を使用する場合は、プロトタイプ内の属性に特別な注意を払う必要があります。これらの属性はすべてボディ全体に影響するためです。現在最も一般的に使用されている方法は、複合モードです。

1. プロトタイプチェーン

1) コンストラクタ、プロトタイプ、インスタンスの関係

①コンストラクタは、オブジェクト( Object のインスタンス)である属性prototypeを持ちます。

## ② プロトタイプオブジェクトのプロトタイプにはコンストラクター属性があり、プロトタイプオブジェクトが属するコンストラクター関数を指します

③ インスタンスオブジェクトには _proto_ 属性があり、これもコンストラクター関数を指しますプロトタイプオブジェクト、非標準属性なのでプログラミングには使用できません、ブラウザ自身で使用します

2) プロトタイプと_proto__

の関係 ①プロトタイプはコンストラクタです。

②_proto_はインスタンスオブジェクトの属性です

—この 2 つは同じオブジェクトを指します

[概要] i) 関数はオブジェクトでもあります。オブジェクトは必ずしも関数である必要はありません。値のペアのコレクション。キーと値のペアの値は、任意のデータ型の値

iii) オブジェクトはコンテナであり、このコンテナには (プロパティとメソッド) が含まれます

3) 属性検索