JS原型链

一. JS原型的简单理解

1.1 prototype

prototype:是一个函数的属性，每一个函数中都会有一个prototype属性，这个属性是一个指针，指向一个对象。在JavaScript中原型是一个prototype对象，用于表示类型之间的关系。

1.1.1 prototype定义

每一个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型属性。

function Person() {}
      var p = new Person();

1.1.2 prototype 做用

原型对象包含实例共享的方法和属性，这个函数用做构造函数时调用，使用new操做符调用的时候，新建立的对象会从原型对象上获得一样的属性和方法。
原型做用之一:数据共享,节省内存空间
原型做用之二:为了实现继承

1.2 _proto_

proto:是一个对象拥有的内置属性，是js内部使用寻找原型链的属性，经过该属性能够容许使用实例对象直接访问原型。
注意，prototype是函数的内置属性，__proto__是对象的内置属性

function Person() {}
     var p = new Person();
  // 之前不能直接使用 p直接访问对象原型
  // 如今有了 __proto__ 后
  // p.__proto__ 也能够直接访问对象原型
  // 那么 p.__proto__ === Person.prototype

1.2.1. _proto_ 有什么用?

• 能够访问原型
• 因为在开发中除非特殊要求, 不要使用实例去修改原型的成员. 所以属性开发时使用较少
• 调试过程当中很是方便, 能够轻易的访问原型进行查当作员

1.3. constructor

constructor：属性返回对建立此对象的函数的引用。(指向原型对象的构造函数)

二. 原型链

2.1 什么是原型链？

原型链就是实例对象和原型对象之间的关系，他们使用__proto__来关联。
图解：

分析： a._proto_ ==Funciton构造函数的原型对象，其实原型对象也是一个实例化对象，既然是对象，那么他就是用Object来建立的， 既 var obj = new Object();因此Functionde的原型对象._proto_ = = Object构造函数的原型对象

2.2 原型对象是否能够改变

看下面的图文解读：

function Person(name,age){
            this.name = name;
            this.age = age;
        };
        Person.prototype = {
                run:function(){
                    console.log("天天坚持锻炼");
                }
        };
        var person1 = new Person("Tom",20);
        person1.run();// 输出天天坚持锻炼身体

很显然，构造函数的原型对象是能够进行改变的，改变以后，当实例化对象时，它的原型对象就是构造函数新指向的对象。

三. 继承

3.1 什么是继承？

继承是一种关系,类(Class)与类之间的关系,JS中没有类,可是能够经过构造函数模拟类,而后经过原型来实现继承。继承是为了数据共享,js中的继承也是为了实现数据共享
eg：构建一个类是"人"，他有姓名，性别，年龄等属性和方法，再构建一个学生类，他能够继承人的姓名，性别年龄等属性，而且他还有属于他本身的方法，好比：学习行为。看下面代码：

