每天做个总结吧,坚持就是胜利!
/**
@date 2021-05-31
@description 手写call, apply, bind(简易版)
*/
壹(序)
今天被问到如何实现call
,明明是很简单的一道手写题,但是当时脑子全是浆糊,回家很快就实现了一个简单的版本,但不管怎么说,还是掌握得不够牢固,所以今天手写实现一下call, apply, bind
。
贰(区别)
call, apply, bind
,三个函数都是Function原型
上的函数,用来强制改变当前函数this的指向
;三者的第一参数都是当前函数运行时使用的this
,也就是强绑定的this,可选,为null
或undefined
时指向全局对象;
三者主要区别有以下两点:
call, apply
会立即调用函数,并返回调用的值,bind
会返回一个新函数;- 三者第一个参数后面的参数是当前函数需要的参数,
call, bind
是依次传入,而apply
则是传入一个参数数组;
叁(实现)
测试代码:
const obj = {
a: 1,
}
function test() {
return this.a;
}
globalThis.a = 2;
call:
Function.prototype.myCall = function (thisArg = globalThis, ...args) {
const fn = Symbol('fn');
thisArg[fn] = this;
const res = thisArg[fn](...args);
delete thisArg[fn];
return res;
};
console.log(test.myCall(obj)); // 1
console.log(test.myCall()); // 2
apply:
Function.prototype.myApply = function (thisArg = globalThis, args = []) {
const fn = Symbol('fn');
thisArg[fn] = this;
const res = thisArg[fn](...args);
delete thisArg[fn];
return res;
};
console.log(test.myApply(obj)); // 1
console.log(test.myApply()); // 2
bind:
Function.prototype.myBind = function (thisArg = globalThis, ...args) {
const self = this;
return function () {
return self.myApply(thisArg, [...args, ...arguments]);
};
};
console.log(test.myApply(obj)()); // 1
console.log(test.myApply()()); // 2
肆(引申)
还被问到了Iterator
和Generator
相关,但阮一峰老师的《EAMCScript6入门》像白看一样,下来需要好好重温一下,学到脑子里的才是自己的!