浅谈JavaScript原型和原型链

theme: channing-cyan

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

前言

昨天说的构造函数的小问题，我们可以用原型模式来解决，我们可以先看一下(工厂函数和构造函数 ) 直接上代码。

    let Person = function () {};
    Person.prototype.name = "jackson";
    Person.prototype.age = 22;
    Person.prototype.sayName = function () {
        console.log(this.name);
    };
    let person1 = new Person();
    person1.sayName(); // "jackson"
    let person2 = new Person();
    person2.sayName(); // "jackson"
    console.log(person1.sayName == person2.sayName); // true

这里所有的属性和sayName()方法都直接添加到了Person的prototype属性上，构造函数上面也没有，我们可以看到这样定义之后，构造函数创建的新对象仍然拥有相应的属性和方法，使用这种原型模式定义的属性和方法是所有的实例共享的，要了解这个的话，我们必须先理解原型。

理解原型

在javascript中，无论何时只要创建一个函数，就会给这个函数函数创建一个特殊的属性叫作原型（prototype），在默认情况下，所有原型对象都会自动获得一个名为 constructor的属性。对于前面例子，Person.prototype.constructor指向的是Person。构造函数还可以给原型对象添加其他属性和方法。

    //原型
    function Person(){}
    console.log(Person.prototype);//下面用图片显示
    console.log(typeof Person.prototype); //Object

构造函数有一个prototype属性引用其原型对象，而这个原型对象也有一个 constructor 属性在引用这个构造函数，换句话说，两者循环引用：我们打印一下他们

console.log(Person.prototype.constructor === Person); //true

注意：构造函数，原型对象，实例 是三个完全不同的对象

我们画一个图，有点丑哈

Person.prototype 指向原型对象，而 Person.prototype.contructor 指回 Person 构造函数。原型对象包含 constructor 属性和其他后来添加的属性。Person 的两个实例 person1 和 person2 都只有一个内部属性指回 Person.prototype，而且两者都与构造函数没有直接联系。另外要注意，虽然这两个实例都没有属性和方法，但person1.sayName()可以正常调用。这是由于对象属性查找机制的原因。

原型链

在通过对象访问属性时，会按照这个属性的名称开始搜索，如果它本身有的话，就直接返回该名称对于的值，如果它本身没有的话，就会向它的原型对象上找，找到之后也返回该名称对应的值。

原型模式解决了成员共享的问题，只要是添加到构造函数 prototype 上的属性和方法就可以共享。

我们可以简单理解，用大白话说就是你有驾照想开车但是没有车，正好你爸爸有一辆车，你可以开着你爸的车。如果你有车的话直接就开了，也不用去开你爸爸的车。