详解改变this指向的三种方法call apply bind及重写(模拟)
程序员文章站
2022-05-07 21:47:21
...
call方法
- 语法:函数.call([context],[params1],…)
- 函数基于原型链找到Function.prototype.call这个方法,并且把它执行,在call方法执行的时候完成了一些功能
- 首先让当前函数执行
- 把函数中的THIS指向改为第一个传递给CALL的实参
- 把传递给CALL其余的实参,当做参数信息传递给当前函数
- 如果执行CALL一个实参都没有传递,非严格模式下是让函数中的THIS指向WINDOW,严格模式下指向的是UNDEFINED
window.name = 'WINDOW';
let obj = {name: 'OBJ'};
function fn(n,m) {
console.log(this.name);
}
fn(10,20); //=>this:window 严格下是undefined
fn.call(obj); //=>this:obj n/m=undefined
fn.call(obj,10,20); //=>this:obj n=10 m=20
fn.call(10,20); //=>this:10 n=20 m=undefined
fn.call(); //=>this:window 严格下是undefined
fn.call(null); //=>this:window 严格下是null(第一个参数传递的是null/undefined/不传,非严格模式下this指向window,严格模式下传递的是谁this就是谁,不传this是undefined)
还可以基于call让类数组使用数组方法
function sum(){
//=>把ARGUMENTS转换为数组:借用数组原型上的SLICE方法,只要让SLICE中的THIS指向ARGUMENTS,就相当于把ARGUMENTS转换为新数组
//let arg=Array.prototype.slice.call(arguments,0);
let arg=[].slice.call(arguments,0);
//=>数组求和
return eval(arg.join('+'));
}
let total=sum(10,20,30,40); //100
或这样循环元素类数组
[].forEach.call(listArr,(item,index)+>{
console.log(item,index);
})
apply
- apply方法和call方法作用一样,修改函数中的this,并且让这个修改this之后的函数执行;
- 但是传参方式不同;call方法是一个一个的传递实参给sum的,apply是把实参都放到一个数组中,数组项是传递给sum的实参
骚操作 求数组最大值 Math.max 只能传一组数但不能传递数组
let ary = [12,23,13,24,10,25],
n = Math.max.apply(null,ary);
n //25
其中apply第一个参数是谁并不重要,只是想基于它传值的方式传给Math.max
bind
- 作用:预先改变函数中的this,不让函数执行,返回一个修改this后的新函数。
window.name='WIN';
function fn() {
console.log(this.name);
}
var obj = {
name: "OBJ",
fn: () => {
console.log(this.name);
}
};
fn.bind(obj); //不会执行
fn.bind(obj)(); //=>会执行bind OBJ
let shark = fn.bind(obj);
shark(); //=>也会执行 OBJ
obj.fn.bind(obj)(); // 这个结果是WIN
// 因为箭头函数没有this!!!不懂请看前一篇文章
重写(模拟)这些方法
·模拟一个call方法·
~function () {
/*生成随机函数名:时间戳的方式*/
function queryRandomName () {
let time = new Date().getTime();
return '$zhufeng' + time;
}
// 模拟CALL方法改变函数中的THIS
function changeThis(context = window,...arg){
let _this = this,
result = null,
ran = queryRandomName();
context[ran] = _this;
result = context[ran](...arg);
delete context[ran];
return result;
};
Function.prototype.changeThis = changeThis;
}();
·模拟一个apply方法·
~function(){
/*生成随机函数名:时间戳的方式*/
function queryRandomName () {
let time = new Date().getTime();
return '$zhufeng' + time;
}
function changeThis (context = window, arg = []) {
let _this = this,
result = null,
ran = queryRandomName();
context[ran] = _this;
result = context[ran](...arg);
delete context[ran];
return result;
};
Function.prototype.changeThis = changeThis;
}();
·模拟一个bind方法·
~function(){
function changeThis(fn,...ary) {
var that = this;
return function (...arr) {
that.apply(fn,ary.concat(arr));
}
}
Function.prototype.changeThis = changeThis;
}();
最后来道题吧
// 阿里的面试题
function fn1(){console.log(1);}
function fn2(){console.log(2);}
fn1.call(fn2);
fn1.call.call(fn2);
Function.prototype.call(fn1);
Function.prototype.call.call(fn1);
call图解
- 小白扫盲自我修炼,新人定有不足的还请大佬不吝赐教。
- 觉得文章还不错的话就点个赞吧~~
- 友善发言的人运气不会太差哦
- 师承周啸天是也