JavaScript之bind的模拟实现

[chenyong9528]

定义

MDN的定义：

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

先看看怎么使用：

function foo(age, job) {
  console.log(this.name, age, job)
}

var obj = {
  name: "faker"
}

var fn = foo.bind(obj, 18)
fn("LOL") // faker 18 LOL

我们可以总结出bind的几个特点：

1. 返回一个新函数
2. 新函数和foo函数类似，只不过它的this指向第一个参数
3. 可以继续向新函数传参
4. 跟call一样，定义在Function.prototype上

注意：本实现考虑理想状态下的实现（至少一个对象作为参数，不考虑new方式调用返回的新函数）

实现

Function.prototype.bind1 = function(context) {
  var self = this
  var arg1 = Array.prototype.slice.call(arguments, 1)

  return function() {
    var arg2 = Array.prototype.slice.call(arguments)

    return self.apply(context, arg1.concat(arg2))
  }
}

function foo(age, job) {
  console.log(this.name, age, job)
}

var obj = {
  name: "faker"
}

var fn = foo.bind1(obj, 18)
fn("LOL") // faker 18 LOL

ES6实现

Function.prototype.bind1 = function(context, ...arg1) {

  return (...arg2) => this.apply(context, [...arg1, ...arg2])

}

function foo(age, job) {
  console.log(this.name, age, job)
}

const obj = {
  name: "faker"
}

const fn = foo.bind1(obj, 18)
fn("LOL") // faker 18 LOL

可以看出来有箭头函数和扩展运算符的加成，核心代码只需要一行即可