先补充自己之前的一个漏掉的知识点：
使用bind方法时，通过new关键字调用bind()产生的绑定函数，bind中第一个参数（this的指向）不起作用，后续参数正常使用
将绑定函数当做构造函数使用，bind 提供的 this 指向无效，但是还是可以预设参数。
function Person(age, address) {
this.age = age;
this.address = address;
console.log(this.name);
console.log(this.age);
}
var north = {
name : "north"
}
var northBind = Person.bind(north, 24);
//以下两种调用方式产生的结果不同
northBind()//north,24
var northObj = new northBind();//undefined,24
name并不是north对象含有的名字，可见第一个参数并没有起作用。
- bind()返回值是改造参数后的原函数的拷贝，所以调用bind()的必须是函数
- 调用bind()产生的函数时，仍可以传递参数，此时的参数与之前绑定时的参数合并在一起
function list(){
// 让类数组arguments拥有数组的方法slice，这个函数实现了简单把类数组转换成数组
return Array.prototype.slice.call(arguments);
}
list(1,2,3);//[1,2,3]
//给list绑定一个预设参数4
var list1 = list.bind(undefined,4);
list1();//[4]
list1(1,2,3);//[4,1,2,3]
因为三个方法只要是函数均可以访问，所以这三个方法应该定义在函数的原型上
1. call()
Function.prototype.call = function (context) {
// context值得就是this要指向的作用域，只是接收了第一个参数，后边的参数未接收
// 赋值作用域参数，如果没有或为null则默认为 window，即访问全局作用域对象
context = context || window
// 绑定调用函数（.call之前的方法即this，前面提到过调用call方法会调用一遍自身，所以这里要存下来）
// 这里的this即指Produce这个构造函数
context.invokeFn = this
// 截取作用域对象参数后面的参数，因为第一个为要绑定的作用域，所以从索引1开始
let args = [...arguments].slice(1)
// 执行调用函数，记录拿取返回值
let result = args? context.invokeFn(...args):context.invokeFn()
// 销毁调用函数，以免作用域污染
delete context.invokeFn
return result
}
const people = {
age: 18
};
const girl = {
getAge: function() {
return this.age;
}
}
console.log(girl.getAge.call(people));
2. apply
apply实现的思路与call基本相同,我们只需要对参数进行不同处理即可
Function.prototype.apply = function (context) {
// context值得就是this要指向的作用域，只是接收了第一个参数，后边的参数未接收
// 赋值作用域参数，如果没有或为null则默认为 window，即访问全局作用域对象
context = context || window
// 绑定调用函数（.call之前的方法即this，前面提到过调用call方法会调用一遍自身，所以这里要存下来）
// 这里的this即指Produce这个构造函数
context.invokeFn = this
// 对是否传参做判断
let result = arguments[1] ?context.invokeFn(...arguments[1]) : context.invokeFn()
// 销毁调用函数，以免作用域污染
delete context.invokeFn
return result
}
3. bind
一步一步的实现：
// 利用 apply 改变 this 指向
Function.prototype.bind = function(context) {
var that = this;
return function() {
return that.apply(context, arguments);
}
}
上述实现只能传递一个参数（context），原生的 bind 方法可以传入多个参数，作如下修改:
// 将 bind 方法的参数提取出来拼接到返回的闭包函数中
Function.prototype.bind = function(context) {
var that = this;
var args = [...arguments].slice(1)
return function() {
// 预设参数一定是 args 在前拼接
return that.apply(context, args.concat([...arguments])) ;
}
}
修改之后可以传多个参数了，但还不能作为构造函数：
Function.prototype.bind = function(context) {
var that = this;
var args = [...arguments].slice(1);
var bound = function() {
if(this instanceof bound) { // 如果是作为构造函数，那么第一个参数 context 就不需要了
return that.apply(this, args.concat([...arguments]))
} else {
return that.apply(context, args.concat([...arguments]))
}
}
// 维护原型关系
if(this.prototype) {
bound.prototype = this.prototype;
}
return bound;
}
参考链接：
