判断this指向
对于普通的function函数来说,this的行为与动态作用域很相似,而箭头函数的this的行为则更像词法作用域。所谓动态作用域,简单来讲就是在运行时才能够确定的作用域,与之相对的是词法作用域,就是在书写代码的阶段确定的作用域。
由于this是在函数被调用时才能判断其指向的,因此this指向的判断一直是令很多新手头疼的点。其实判断this指向并不难,只要遵循以下步骤即可(优先级由高到低):
是否由new调用,若有则指向新创建的对象本身
有无call、apply、bind的显式绑定,若有则指向指定的对象
隐式调用,指向调用函数的那个上下文对象
以上皆无,在非严格模式下绑定到全局对象(window或global),严格模式下绑定到undefined
手动实现call()
call()和bind()都是改变函数this指向的方法,不同之处在与call()是立即调用而bind()是返回一个函数的副本
思路:对于
o1.hi.myCall(o2)
将o1中的hi()添加到o2中,再调用o2刚刚添加的hi(),此时已经得到了结果,接着删除o2的hi(),返回结果即可。
Function.prototype.myCall = function (context, ...args) {
let temp = Symbol('call');
context = context || window;
context[temp] = this;
let result = context[temp](...args);
delete context[temp];
return result;
}
测试一下结果
let o1 = {
a: 11,
hi(b, c) {
console.log(this.a, b, c);
}
};
let o2 = {
a: 22
};
//test
let foo = o1.hi.myBind(o2, 8, 9);
foo();//22 8 9
手动实现bind()
由于上面已经实现了call(),直接调用即可
Function.prototype.myBind = function (context, ...args) {
if (typeof this !== 'function') {
throw new TypeError('myBind callback is not a function');
}
return () => {
return this.myCall(context, ...args);
}
}
测试一下结果
//test
let foo = o1.hi.myBind(o2, 8, 9);
foo();//22 8 9