原型链详解（附带图解）

2）原型以及原型链（实质是引用非赋值）

2.1）定义

定义：是function（构造函数函数）对象的一个属性，它定义了构造函数构造出来的对象的公共祖先。通过该构造函数创建的对象，可以继承他的原型的属性和方法。（eg:person.prototype就是一个原型）

举个例子：

            Grand.prototype.lastName = '何';
            function Grand() {
                
            }
            var grand = new Grand();
            Father.prototype = grand;
            function Father() {
                this.name = '十七';
            }
            var father = new Father();
            Son.prototype = father;
            function Son() {
                this.hobbit = 'smoke';
            }
            var son = new Son();
            console.log(son.lastName);//何

上面的例子，个人觉得很好，上述代码块中，完美的解释了继承，son继承了Grand的所有的属性。

再来举个例子（公共的祖先）

            function Person(userName,like) {
                this.userName = userName;
                this.like = like
            }
            var p1 = new Person('十七','肉');
            console.log(p1);
            var p2 = new Person('十七1','菜');
            console.log(p2);

第二个代码块解释了公共祖先。在这里后面new了两个实例化对象的公共祖先都应该是Person.prototype。用图形表示就是下图的123

2.2）原型属性

原型属性： prototype：是构造函数的原型；
proto：指向构造函数的prototype。 (proto前面两个__后面也有两个)

​ constructor：指向该原型原本的构造函数

举个例子：

            function Person(userName,like) {
                this.userName = userName;
                this.like = like
            }
            var p1 = new Person('十七','肉');
            console.log(p1);
            console.log(p1.constructor);//Person的函数
            console.log(p1.constructor===Person);//true
            var p2 = new Person('十七1','菜');
            console.log(p2);
            console.log(Person.prototype);
            console.log(p1.__proto__ === Person.prototype);
            console.log(p2.__proto__.__proto__===Object.prototype);//true
            var p4 = new Object({userName:'sq'});
            console.log(p4.__proto__===Object.prototype);//true
            如果 console.log(p4.__proto__===Person.prototype);//false  因为这里new的是一个Objec所以直接指向Object哪里。
            

上述代码块中，p1 p2都是实例化对象，所以没有constructor和prototype这两个属性，

console.log(p1.constructor);//Person的函数 这一行代码中，之所以是Person的函数，是因为实例化对象中找不到constructor这个属性就只能往上面去找，通过__proto__这个纽带找到上面的Person.prototype里面的constructor这个属性然后再往上面找到Person。所以这里打印出来的是Person的函数。

理所当然， console.log(p1.constructor=Person);//true 这一句也应该是true.(在这里特别说明一下=是表示类型和值都是全等的)

 console.log(p2.__proto__.__proto__===Object.prototype);//true   

在上面的那一行中可以由图得到。

上图中的Fuction和Object是JS内置的就是一个构造函数

在实例化对象中无constrcutor和prototype两个属性，但是可以去上一级寻找。

万物皆为空，万物皆为对象。

只要是 .prototype这种样式的都是对象。

proto只是一个纽带把各个对象串成链，就叫做原型链。

Function.__proto__===Function.prototype //true    因为__proto__指向prototype

            var p4 = new Object({userName:'sq'});
            console.log(p4.__proto__===Object.prototype);//true

上面的代码块中需要注意的是这里new的是一个Object所以这里是true,如果===的是Person.prototype就是false，因为指向的都不一样。

上图中的只有Function里面才有proto指向Function.prototype这一条，其他的都是指向自己的上一级的原型

特别说明：如果Function下面有好几个函数下面的构造函数的proto都是指向Function.prototype

例子如下：

            Grand.prototype.lastName = '何';
            function Grand() {
                
            }
            var grand = new Grand();
            Father.prototype = grand;
            function Father() {
                this.name = '十七';
            }
            var father = new Father();
            Son.prototype = father;
            function Son() {
                this.hobbit = 'smoke';
            }
            var son = new Son();
            console.log(son.lastName);//何
            console.log();
            console.log(Grand.__proto__===Function.prototype);//true
            console.log(Father.__proto__===Function.prototype);//true
            console.log(Son.__proto__===Function.prototype);//true

3）原型的使用

我们可以在原型之上扩展属性或者方法，包括系统内置的构造函数。原型给了我们一个修改内置的构造函数的接口和机会。

举个例子：

       function Person(username) {
           this.username = username;
       }
       Person.prototype.say = function () {
           console.log(this.username);
       }
       Person.prototype.a = 999;
       var p1 = new Person('十七');
       console.log(p1);
       console.log(p1.a);
       p1.say();

    //    var arr = new Array()
    Array.prototype.sum = function () {
        var sum = 0;
        for(var i =1;i<this.length;i++){
            sum += this[i];
        }
        return sum;
    }
    var arr = new Array(1,2,3);
    console.log(arr.sum());
    console.log(Array);
    Array.prototype.max = function () {
        var max = this[0];
        for(var i = 0;i<this.length;i++){
            if (this[i]>max) {
                max=this[i];
            }
        }
        return max;
    }
    var arr1 =new Array(55,66,99,88,7);
    console.log(arr1.max());
    console.log(Math);
    var arr3 = [1,2,6,9,88];
   
    var m = Math.max(1,2,5,8,9,8,9);
    console.log(m);
    console.log(Math.max.apply(arr1,arr1));
    console.log(arr1.max());

注意：当我们使用一个对象的属性或者方法时，是不需要使用proto属性的，js解释器会自动顺着原型链去找对应的属性或者方法。

上述代码块中Array就是先写出封装函数然后再直接调用的，Math是一个对象里面自带有很多方法，第一个arr1是对象，第二个是实参（数组）。 console.log(Math.max.apply(arr1,arr1));里面的max是Math自带的，而非重新定义的。

this就是在那个地方就指向哪里，但是也可以改变指向，根据具体情况而定。