【前端面经】JS-原型和原型链

构造函数

众所周知,JavaScript中的复杂类型都是对象类型(Object), 而javaScript并不是一门完全面向对象编程的语言, 所以涉及到面向对象编程, 例如继承机制, 这就是一个问题, 因此就出现了构造函数

因为js中没有类(class)这个概念, 所以js使用构造函数来实现继承机制

ps: 即使ES6中出现class关键字, 但其实它可以看作是一个语法糖, 让js在写法上更加清晰和更加像面向对象编程的语法

// 构造函数
function Person() {}
Person.prototype.name = 'achen'
Person.prototype.age = 23
Person.prototype.sayName = function() {
    console.log(this.name);
}

// 生成实例
let person1 = new Person()
let person2 = new Person()
person1.name = "Achen"

js通过构造函数来生成实例, 但是问题在于构造函数中通过this赋值的属性和方法, 是每个实例的实例属性和实例方法, 而不是公共的属性和方法. 为了解决这个问题, 就设计出了原型对象, 用来存储构造函数的公共属性和方法

原型对象

js的每个函数在创建时都会生成一个属性prototype, 这个属性指向一个对象, 这个对象就是此函数的原型对象. 原型对象中有个constructor, 指向该函数, 这样原型对象和它的函数之间就产生了联系

__proto__

__proto__并不是语言本身的特性，这是各大厂商具体实现时添加的私有属性，虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性，但依旧不建议在生产中使用该属性，避免对环境产生依赖。生产环境中，我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型，然后再来为原型添加方法/属性。（摘自阮一峰的ES6入门）

每个通过构造函数创建出来的实例对象, 其本身有个属性__proto__(有的浏览器也是直接显示为[[prototype]]), 这个属性指向实例对象的构造函数, 图片可能会更加直观
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uEEOByzV-1673513176983)(…/images/js-prototype-1.png)]

原型链

当访问与一个对象的某个属性时, 会现在这个对象本身属性上查找, 如果没有找到就会通过它的__proto__找到它的原型对象, 如果还没有找到, 就会在其构造函数的prototype的__proto__中查找, 这样一层一层向上查找就会形成一个链式结构, 它就称之为原型链

// 生成实例
let person1 = new Person()
let person2 = new Person()
person1.name = "Achen"

console.log(person1.name) // 寻找自身属性, 包含name, 所以返回"Achen"
console.log(person2.name) // 寻找自身属性, 没有找到, 通过[[prototype]]找到原型对象, 包含name, 返回"achen"

person1.sayName() // "Achen"
person2.sayName() // "achen"

面试题: new一个实例的过程发生了什么?

1. 创建一个新对象
2. 新对象会被执行[[prototype]]连接
3. 将构造函数的作用域赋值给新对象(这样this就指向了新对象)
4. 执行构造函数中的代码(为新对象添加实例属性和实例方法)
5. 返回新对象

function Person(name, age) {
    this.name = name
    this.age = age
}
// 生成实例
const person = new Person("achen", 22)

// 结合上面的例子, 伪代码如下
// 1. 创建一个新对象 
   person =  {}
// 2. 新对象会被执行[[prototype]]连接 
   person.[[protype]] = Person.prototype
// 3. 将构造函数的作用域赋值给新对象
   Person.call(person, "achen", 22)
// 4. 执行构造函数中的代码
   person.name = "achen"
   person.age = 22
// 5. 返回新对象
   return {name: "achen", age: 22, [[prototype]]: Person}

参考文章

1. 红宝书
2. 掘金-一文搞懂JS原型与原型链（超详细，建议收藏）