改变this指针

[马超]

一、案例

案例 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) 实参写后面