（JavaScript笔记摘要）一次性搞定原型和原型链

一、前言

学完JavaScript ES5基础语法（核心语法）后，发现根本不够用，于是选择继续精进JavaScript功底

学到原型和原型链时，发现有点卡壳儿，于是投入了一定精力，进行了汇总整理和吸收，最后感觉效果不错，于是整理为笔记分享一番

二、导学

在JavaScript中，实现面向对象编程主要在于实现其三个基本特性：封装、继承和多态

封装是基于闭包实现的，而继承则基于原型链实现的，至于多态则有赖于继承

要搞清楚原型链，就需要先弄清楚原型

三、原型

__proto__ 是一个非标准的 访问对象 原型的属性。它是每个对象都具有的属性，用于指向它的原型对象

[[prototype]] 是对象的内部属性（也称为隐藏属性），指向其原型对象。不能直接访问 [[prototype]]

__proto__ 和 [[prototype]]是相互关联的，通过__proto__访问或设置对象的原型，实际上就是操作 [[prototype]]属性

下面通过代码来理解这块儿的知识点

let shs = new Object({})
console.dir(shs)
console.dir(shs.__proto__)

🔥prototype 属性只存在于函数对象上，这是一个特殊属性，称之为原型，因为其值是一个对象，也称为原型对象

实例化对象.__proto__ === 构造函数.prototype

下面通过代码来理解这块儿的知识点

let shs = new Object({})
console.dir(shs)
console.dir(Object)
let str = new String("shs")
console.log(str.__proto__ === String.prototype)
console.log(shs.__proto__ === Object.prototype)

【图解】

由此可以看出原型的作用：存放一些属性和方法 和 在JavaScript中实现了继承

💭思考：是不是所有的对象都有原型呢？

let shs = {name: "松花鼠"}
console.log(shs)
console.log(shs.hasOwnProperty("name"))
// 创建没有原型的对象
let zj = Object.create(null, {
    name: {
        value: "真经"
    }
})
console.log(zj)

四、原型链

当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会沿着原型链向上查找，直到找到相应的属性或方法或者到达原型链的顶端为止

下面通过代码来验证下

const obj = {}
Object.prototype.val = "value"
const func = function() {}
Function.prototype.values = "values"
console.log(func.values)
console.log(func.val)
console.log(func.__proto__ === Function.prototype)
console.dir(func)

下面通过代码来理解原型链

let str = new String("sg")
console.dir(str)
console.dir(str.__proto__)
console.dir(String.prototype)
let obj = new Object({})
console.dir(Object.prototype)
console.dir(String.prototype.__proto__)
console.dir(String.prototype.__proto__.__proto__)

【图解】

由此观之，原型链是通过对象之间的关联来实现的即通过__proto__属性实现的。通过这个属性指向它的原型对象，而原型对象也是对象，也有__proto__属性，指向原型对象的原型对象，这样一层层查找形成的链式结构称为原型链

💭思考：最顶层的原型是Object原型吗？

在JavaScript中，Object原型是所有对象的最顶层原型，为对象提供了一些通用属性和方法，并通过原型链机制实现了对象之间的继承

通过代码加深理解

let str = new String("sg")
console.dir(str)
let num = new Number(666)
console.dir(num)
let obj = new Object({})
console.dir(obj)

【图解】

看到这里，你不会以为你懂了吧🤡，这么自信就来看看这道面试题

const foo = {}
let F = function() {}
Object.prototype.a  = "value a"
Function.prototype.b = "value b"

console.log(foo.a)
console.log(foo.b)

console.log(F.a)
console.log(F.b)

五、小结

以上是自己结合视频对原型和原型链有所理解后进行的梳理与汇总，希望可以帮到你^-^