JavaScript学习笔记（二十五）——原型及原型链

原型

原型的出现就是为了解决构造函数的缺点。

prototype

• prototype是每个函数创建的时候自带的一个属性，是一个对象空间，返回值是一个对象。
• 既然是每一个函数都有的属性，那么构造函数也有这个prototype。
• 这个prototype能够通过函数名来访问：函数名.prototype

function Person(){};
console.log(Person.prototype); // 返回的是一个对象

既然prototype是一个对象空间，那么我们可以向里面添加东西

Person.prototype.name = "Person";
Person.prototype.dog = function(){
	console.log("宠物狗");
}
console.log(Person.prototype.name);
console.log(Person.prototype.dog);

注意： 在函数的prototype里面存放的内容，不是给函数使用的，是给函数的每一个实例化对象使用的。

那么实例化对象怎么使用呢？

__proto__

• 注意是前面两个下划线后面两个下划线
• __proto__是每个实例化对象自带的属性，是一个对象空间
• 这个__proto__对象空间是给每一个实例化对象使用的
• 当你访问一个对象中的成员时
  • 如果这个对象自己本身有这个成员，那么就会直接返回结果
  • 如果没有，就会去__proto__里面找，如果里面有，就返回结果，如果没有，就继续寻找，这就是后面要介绍的原型链

那么这个__proto__指向哪里？

• 这个实例化对象是由哪个构造函数new出来的，那么__proto__就指向这个构造函数的prototype

let p1 = new Person();
console.log(Person.prototype === p1.__proto__); // true

我们发现，实例化对象的__proto__和所属的构造函数的prototype是同一个对象空间。可以通过构造函数名称来向prototype中添加成员。那么，实例化对象在访问自己的成员时，发现没有，就会自动去__proto__里面查找。这样一来，我们之前构造函数的缺点就可以解决了：

• 把函数放在构造函数的prototype中，实例化对象访问的时候，可以访问到__proto__，那么就可以使用了，即解决了构造函数中方法不共享的问题。

        function Person2(){
            this.name = name;
            Person2.prototype.dog = function(){
                console.log("宠物狗");   
            }
        }
        let p2 = new Person2();
        console.log(Person2.prototype.dog);
        console.log(p2.dog);        
        console.log(Person2.prototype.dog === p2.dog); // true

结论：当我们写构造函数的时候，属性直接写在构造函数体内，方法写在原型prototype上

原型链

我们知道了函数自带prototype属性，对应的实例化对象也自带__proto__属性。

那么，构造函数的prototype里面的__proto__属性又指向哪里呢？

一个对象所属的构造函数

每一个对象都有一个自己所属的构造函数，比如： 数组

// 数组本身也是一个对象
var arr = []
var arr2 = new Array()

以上两种方式都是创造一个数组，我们就说数组所属的构造函数就是Array

又比如：函数

// 函数本身也是一个对象
var fn = function () {}
var fun = new Function()

以上两种方式都是创造一个函数，我们就说函数所属的构造函数就是Function

那么，对象的__proto__里面也有一个成员叫做constructor，这个属性就是指向当前对象所属的构造函数。

链状结构
当一个对象我们不知道准确的是谁构造的时候，我们呢就把它看成 Object 的实例化对象。也就是说，我们的 构造函数 的 prototype 的 __proto__指向的是 Object.prototype。

那么 Object.prototype 也是个对象，那么它的 __proto__ 又指向谁呢？

因为 Object 是 js 中的顶级构造函数，我们有一句话叫 万物皆对象，所以 Object.prototype 就到顶了，Object.prototype 的 __proto__ 就是 null

原型链访问原则
我们之前说过，访问一个对象的成员的时候，自己没有就会去 __proto__ 中找，接下来就是，如果 __proto__ 里面没有就再去 __proto__ 里面找
一直找到 Object.prototype 里面都没有，那么就会返回 undefiend

对象的赋值
到这里，我们就会觉得，如果是赋值的话，那么也会按照原型链的规则来?

但是： 并不是！并不是！并不是！ 重要的事情说三遍。

赋值的时候，就是直接给对象自己本身赋值，如果原先有就是修改，原先没有就是添加，不会和 __proto__ 有关系

总结

介绍了那么多，我们应该发现了面向对象的思想模式了：

当我想完成一个功能的时候，先看看内置构造函数有没有能给我提供一个完成功能对象的能力。如果没有，我们就自己写一个构造函数，能创造出一个完成功能的对象。然后在用我们写的构造函数 new 一个对象出来，帮助我们完成功能就行了。