与其他语言相比,this关键字在JavaScript中的行为略有不同。
JavaScript中,this关键字引用其所属的对象。
根据使用位置,它具有不同的值:
在方法中,this引用所有者对象
单独地,this指的是全局对象
在函数中,this引用全局对象
在函数中,在严格模式下,this是未定义的
在事件中,this指的是接收事件的元素
像call()和apply()这样的方法,可以将其引用到任何对象
方法上下文
在对象方法中,this指代方法的user。
在下面的示例中,当调用user.getName()时,函数内部将this绑定到user对象:
var user = { firstName: "Vishal", lastName : "Choudhary", age : 22, getName : function() { return this.firstName + " " + this.lastName; } }; document.write(user.getName()); // "Vishal Choudhary"测试看看‹/›
这里user对象是所有者getName的方法。
全局上下文
在全局执行上下文中(在任何函数之外),this无论是否处于严格模式下,都引用全局对象。
// 在Web浏览器中,窗口对象也是全局对象: console.log(this === window); // true a = 50; console.log(window.a); // 50 this.b = "NHOOO"; console.log(window.b) // "NHOOO" console.log(b) // "NHOOO"测试看看‹/›
在浏览器窗口中,全局对象是[object Window]。
函数上下文
在函数内部,this值取决于函数的调用方式。
由于以下代码不在严格模式下,this因此默认为全局对象,即浏览器中的[object Window]:
function myFunc() { return this; }测试看看‹/›
在严格模式,然而this的值是undefined:
function myFunc() { "use strict"; return this; }测试看看‹/›
因此,在严格模式下,如果执行上下文未定义它,则它将保持未定义状态。
this在DOM事件处理程序中
当一个函数用作事件处理程序时,this将被设置为触发事件的元素:
let btn = document.querySelector("button"); btn.onclick = function() { this.style.display = "none"; };测试看看‹/›
从内联事件处理程序调用代码时,会将this设置为放置监听器的元素:
<button onclick="this.style.display='none'">点击删除我</button>测试看看‹/›
这是另一个示例:
<button onclick="alert(this)">点击</button>测试看看‹/›
显式函数绑定
call()和apply()方法是预定义的JavaScript方法。
它们都可以用于调用以另一个对象作为参数的对象方法。
function add(c, d) { return this.a + this.b + c + d; } var obj = {a:5, b:10}; add.call(obj, 5, 7); // 27 add.apply(obj, [10, 20]); // 45测试看看‹/›
箭头函数(=>)
在箭头函数(=>)中,this始终指向它被创建时所处的词法作用域中的this。
在全局代码中,它将被设置为全局对象:
var globalObj = this; var myFunc = (() => this); document.write(myFunc() === globalObj); // true测试看看‹/›