call、apply 及 bind 函数内部实现是怎么样的？
一、call
- call改变了this指向
- 函数执行
- 支持传参
⚠️注意：this可以传入undefined或者null，此时this指向window，this参数可以传入基本类型，call会自动用Object转换，函数可以有返回值
Function.prototype.call2 = function(context) {
context = context ? Object(context) : window;
context.fn = this;
let args = [...arguments].slice(1);
const result = context.fn(...args);
// es3写法
// var args = [];
// for(var i = 1, len = arguments.length; i < len; i++) {
// args 会自动调用 args.toString() 方法，因为'context.fn(' + args +')'本质上是字符串拼接，会自动调用toString()方法
// args.push('arguments[' + i + ']');
// }
// var result = eval('context.fn(' + args +')');
delete context.fn;
return result;
}
思考上面的写法会有什么问题？
这里假设context本身没有fn属性，这样肯定不行，我们必须保证fn属性的唯一性
- 实现方式一：es3模拟实现
首先判断 context中是否存在属性 fn，如果存在那就随机生成一个属性fnxx，然后循环查询 context对象中是否存在属性 fnxx。如果不存在则返回最终值。
function fnFactory (context) {
let unique_fn = 'fn';
while (context.hasOwnProperty) {
unique_fn = 'fn' + Math.random();
}
reutrn unique_fn;
}
tips：有两种方式可以判断对象中是否存在某个属性
1.in操作符，会检查属性名是否存在对象及其原型链中，注意数组的话是检查索引而不是具体值
例如对于数组来说，4 in [2, 4, 6] 结果返回 false，因为 [2, 4, 6] 这个数组中包含的属性名是0，1，2 ，没有4。
2.Object.hasOwnProperty(...)方法，只会检查属性是否存在对象中，不会向上检查其原型链。
- 实现方式二：es6模拟实现
利用Symbol，表示独一无二的值，不能使用 new 命令，因为这是基本类型的值，不然会报错。
Function.prototype.call2 = function(context) {
context = context ? Object(context) : window;
let fn = Symbol();
context[fn] = this;
let args = [...arguments].slice(1);
const result = context[fn](...args);
delete context[fn];
return result;
}
测试一下：
let value = 2;
let foo = {
value: 1
};
function bar(name, age) {
console.log(this);
console.log(name, age);
}
bar.call2(foo, 'test', 18); // foo{value:1} test 18
bar.call2(null); // window undefined undefined
bar.call2(123, 'test', 18); // Number{123} test 18
二、apply
apply与call的思路基本相同，区别在于传参为数组，实现如下
Function.prototype.apply2 = function(context, arr) {
context = context ? Object(context) : window;
let fn = Symbol();
context[fn] = this;
let result;
if (arr) {
result = context[fn](...arr);
} else {
result = context[fn]();
}
delete context[fn];
return result;
}
测试一下：
let value = 2;
let foo = {
value: 1
};
function bar(name, age) {
console.log(this);
console.log(name, age);
}
bar.apply2(foo, ['test', '18']); // foo{value:1} test 18
bar.apply2(null); // window undefined undefined
bar.apply2(123, ['test', '18']); // Number{123} test 18
三、bind
bind（） 函数在 ES5 才被加入，所以并不是所有浏览器都支持，IE8及以下的版本中不被支持，如果需要兼容可以使用 Polyfill 来实现。
bind方法与call/apply最大的区别就是bind返回一个绑定上下文的函数，而call/apply是直接执行了函数，特性如下：
- 可以指定this
- 返回一个绑定了this的函数
- 可以传参
- 柯里化
-- 获取返回函数的参数，然后同第3点的参数合并成一个参数数组，并作为 self.apply() 的第二个参数。
⚠️特别：绑定函数也能使用new操作符创建对象
这种行为就行把原函数当作构造器，提供的this被忽略，同时调用时的参数被提供给模拟函数，可以通过修改返回函数的原型来实现
Function.prototype.bind2 = function (context) {
// 保存this指向调用函数的对象
const self = this;
// 截取第一个参数后的参数
const args = [...arguments].slice(1);
//const args = Array.prototype.slice.call(arguments, 1);
// 返回函数
return function () {
const bindArgs = [...arguments];
// const bindArgs = Array.prototype.slice.call(arguments);
return self.apply(context, args.concat(bindArgs));
}
}
测试一下：
var value = 2;
var foo = {
value: 1
};
function bar(name, age) {
return {
value: this.value,
name: name,
age: age
}
};
var bindFoo = bar.bind2(foo, "Jack");
bindFoo(20);
// {value: 1, name: "Jack", age: 20}
bind还有一个在上文说过的特性需要实现：
一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器，提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。
例如：
const value = 2;
const foo = {
value: 1
};
function bar(name, age) {
this.habit = 'shopping';
console.log(this.value);
console.log(name);
console.log(age);
};
bar.prototype.friend = 'kevin';
const bindFoo = bar.bind(foo, 'bob');
const obj = new bindFoo(20);
// undefined
// bob
// 20
obj.habit; // shopping
obj.friend; // kevin
👆上面的例子this.value 输出为 undefined，既不是全局value 也不是foo对象中的value，这说明绑定的 this 对象失效了，new 的实现中生成一个新的对象，这个时候的 this指向的是 obj。
这一特性可以通过修改返回的函数的原型来实现
说明：
- 当作为构造函数时，this 指向实例，此时 this instanceof fBound 结果为 true，可以让实例获得来自绑定函数的值，即上例中实例会具有 habit 属性。
- 当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
- 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值，即上例中 obj 可以获取到 bar 原型上的 friend。
⚠️ 注意：调用 bind 的不是函数，需要抛出异常。
完整代码如下：
Function.prototype.bind2 = function (context) {
if (typeof this !== 'function') {
throw new Errow('Function.prototype.bind - what is trying to be bound is not callable');
}
const self = this;
const args = [...arguments].slice(1);
const fBound = function () {
const bindArgs = [...arguments];
return self.apply(
this instanceof fBound ? this : context,
args.concat(bindArgs)
);
}
// 直接使用ES5的 Object.create()方法生成一个新对象
fBound.prototype = Object.create(this.prototype);
// 或者：
// const fNOP = function () {}; // 创建一个空对象
// fNOP.prototype = this.prototype; // 空对象的原型指向绑定函数的原型
// fBound.prototype = new fNOP(); // 空对象的实例赋值给 fBound.prototype
return fBound;
}
网友评论