原型与原型链

原型与原型链

1 什么是原型

简单的说，原型（Prototype）是一个属性，这个属性只有函数才有

我们可以在构造函数的原型上挂载方法，这个方法会继承到构造函数和构造函数所创造的实例上

        //我们定义一个Animal的构造函数
        function Animal(name) {
            this.name = name
            this.eat = function () {
                console.log('eat');

            }
        }
        //在构造函数的原型上挂载方法
        Animal.prototype.run = function () {
            console.log('我会跑');
        }
        var tiger = new Animal('🐅')
        console.log(tiger)
        console.log(tiger.run());
        var dog = new Animal('🐕')
        console.log(dog)
        console.log(dog.run())

我可以看到，通过构造函数创建的实例继承了构造函数原型上的方法

2什么是构造函数

构造函数（constructor）是构造函数原型上的一个方法，他的指向就是这个构造函数

		//我们创建一个Person构造函数
        function Person() { }
        //调用Person原型的构造函数,发现指向这个构造函数
        console.log(Person.prototype.constructor)   //ƒ Person() { }

在原型的概念中，构造函数的原型会继承方法到实例上，那我们推测，构造函数的实例是不是也有constructor属性，constructor指向谁？

        //我们创建一个Person构造函数
        function Person() { }
        //创建实例
        var p1 =  new Person()
        //打印实例的构造函数
        console.log(p1.constructor);  //ƒ Person() { }
	    //发现实例的constructor属性也指向了构造函数
        //那么我们来判断一下 实例上的constructor与构造函数原型上的constructor是否相等
        console.log(p1.constructor === Person.prototype.constructor);  //true

结论：实例上的constructor与构造函数原型上的constructor是否相等

3什么是隐式原型

每个对象都有一个隐式原型（proto），它指向创建该对象的构造函数的原型对象

function Person() {}
const p1 = new Person();
console.log(p1.__proto__ === Person.prototype); // true

person1的隐式原型指向Person构造函数的原型对象

原型链

通过以上的知识，所以我们可以得到一个简单的三角关系，这就是我们自定义构造函数的原型链

除了自定义的构造函数，还有两个非常重要的，一个是Object内置对象，一个是Function特殊函数

    //Object 内置对象
    var o = new Object()
    console.log(o.__proto__ === Object.prototype);   //true
    console.log(o.__proto__.constructor === Object);  //true
    console.log(o.__proto__.__proto__);  //null
    

    //Person 自定义对象
    function Person() { }
    var p1 = new Person()
    console.log(p1.__proto__ === Person.prototype);  //true
    console.log(p1.__proto__.constructor === Person);  //true
    console.log(p1.__proto__.__proto__.__proto__);
    

    //Function 特殊函数（可以作为构造函数使用） 自己是自己的实例
    var f = new Function()
    console.log(f.__proto__ === Function.prototype);  //true
    console.log(f.__proto__.constructor === Function);  //true
    console.log(f.__proto__.__proto__.__proto__ === null);

在我们分析这三个函数和对象时，我们发现他们的隐式原型最终都会指向Object.prototype, Object.prototype的隐式原型又指向null，所以我们可以得到完整的原型链

这里需要注意的是，Function是一个特殊的构造函数，他是自己的实例，也是自己的原型，所有对象都是Function的实例