如何区别JavaScript中的this指向
类型一:在函数中直接调用的
- 直接调用的函数this指向windowjs
function greet(text) { console.log(text); } greet("Hello"); // hello greet.call(window, "Hello"); // hello
类型二:函数作为对象的方法被调用的
- 谁调用函数,函数的this就指向谁js
let person = { name: "张三", sayHello: function(text) { console.log(`${this.name}笑着向你说:${text}`); } } person.sayHello("Hello"); // 张三笑着向你说:Hello person.sayHello.call(person, "Hello"); // 张三笑着向你说:Hello
一道面试题
- 打印结果是什么?js
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();
- 打印结果js
// 不要使用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指向外层代码块的thisjs
var x = 11; var obj = { x: 22, say: () => { console.log(this.x); } } obj.say(); // 11 -> this指向外层的window
jsvar x = 11; var obj = { x: 22, say: function(){ var x = 33; var fn = () => { console.log(this.x) } return fn(); } } obj.say(); // 22 -> this指向外层的obj