改变this指针
machao07 opened this issue · comments
一、案例
案例 1 obj.a ( ) 输出 this 与 f ( ) 输出 this
function fn() {
console.log(this);
}
let obj = {
a: fn, // 函数的地址
};
let f = obj.a; // 函数的地址赋值给f,f保存的是函数的地址,和object没有关系
obj.a(); // this指向obj
f(); // this指向window
案例 2 面试题 关于 argument 的指向
function fn() {
console.log(this);
}
let obj = {
a: fn, // 函数的地址
};
function fn1(e) {
e(); // 指向window,等同于e = obj.a,类似于上面的 f = obj.a
arguments[0](); // 指向arguments,获取arguments的第一个参数并执行
}
fn1(obj.a); // window arguments
二、this 指向
this指向调用函数地址的对象,并且谁近指谁 / 也就是事件源
let arr = [1, 2];
function fn() {
console.log(this);
}
document.onclick = fn; //点击指向document
let obj = {
name: "zhuque",
fn: function () {
console.log(this);
},
dudu: {
name: "dd",
fn: function () {
let num = 10;
console.log(this);
},
},
};
obj.fn(); //this =>obj这个对象
obj.dudu.fn(); //this => dudu这个对象
三、改变 this 指向方法
三种方式
call apply bind
前两种会主动执行 后一种不会主动执行
1、call
- 改变函数的 this 指向,还会马上执行函数
- 第一个参数是你想改变的 this 指向的对象
- 后面的其它参数就是该函数的实参
let obj = {
name: "queque"
fn : function(a, b){
console.log(this, a, b)
}
}
let obj1 = {
name: "zhuzhu"
}
obj.fn() //this指向 obj undefined undefined
obj.fn.call(obj1,1,2) //指向obj1
2、apply
- 改变函数的 this 指向,还会马上执行函数
- 第一个参数是你想改变的 this 指向的对象
- 后面的其它参数就是该函数的实参 必须是数组 实参用数组包裹
let obj = {
name: "queque"
fn : function(a, b){
console.log(this, a, b)
}
}
let obj1 = {
name: "zhuzhu"
}
obj.fn.apply(obj1,[1,2]) //指向obj1
3、bind
- 改变函数的 this 指向, 不会马上执行函数
- 第一个参数是你想改变的 this 指向的对象
- 后面的其它参数就是该函数的实参
let obj = {
name: "queque",
fn: function (a, b) {
console.log(this, a, b);
},
};
let obj1 = {
name: "zhuzhu",
};
obj.fn.bind(obj1, 1, 2)(); // 指向obj1 主动执行需要加括号
// 也可以 obj.fn.bind(obj1)(1,2) 实参写后面