理解js的原型链及继承方法

一. 认识原型链

1. JS的构造函数

          在ES6之前没有class关键字，使用构造函数来实例化一个对象，构造函数方式方法首字母需要大写，如下：

          function GetMsg（name, age）{

              this.name = name;

              this.age = age;

         }

      我们使用new关键字去实例化这个对象：

      Const msg = new GetMsg(‘Tom’, 18);

      每次new一个对象都会创建新的myMsg方法，这个时候我们就需要用到原型。

      es6提供的class关键字，也只是一个语法糖，本质js的结构还是一个对象。

2. 原型和原型对象

     每一个实例对象都有一个属性_proto_，指向构造函数的原型对象（prototype），这个属性就是它的原型。

3. 原型链

        一个JS对象存在指向原型对象的链，就是原型链，当开发者想要访问，这个对象的属性或者方法的时候，就需要访问该对象 的原型，通过这个链一直往下找，直到结束或者找为止，层层向上到原型链的末尾为null。

4. 小结

      简单来理解上面内容的话，是这样的：

     我们使用构造函数来创建一个实例化对象，这个对象有一个内置的属性_proto_，它的值指向的就是最开始声明的构造函数，这个构造函数就是这个它的原型，我们访问这个对象的属性或者方法的时候，就会在它的原型中寻找，如果不存在这个属性或者方法，我们就要去它的原型对象上寻找，也就是构造函数的prototype属性中，这个原型对象也有原型属性 _proto_，一层一层形成一个原型链，末尾为null，如：

{

        this.name = name;

        this.age = age;           ---------->Object.prototype------------> null

}

二. 如何使用

1. 调用构造函数

       // 使用prototype属性给构造函数声明一个方法

       Msg.prototype.getName = function(){return this.name;}

           const name = new GetMsg(‘Jerry’);

           name.getName();// Jerry

2. Object.create（）

     let obj = {};

     let obj1 = Object.create(obj);// 传入obj作为obj1的原型

  上面方法可以实现继承

       function Takeage(name){

              this.age = name;

       }

         Takeage.prototype.getAge = function(){

             return this.age;

          }

         // temp的原型是Takeage.prototype

          let temp = Object.create(Takeage.prototype);

 

          function Bar(age,label) {

               Takeage.call( this, age);   // call方法实现JS的继承

                this.label = label;

          }
          // Bar的原型是temp，temp的原型是Takeage.prototype，所以Bar.prototype和//Takeage.prototype有了继承的关系

         Bar.prototype = temp;

         let barInfo = new Bar(12, ‘obj a’);

         barInfo.getAge();// 12

 

三. JS如何实现继承

1. 构造函数绑定

        使用call或者apply方法将AA方法绑定在BB方法上

          function BB(name){

               AA.apply(this, arguments);

               this.name = name;

            }

 

2. 也可以用上述的方法：将父构造函数的原型prototype赋给子函数的prototype

          function parent(){}

          function son(){}               

          let Temp = function(){}

          Temp.prototype = parent.prototype;

          son.prototype = new Temp();

          son.prototype.constructor = son;

          son.uber = parent.prototype;

3. Es6中引入extends

     Class example extends eg1{

          constructor(super){}

    }

4. 小结

        这里主要小结一下原型链的继承，例如有两个对象，child和parent对象，我们首先命名一个中间的构造函数Ex，

         1）将parent对象的prototype赋值给中间函数

               Ex.prototype.prototype = parent.prototype;

         2）实例化中间函数赋值给子对象，这样子对象对应的就是Ex的原型属性

               Child.prototype = new Ex();

         3） 声明子函数的构造函数就是它本身

               Child. Prototype.constructor = child;

          4）父函数的原型对象给子对象的uber(这里指的的super：为了拿到父对象的属性方法)

                Child.uber = parent. Prototype;

         这样就实现了继承。