一张图让你彻底理解js原型链

function Person() {
    this.name = 'sanlyshi';
    this.age = '23';
    this.eat = function () {
        console.log(this.name +' is eating!')
    }
}
Person.prototype.smell = function () {
    console.log("smell");
};
var person1 = new Person();
console.log(person1.name);   //sanlyshi
person1.eat();               //sanlyshi is eating!
person1.smell();             //smell


// 每个"函数"都有一个prototype属性，指向一个"对象"
// "对象"具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型

Function.prototype.__proto__.__proto__ === null

Object.prototype.__proto__ === null

Object.prototype === Object.__proto__.__proto__

Object.prototype === Function.prototype.__ptoto__

Object.__proto__ === Function.prototype

Person.__proto__ === Function.prototype

person1.__proto__ === Person.prototype



// "prototype对象"有一个constructor属性，默认指向prototype对象所在的构造函数
console.log(Person.prototype.constructor === Person);   //true
console.log(Function.prototype.constructor === Function);   //true
console.log(Object.prototype.constructor === Object);   //true

呃呃，后面又整理了一下，搞了两张出来，哈哈

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

构造函数方法很好用，但是存在一个浪费内存

通过原型法分配的函数是所有对象共享的.

通过原型法分配的属性是独立.-----如果你不修改属性，他们是共享

如果我们希望所有的对象使用同一一个函数，最好使用原型法添加函数，这样比较节省内存.

例子：

//----构造函数模式

为Cat对象添加一个不变的属性"type"（种类），再添加一个方法eat（吃老鼠）。那么，原型对象Cat就变成了下面这样：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<script> function Cat(name, color) {   this.name = name;   this.color = color;   this.type = "猫科动物";   this.eat = function () {     alert("吃老鼠");   };   }     //生成实例： var cat1 = new Cat("大毛", "黄色"); var cat2 = new Cat("二毛", "黑色"); alert(cat1.type);     // 猫科动物 cat1.eat();    // 吃老鼠   alert(cat1.eat == cat2.eat); //false </script>

那就是对于每一个实例对象，type属性和eat()方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。

//----Prototype模式

Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<script> function Cat(name, color) {   this.name = name;   this.color = color;   }     Cat.prototype.type = "猫科动物"; Cat.prototype.eat = function () {   alert("吃老鼠") };     //生成实例。 var cat1 = new Cat("大毛", "黄色"); var cat2 = new Cat("二毛", "黑色"); alert(cat1.type); // 猫科动物 cat1.eat();// 吃老鼠     alert(cat1.eat == cat2.eat);//trueF </script>

这时所有实例的type属性和eat()方法，其实都是一个内存地址，指向prototype对象，因此就提高了运行效率。

class Student {
    constructor(name) {
        this.name = name;
        //代码体1.这里面的实例的话会给每个实例对象来一份内存存储（构造函数继承）
        //常用来存储基本数据
    }

    hello() {
        alert('Hello, ' + this.name + '!');
        //代码体2.这里的实例的话会，每个实例会公用相同的。prototype的内存(原型继承)
        //这里常用来存储基本方法
    }  
}


//代码体1类比代码：
function Student(name) {
    this.name = name;
}

//代码体2类比代码：
Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

 

一、原型

JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象

当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾

准确地说，这些属性和方法定义在Object的构造器函数（constructor functions）之上的prototype属性上，而非实例对象本身

下面举个例子：

函数可以有属性。每个函数都有一个特殊的属性叫作原型prototype

function doSomething(){}
console.log( doSomething.prototype );

控制台输出

{
    constructor: ƒ doSomething(),
    __proto__: {
        constructor: ƒ Object(),
        hasOwnProperty: ƒ hasOwnProperty(),
        isPrototypeOf: ƒ isPrototypeOf(),
        propertyIsEnumerable: ƒ propertyIsEnumerable(),
        toLocaleString: ƒ toLocaleString(),
        toString: ƒ toString(),
        valueOf: ƒ valueOf()
    }
}

上面这个对象，就是大家常说的原型对象

可以看到，原型对象有一个自有属性constructor，这个属性指向该函数，如下图关系展示

二、原型链

原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法

在对象实例和它的构造器之间建立一个链接（它是__proto____属性，是从构造函数的prototype属性派生的），之后通过上溯原型链，在构造器中找到这些属性和方法

下面举个例子：

function Person(name) {
    this.name = name;
    this.age = 18;
    this.sayName = function() {
        console.log(this.name);
    }
}
// 第二步 创建实例
var person = new Person('person')

根据代码，我们可以得到下图

下面分析一下：

• 构造函数Person存在原型对象Persion.prototype

• 构造函数生成实例对象person，persion的__proto__指向构造函数Person原型对象

• Person.prototype.__proto__ 指向内置对象，因为 Person.prototype 是个对象，默认是由 Object函数作为类创建的，而 Object.prototype 为内置对象

• Person.__proto__ 指向内置匿名函数 anonymous，因为 Person 是个函数对象，默认由 Function 作为类创建

• Function.prototype 和 Function.__proto__同时指向内置匿名函数 anonymous，这样原型链的终点就是 null

三、总结

下面首先要看几个概念：

__proto__作为不同对象之间的桥梁，用来指向创建它的构造函数的原型对象的

每个对象的__proto__都是指向它的构造函数的原型对象prototype的

person1.__proto__ === Person.prototype

构造函数是一个函数对象，是通过 Function构造器产生的

Person.__proto__ === Function.prototype

原型对象本身是一个普通对象，而普通对象的构造函数都是Object

Person.prototype.__proto__ === Object.prototype

刚刚上面说了，所有的构造器都是函数对象，函数对象都是 Function构造产生的

Object.__proto__ === Function.prototype

Object的原型对象也有__proto__属性指向null，null是原型链的顶端

Object.prototype.__proto__ === null

下面作出总结：

• 一切对象都是继承自Object对象，Object 对象直接继承根源对象null

• 一切的函数对象（包括 Object 对象），都是继承自 Function 对象

• Object 对象直接继承自 Function 对象

• Function对象的__proto__会指向自己的原型对象，最终还是继承自Object对象

参考文献

• https://juejin.cn/post/6870732239556640775#heading-7

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain