一文でJavaScriptの原型チェーンが分かります.

学習の目標

プロトタイプ

プロトタイプチェーン

プロトタイプの変更後、方法と属性をどう追加しますか?

プロトタイプは、変更されたプロトタイプチェーン

を指す.

例のオブジェクトの属性とプロトタイプオブジェクトの属性の名前

原型を通じて

を継承します.

グループ継続

コピー引継ぎ

プロトタイプ
問題: ， 100 ， ？

function Person(name, sex) {
    this.name = name;
    this.sex = sex;
    this.drink () {
        console.log('       ！！')
    }
}
for (let i = 0; i < 100; i++) {
    var per = new Person('   ', ' ');
    per.drink();
}

， 100 Person , ， drink() ， drink() ， ， ， ？ prototype

function Person(name, sex) {
    this.name = name;
    this.sex = sex;
}
//       
Person.prototype.drink = function () {
        console.log('       ！！')
    }
    //     
let per = new Person('   ', ' ');
per.drink();

prototype, ， 。二、プロトタイプチェーン ， 。 Person per。

console.dir(Person);//    
console.dir(per);//    

， prototype per __proto__ ， ？ 。

console.log(per.__proto__ === Person.prototype);

， Person prototype per __proto__ ， ， ， __proto__ prototype実例対象中の__uプロト.プロトタイプです.ブラウザで使います.コンストラクタのプロトタイプはプロトタイプで、プログラマが使用しています. ？

まず、構造関数のプロトタイプ属性は自分のプロトタイプ

を指します.

の次に、プロトタイプオブジェクト中のコンストラクタは、プロトタイプオブジェクトがある構造関数

を指します.

の後、インスタンスオブジェクトの_uプロト.プロトタイプ属性が指すプロトタイプのオブジェクト

を指します. ：

例のオブジェクトのプロトタイプは、構造関数のプロトタイプ属性が指すプロトタイプオブジェクトを指すので、インスタンスオブジェクトとプロトタイプオブジェクトとの間に関係があり、構造関数とは間接的な関係である.

私たちはコードからも、インスタンスオブジェクトが直接プロトタイプオブジェクト内の属性または方法にアクセスできるということを示します.

例のオブジェクトとプロトタイプオブジェクトとの関係があります.プロト.で接続します

最終的には、プロトタイプチェーン:これは関係であり、インスタンスオブジェクトとプロトタイプオブジェクトの関係は、プロトタイププロト.連絡します
三、プロトタイプの指差が変わったら、方法と属性をどうやって追加しますか? ：1. 。2. 。 ， ：

function Person(name, sex) {
    this.name = name;
    this.sex = sex;
}
Person.prototype.drink = function () {
        console.log('    ！！')
    }
function Student(name, sex) {
    this.name = name;
    this.sex = sex;
}
Student.prototype.eat = function () {
    console.log('     !!')
}

//      
Student.prototype = new Person(' ', ' ');
let stu = new Student('  ', ' ');
stu.drink();
stu.eat();

： ，stu.eat() ， eat() Student ， ？Studentのプロトタイプが変わったので、new Person('人'、'男')を指しています.そしてPersonのプロトタイプにはeat()がないので、エラーが発生しました.プロトタイプが変わる前に追加するのは間違いです. ： 。

function Person(name, sex) {
    this.name = name;
    this.sex = sex;
}
Person.prototype.drink = function () {
        console.log('    ！！')
    }
function Student(name, sex) {
    this.name = name;
    this.sex = sex;
}

//      
Student.prototype = new Person(' ', ' ');
//       
Student.prototype.eat = function () {
    console.log('     !!')
}
let stu = new Student('  ', ' ');
stu.drink();
stu.eat();

：二つの方法がうまく調整されたことが分かります.だから、もしプロトタイプの指差が変わったら、プロトタイプの方向を変えてからプロトタイプの方法を追加するべきです.
四、プロトタイプは変更後のプロトタイプチェーンを指します. ， ， ？ ：

プロトタイプが変わる前に

プロトタイプの変更後

：

//      
function Person(name) {
    this.name = name;
}
//       
Person.prototype.drink = function () {
        console.log('    ！！')
    }
//       
function Student(name) {
    this.name = name;
}
//       
Student.prototype.eat = function () {
    console.log('     !!')
}
//    
let per = new Person('  ');
let stu = new Student('  ');

console.dir(Person);//    
console.dir(per);//    
console.dir(Student);//    
console.dir(stu);//    

： prototype __proto__， ：この図から、原型が変わっていないことが分かります.プロト.自分のコンストラクタのプロトタイプ属性が指すプロトタイプのオブジェクトを指します. ：

