浅谈原型和原型链

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

原型和原型链随着 ES6 和 ES2017 出现这些概念离我们越来越远，class 出现让我们在 JavaScript 实现面向对象越来越容易。不过 class 只是一个语法糖，我们更深入了解 JavaScript 就必须过了原型和原型链这一关。

在 JavaScript 中有两

基本类型:

string、number、boolean、object，null，undefined

引用类型

String、Number、Boolean、Object、Function、Array、Date、RegExp、Error

基本定义

• prototype 通常称为原型
• __proto__ 通常为原型链上的一个结点

Designers have built a working prototype of the car. 设计者已经制造了汽车的工作原型。这是我在网上找到一句例句，帮助我们去理解什么是原型。prototype 是函数一个属性，指向一个对象，而 __proto__ 是一个对象的私有的属性，这个属性指向一个对象，也就是该对象的构造函数的 prototype 属性，__proto__ 指向一个对象，这个对象就是对象构造函数的prototype属性，所以 console.log(tut.__proto__ === Tut.prototype) //true。

function Tut(){};

定义一个函数

console.log(Tut.prototype);

查看函数的 prototype

const tut = new Tut();
console.log(tut.__proto__ === Tut.prototype) //true

用关键字 new 来调用一个函数，就会执行 Tut 构造函数来创建一个对象 tut

console.log(Tut.prototype.__proto__ === Object.prototype);

我们知道 Tut 的 prototype 是一个对象(object)那么对象就有一个属性 __proto__

原型链

var Article = function(title,likeCount){
    this.title = title;
    this.likeCount = likeCount;
    this.getLikeCount = function(){
        console.log(`like count: ${this.likeCount}`);
    }
}

当不用 new 关键字来直接调用函数，这时 this 是指向 window(浏览器端)，

const mlArticle = new Article("machine learing",1200);

我们一个对象(实例)上查找方法，首先会在构造函数查找该方法，例如getLikeCount 方法。

Article.prototype.getTitle = function(){
    console.log(`title ${this.title}`)
}

mlArticle.getTitle()

Object.prototype.getBaseTitle = function(){
    console.log('base title')
}

mlArticle.getBaseTitle();

方法 getLikeCount 对象 mlArticle 所以在 mlArticle 对象上就可以找到该方法，而要调用 mlArticle 的 getTitle 方法，首先在构造函数 Article 里面找，当找不到时候，就从其 __proto__ 属性指向 Article.prototype 对象中找 getTitle 方法，所以可以从该对象中调用到该方法，那么对于 getBaseTitle 这个定义在 Object.prototype 上的方法，就可以沿着 __proto__ 一路向上，具体来说挡在 Article.prototype 对象中找不到该方法时，就会在该对象__proto__ 指向的 Object.prototype 中查找 getBaseTitle。