1 简版bind

  • bind是Function.prototype上的方法
1

Function.prototype.bind2 = () => {}
  • 接收的第一个参数是新的this，返回一个新函数
1
2
3

Function.prototype.bind2 = (newThis) => {
	return function(){}
}
  • bind中的this就是调用bind的函数；返回的新函数的this就是bind的第一个参数，使用call绑定并调用，新函数的返回值就是绑定新this的原函数的返回值
1
2
3
4
5
6

Function.prototype.bind2 = (newThis) => {
  const fn = this
	return function(){
    return fn.call(newThis)
  }
}
  • bind接收（多次）参数，即fn.bind(this, p1)(p2) || fn.bind(this, p1, p2)
1
2
3
4
5
6

Function.prototype.bind2 = (newThis, ...args1) => {
  const fn = this
	return function(...args2){
    return fn.call(newThis, ...args1, ...args2)
  }
}

2 进阶bind（不能用bind同时期出现的api）

  • 思路：
    • 在arguments中截取this和参数（不能直接slice）
    • 不能使用const和剩余参数语法
    • 记得进行错误处理
1
2
3
4
5
6
7
8
9

function myBind(newThis) {
  var args = Array.from(arguments).slice(1);
  var fn = this;
  if (typeof fn !== "function") throw new Error("bind必须调用在函数上");
  return function (...args2) {
    var args2 = Array.from(arguments);
    return fn.apply(newThis, args.concat(args2));
  };
}

3 bind后的函数支持new

  • 示例：
1
2
3
4
5
6

const fn = function(a){ this.a = a }
const bindFn = fn.bind(undefined, 'x')
const obj = new bindFn() 

obj.a === 'x'
obj.__proto__ === fn.prototype
  • 思路
    • 通过原型链判断是new的还是默认的