js中的this

如何区别JavaScript中的this指向

类型一：在函数中直接调用的

• 直接调用的函数this指向window

function greet(text) {
    console.log(text);
}
greet("Hello"); // hello
greet.call(window, "Hello"); // hello

类型二：函数作为对象的方法被调用的

• 谁调用函数，函数的this就指向谁

let person = {
    name: "张三",
    sayHello: function(text) {
        console.log(`${this.name}笑着向你说：${text}`);
    }
}
person.sayHello("Hello"); // 张三笑着向你说：Hello
person.sayHello.call(person, "Hello"); // 张三笑着向你说：Hello

一道面试题

• 打印结果是什么？

var name = 222;
var a = {
    name: 111,
    say: function() {
        console.log(this.name);
    }
}

var fun = a.say;
fun();
a.say();

var b = {
    name: 333,
    say: function(fn){
        fn();
    }
}

b.say(a.say);
b.say = a.say;
b.say();

• 打印结果

// 不要使用let
var name = 222;
var a = {
    name: 111,
    say: function() {
        console.log(this.name);
    }
}

var fun = a.say;
fun(); // 222  -> fun.call(window)
a.say(); // 111 a.say.call(a)

var b = {
    name: 333,
    say: function(fn){
        fn();
    }
}

b.say(a.say); // 222  -> fn.call(window)    此处传参a.say给fn()并执行，等价于  (a.say)()  也就是fn.call(window)
b.say = a.say;
b.say(); // 333  -> b.say.call(b)

箭头函数中的this

• 箭头函数内部没有绑定this机制，即箭头函数没有this，导致箭头函数的this指向外层代码块的this

var x = 11;
var obj = {
    x: 22,
    say: () => {
        console.log(this.x);
    }
}
obj.say(); // 11    -> this指向外层的window

var x = 11;
var obj = {
    x: 22,
    say: function(){
        var x = 33;
        var fn = () => {
            console.log(this.x)
        }
        return fn();
    }
}
obj.say(); // 22    -> this指向外层的obj