//定义一我的的类别
        function Person (name,age,sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        Student.prototype = new Person("Tom",20,"man");
        //定义一个学生类别
        function  Student(){
                this.s =  function(){
                console.log("学生的天职就是学习");
            }
        }
        //实例化一个学生对象
        var student = new Student();
        student.s();// 学生的天职就是学习
        console.log(student.name);// Tom
        console.log(student.age);// 20
        console.log(student.sex);// man

分析： 实例化学生的对象继承了 Student对象的 方法，而且继承了 Person 对象的姓名，年龄，性别 属性。这就是继承。

3.2 实现继承的两种方式

3.2.1 改变原型对象的指向实现继承

看下面的图文详解

// 建立一个动物类别
        function  Animal (weight,color) {
            this.weight = weight;
            this.color = color;
        };
        // 建立一个狗类
        function Dog(){
            this.bite = function (){
                console.log("咬人");
            };
        };
        Dog.prototype = new Animal("25kg","white");
        //建立一个二哈(狗的品种)类
        function Erha(){
            this.sayHello = function(){
                console.log("二哈是咱们的好朋友，可是让人讨厌的是它会拆家！");
            }
        }
        Erha.prototype = new Dog();
        // 实例化一个对象
        var dog = new Erha();
        dog.bite();// 咬人
        dog.sayHello();// 二哈是咱们的好朋友，可是让人讨厌的是它会拆家！
        console.log(dog.weight);// 25kg
        console.log(dog.color);//white

分析：首先建立一个Animal构造函数，里面有两个属性，而后在建立一个Dog构造函数，并改变Dog构造函数的原型对象 既 Dog.prototype = new Animal("25kg","white"); 最后建立Erha对象，再次改变Erha的原型对象，
Erha.prototype = new Dog(); 实例化一个对象，这时。这个实例化的对象就拥有了Animal的属性和方法，包括Dog的属性和方法，这就实现了继承，

缺陷： 若是实例化出来的对象，那么它的属性初始化值都是同样的。

3.2.2 改变 this 指向实现继承

// 建立Person类
        function  Person(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        };
        // 建立原型对象
        Person.prototype.run = function(){
            console.log("天天坚持锻炼");
        }
        // 建立Studet 构造函数
        function Student(name,age,sex,score){
            // call函数就是改变执行代码片断中this指向。
            // this指的是当前函数
            Person.call(this,name,age,sex);
            this.score = score;
            this.study = function(){
                console.log("学生的天职就是学习");
            }
        };
        // 改变Student的原型对象，下面这句代码很重要，若是没有这句代码会出现不能继承父类原型对象的方法，这也是改变this指向继承的缺陷，因此咱们能够采用两中模式共存的思想进行继承。
        Student.prototype = new Person();
        var stu1 = new Student("Tom",19,"man",80);
        stu1.run();// 天天坚持锻炼
        console.log(stu1.name);// Tom
        console.log(stu1.age);// 19
        console.log(stu1.sex);// man
        console.log(stu1.score);// 80

分析：其实这个很简单，只要你明白this的指向就好明白了，this的指向见个人另外一篇文章 Js面向对象第六小结。先分析这个，首先建立类我就不说了，直接说这个this指向问题，这里小编用了一个call()方法，call函数可以改变代码片断的this指向，本例中this指向为当前函数，Person(this,name,age,sex)===this.name = name; this.age = age;this.sex = sex; 这下是否是明白了

补充： apply 函数，这个函数也能够实现改变this指向来完成继承，见下面的代码：

// 建立Person类
        function  Person(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        };
        // 建立原型对象
        Person.prototype.run = function(){
            console.log("天天坚持锻炼");
        }
        // 建立Studet 构造函数
        function Student(name,age,sex,score){
            // call函数就是改变执行代码片断中this指向。
            // this指的是当前函数
            Person.apply(this,[name,age,sex]);
            this.score = score;
            this.study = function(){
                console.log("学生的天职就是学习");
            }
        };
        // 改变Student的原型对象
        Student.prototype = new Person();
        var stu1 = new Student("Tom",19,"man",80);
        stu1.run();// 天天坚持锻炼
        console.log(stu1.name);// Tom
        console.log(stu1.age);// 19
        console.log(stu1.sex);// man
        console.log(stu1.score);// 80

这里只改变一句代码： Person.apply(this,[name,age,sex]);
很明显能够看出，apply和call的区别就是 参数问题，apply的第二个参数为数组，而call为数据

补充： bind函数

bind的做用是将函数复制一份而且改变函数中的this, 而且返回这个函数。

见下面的代码分析：

function Person(name,age){
            this.name = name;
            this.age = age;
            this.run = function(){
                console.log(this.age);
            }
        }
        var p1 = new Person("Tom",15);
        var p2 = new Person("Jack",19);
        p1.run.bind(p2)();// 19

分析：使用bind函数时会复制一份函数，本例子是把 function(){console.log(this.age)} 复制了一份，并改变了此时的this 为p2.

四. 总结

说实话，这节真的很难懂，我也是略懂一二而已，要想真正的明白，须要慢慢的沉淀，不知道正在学习前端的你针对这节内容有什么想法，能够留言告诉我，咱们一块儿努力！