JavaScript new、call、apply、bind的实现(分享)

1. new的实现

function New(fn, ...args) {
  // 1. 创建一个新对象
  let obj = {}

  // 2. 使实例的隐形原型 == 构造函数的显示原型
  obj.__proto__ = fn.prototype
  fn.prototype.constructor = fn

  // 3. 改变this指向
  // 4. 把fn中的属性方法添加到新对象上
  let back = fn.call(obj, ...args)

  // 5. 如果构造函数中没有return，那么就返回这个新对象
  // 如果有return，并且返回的为引用数据类型，那么就返回引用数据类型
  return back instanceof Object ? back : obj
}

function Person(name, age) {
  this.name = name
  this.age = age
}

let p1 = New(Person, "小红", 18)
console.log(p1); // Person {name: '小红', age: 18}

2. call的实现

Function.prototype.call = function (target, ...args) {
  // 有就自己，没有就全局
  target = target || window

  // this指调用者，把调用函数添加到被指向着的属性中
  target.fn = this

  // 这一步相当于，盗用 调用的函数
  // 这里是target调用，所以原函数中的this就指向target了
  let result = target.fn(...args)

  // 删除target中，函数这个方法
  delete target.fn

  // 返回原函数中return的内容
  return result
}

function fn(a, b, c) {
  console.log(this, a, b, c);
}

let obj = {
  name: "小红"
}

// 这个 fn: ƒ 其实被删除了，展开的时候可以看到
fn.call(obj, 123, 123, 123) // {name: '小红', fn: ƒ} 123 123 123

3. apply的实现

// apply和call一样，只是参数列表不同
Function.prototype.apply = function (target, args) {
  target = target || window
  target.fn = this
  let result = target.fn(...args)
  delete target.fn
  return result
}

function fn(a, b, c) {
  console.log(this, a, b, c);
}

let obj = {
  name: "小红"
}

fn.apply(obj, [123, 123, 123]) // {name: '小红', fn: ƒ} 123 123 123

4. bind的实现

// 对于这三种改变this指向的方法，也是简单实现，可能会有一些没考虑的情况
Function.prototype.bind = function (target, ...args) {
  let self = this
  return function () {
    return self.apply(target, [...args, ...arguments])
  }
}

let obj = {
  name: "小红"
}

function fn(a, b, c) {
  // text指向的打印
  console.log(this); // {name: '小红'}
  return a + b + c
}

let text = fn.bind(obj, 12)

console.log(text(2, 3)); // 17