JavaScript之this
this是Javascript语言的一个关键字。当函数运行时,会在函数内部自动生成一个this对象。我们先来看一道题。
var button = {
clicked: false,
click: function() {
this.clicked = true;
console.log(button.clicked);
}
};
var btn = document.querySelector('.button');
/* ---------- 我是分割线 ----------- */
// 1.请问如下点击按钮后控制台打印的结果是?this指向?
btn.addEventListener('click', button.click, false);
/* ---------- 我是分割线 ----------- */
// 2.请问如下点击按钮后控制台打印的结果是?this指向?
btn.addEventListener('click', function() {
button.click();
}, false);
第一问的答案是:false 和 btn DOM对象。
第二问的答案是:true 和 button对象。
如果你已经得出了正确答案,这篇内容可以直接略过。
直接调用函数
直接函数调用,函数的this默认指向的是全局Window对象。
function getThis() {
return this;
}
getThis(); // Window
然而在严格模式下,this值不再默认指向Window,而是undefined。
"use strict";
function getThis() {
return this;
}
getThis(); // undefined
作为对象方法调用
当函数被作为对象的方法进行调用时,this值默认指向该对象。
function getThis() {
return this;
}
const foo = {};
foo.getThis = getThis;
foo.getThis(); // Object {getThis: function}
作为构造函数调用
当函数被作为构造函数进行调用时,this值默认指向该实例对象。
function Man(name) {
this.name = name;
console.log(this);
}
let someBody = new Man('John'); // Man {name: "John"}
作为DOM事件函数调用
当函数被作为DOM事件的callback进行调用时,this值默认指向该DOM对象。
button.onclick = function() {
console.log(this); // <button class="button">button</button>
};
绑定this
如果函数通过bind, call, apply 和 箭头函数绑定了this值的话,this则指向为绑定的值。