JS 原型

原型

这并不是一篇详细介绍原型的文章，而是在初步学过原型的基础上进行的些许思考

速览

• 显示原型 prototype
• 隐式原型 __proto__

显示原型是函数的一个属性，隐式原型是对象的一个属性，不可枚举。

对象的隐式原型指向其构造函数的显示原型，即原型对象，如：

function A() {}
const a = new A()

console.log(a.__proto__ === A.prototype) // true

绝大部分对象都是有原型的，或者说原型为 null，比如：

console.log(Object.prototype.__proto__) // null

const obj = Object.create(null)
console.log(obj.__proto__) // null

constructor

默认情况下，原型对象上有一个 constructor 属性，指向构造函数。这意味着我们可以通过实例对象的原型对象找到其构造函数。

function A() {}
console.log(A.prototype.constructor === A) // true

const a = new A()
console.log(a.__proto__.constructor === A) // true

原型相关的方法

Object 对象上有一些原型相关的静态方法，如 getPrototypeOf、setPrototypeOf 等。

• Object.getPrototypeOf 方法返回对象的原型。
• Object.setPrototypeOf 方法设置对象的原型。

function A() {}
const a = new A()
console.log(Object.getPrototypeOf(a) === A.prototype) // true

const obj = {}
Object.setPrototypeOf(obj, A.prototype)
console.log(Object.getPrototypeOf(obj) === A.prototype) // true

通过 Object.getPrototypeOf 和 Object.setPrototypeOf 方法操作对象原型和直接使用 __proto__ 是等价的。

__proto__ 是非标准的方法，可以看作是 Object.getPrototypeOf 和 Object.setPrototypeOf 方法的语法糖。

Object.prototype.isPrototypeOf 方法用于判断对象是否是另一个对象的原型。

function A() {}
const a = new A()
console.log(A.prototype.isPrototypeOf(a)) // true
// 借用的方式
console.log(Object.prototype.isPrototypeOf.call(A.prototype, a)) // true

函数的原型

函数的原型指向 Function.prototype，而 Function.prototype 的原型指向 Object.prototype。

有意思的是，Function 的原型也指向 Function.prototype。

function A() {}
console.log(A.__proto__ === Function.prototype) // true

console.log(Function.prototype.__proto__ === Object.prototype) // true

console.log(Function.__proto__ === Function.prototype) // true

函数可以通过两次原型链访问到 Object.prototype。

Object.__proto__.__proto__ === Object.prototype

instanceof

instanceof 运算符用于判断对象是否是某个构造函数的实例。

function A() {}
function B() {}
const a = new A()
console.log(a instanceof A) // true
consolejson.log(a instanceof B) // false

instanceof 的原理是通过判断对象的原型链中是否存在构造函数的 prototype。

模拟实现 instanceof：

function myInstanceof(obj, constructor) {
  let proto = obj.__proto__
  while (proto) {
    if (proto === constructor.prototype) {
      return true
    }
    proto = proto.__proto__
  }
  return false
}