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

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

このチュートリアルの動作環境: 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 = '1';
}
function Foo2(){
   this.name2 = '2';
}
Foo2.prototype = new Foo1();
function Foo3(){
   this.name = '3';
}
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('yellow');
//   console.log(tiger.color);
//   console.log(tiger.name);  //undefined
//      Tiger.prototype = new Animal('老虎');   //一种方式
   Object.prototype.name = '大老虎';   //第二种方式
        var tiger = new Tiger('yellow');
        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,'老鼠');
    this.nickname = nickname;
}
var m = new Mouse('杰瑞');
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('张三',12);
stu.showName();
stu.showAge();

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

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

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

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

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

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

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

2) プロトタイプと_proto__

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

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

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

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

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

3) 属性検索

①メンバーにアクセスする場合オブジェクトの場合、まずオブジェクト内に存在するかどうかを検索します。

# ②現在のオブジェクトに存在しない場合は、コンストラクタのプロトタイプ オブジェクト内を検索します。

③プロトタイプの場合プロトタイプ オブジェクトに が見つからない場合は、プロトタイプ オブジェクトのプロトタイプを検索します。

④ オブジェクトのプロトタイプが NULL であることを知る

2、関数

## - —すべての関数はインスタンスですFunctionの説明

①ローカルオブジェクト：ホスト環境（ブラウザ）に依存しないオブジェクト - Object、Array、Date、RegExp、Function、Error、Number、String、Booleanを含む

②組み込みオブジェクト - Math、Global (ウィンドウ、js のグローバル変数) を含む、new を使用する必要はありません

③ホスト オブジェクト - カスタム オブジェクト、DOM、BOM を含む

[推奨学習:

javascript 上級チュートリアル

]

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