【小滴课堂】JS的照妖镜——原型与原型链

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

作为一个合格的前端程序员，如果对原型于原型链不知道的话，那就不是一个好前端程序员

我们先看看什么是原型，我们写一个demo

class WebDeveloper  {
    // 构造函数
    constructor(name,age,stations){
        this.name = name
        this.age = age
        this.stations = stations
    }
    //定义一个方法
    introduce () {
        console.log(`我叫${this.name}，今年${this.age}岁，目前是一名${this.stations}`);
    }
}

const webDevelopers = new WebDeveloper('小三',20,'前端开发')
console.log(webDevelopers);  //webDeveloper {name: '小三', age: 22, stations: '前端开发'}
webDevelopers.introduce()  //我叫小三，今年22岁，目前是一名前端开发

上面我定义了一个类 WebDeveloper传入名字，年龄与岗位，还有一个方法。然后在页面我们得到这个对象

我们可以打印这些方法，但是我们发现它的 introduce 方法不是像哪些属性直接展示的，而是在下面的 [[Prototype]]中（其实这里应该是__proto__，但是他们表示的结果是一样的），这个东西翻译就是叫原型。

这个原型就是说当我们想访问这个方法的时候，我们一开始是不能获取的，我们只能通过原型向上一级查找，然后就查找到我们想要访问的方法了,这就是我们所说的原型了

然后我们不妨去试一试，既然这个webDevelopers是基于WebDeveloper这个类的，那我们可以去这样比较一下，他们的原型是否一致

这样我们惊讶的发现他们是相等的，也就是说他们的指向路径地址是相同的，再通俗的说就说这个类跟我们实例出来的类都指向一个相同的对象。

所以这就是原型的一个概念了，然后我们可以称我们实例的类有一个隐式的原型，而定义出来的类有一个显式的原型，因为他们都是指向同一个路径地址的。

所以，当我们实例一个类的时候，如果我们查不到相应的想要的方法，我们可以通过原型向上一级查找，直到查到为止，如果查不到最终会返回 null 。

然后我们再去理解一下原型链

先写一个demo

class Developer{
    constructor(name){
        this.name=name
    }
    kill(){
        console.log("写代码");
    }
}

class WebDeveloper extends Developer{
    constructor(name,age){
        super(name)
        this.age = age
    }
    hobbies(){
        console.log('我的爱好是睡觉');
    }
}

const programmers = new WebDeveloper("小明",18)

console.log(programmers);
programmers.hobbies()
programmers.kill()

然后我们去浏览器执行查看一下

这里我用三个颜色标明，我们能打印第一层，然后再通过原型对象向上一级查找爱好。按照我们对原型的理解可以找到爱好，但是为什么还可以继续向上一级查到技能呢？这就是原型链了

因为我通过定义一个父类，将技能放进去，再通过子类继承它，然后我们再去实例它，这样一算，我经过了三层，所以这就是原型链，可以通过链式去不断向上一级调用。

以上就是原型链。通过不断地向上一级查找，获取到最原始的方法。

这就是我对原型链的理解了，今天分享给大家。