//      
function Person(name) {
    this.name = name;
}
//       
Person.prototype.drink = function () {
        console.log('    ！！')
    }
//       
function Student(name) {
    this.name = name;
}
//       
Student.prototype.eat = function () {
    console.log('     !!')
}
//         
Student.prototype = new Person('  ');
//    
let stu = new Student('  ');

console.dir(Person);//    
console.dir(new Person('  '))//    
console.dir(Student.prototype)//Student     
console.dir(Student);//    
console.dir(stu);//    

： ：私たちのコードと図を組み合わせて見ます.Student.prototype=new Person('先生')その後、①学生の構造関数のプロトタイプ属性は、プロトタイプのオブジェクトに向けられています.②プロトタイプのオブジェクトのコンストラクタも、コンストラクタに向けて切断されます.③インスタンスオブジェクトのプロト.オブジェクトを切断します. ， ！！！ ， ：プロトタイプが変わった後、学生の構造関数のプロトタイプ属性はnew Person('先生')を指しています.その後、学生の実例化対象になった_uプロト.属性は学生構造関数のプロトタイプ属性が指すnew Person('先生')を指します.
プロトタイプチェーンを変更しました.
五、インスタンスオブジェクトの属性と原型オブジェクトの属性をリネームします. ？ ：

//      
function Person(age, sex) {
      this.age = age;
      this.sex = sex;
    }
//       
Person.prototype.sex = " ";
//     
var per = new Person(10," ");

console.log(per.sex);

：コードの実行結果から、インスタンスオブジェクトの属性とプロトタイプの属性が名前を変更すると、先にインスタンスオブジェクトの属性にアクセスします. ？ ：

function Person(age) {
      this.age = age;
    }
//       
Person.prototype.sex = " ";
//     
var per = new Person(10);

console.log(per.sex);

：このコードから、インスタンスオブジェクトに属性がアクセスできない場合、プロトタイプオブジェクト上の属性が検索されます.
六、原型による継承

    //js          
    
    //      
    function Person(name, age, sex) {
      this.name = name;
      this.sex = sex;
      this.age = age;
    }
    //       
    Person.prototype.eat = function () {
      console.log("    ");
    };
    Person.prototype.sleep = function () {
      console.log("    ");
    };
    Person.prototype.play = function () {
      console.log("       !");
    };

    
    //       
    function Student(score) {
      this.score = score;
    }
    //            ==========>          
    Student.prototype = new Person("  ", 10, " ");
    //       
    Student.prototype.study = function () {
      console.log("        .");
    };


    var stu = new Student(100);
    console.log(stu.name);
    console.log(stu.age);
    console.log(stu.sex);
    stu.eat();
    stu.play();
    stu.sleep();
    console.log("             ");
    console.log(stu.score);
    stu.study();

：原型継承の真髄は、原型を使って、原型の指を変えて継承することです.
七、コンビネーション引継ぎ

    //    :    +        
    
    //      
    function Person(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    }
    Person.prototype.sayHi=function () {
      console.log("   ？");
    };
    function Student(name, age, sex, score) {
      //      :        
      Person.call(this, name, age, sex);
      this.score = score;
    }
    //      ----  
    Student.prototype = new Person();//   
    Student.prototype.eat = function () {
      console.log("   ");
    };
    //    
    var stu = new Student("  ", 20, " ", "100 ");
    console.log(stu.name, stu.age, stu.sex, stu.score);
    stu.sayHi();
    stu.eat();
    
    var stu2=new Student("  ", 20, " ", "100 ");
    console.log(stu2.name, stu2.age, stu2.sex, stu2.score);
    stu2.sayHi();
    stu2.eat();

：コンビネーション継承のエッセンス:まずStudentコンストラクターでcall()関数を使ってPersonコンストラクタに属性を導入し、thisを変更し、Studentのプロトタイプの指向を変更します.
八、コピー引継ぎ

    function Person() {};
    Person.prototype.age = 10;
    Person.prototype.sex = " ";
    Person.prototype.height = 100;
    Person.prototype.play = function () {
      console.log("  ！");
    };
    var Student = {};
    //Person       prototype,prototype      ,    ,age,sex,height,play             

    for (let key in Person.prototype) {
      Student[key] = Person.prototype[key];
    }
    console.dir(Student);
    Student.play();

： ， ！ ， ， ！ ！ ！また、インターンシップに参加して就職したいですが、もしその方が小学生の弟がいいと思ったら、小学生の弟にチャンスをください.メールボックス:[email protected]
転載先:https://juejin.im/post/5c9592ff6fb9a070f30b0730