我希望找到一个“this”关键字的明确解释，以及如何正确使用它。
它的行为似乎很奇怪，我不完全明白为什么。
这是如何工作的，何时使用？
当前回答
“this”的值取决于执行函数的“上下文”。上下文可以是任何对象或全局对象，即窗口。
因此，“this”的语义不同于传统的OOP语言。这会导致问题：1.当一个函数传递给另一个变量时（很可能是回调）；和2。当从类的成员方法调用闭包时。
在这两种情况下，这都设置为window。
其他回答
关于此关键字的一些信息
让我们将此关键字记录到全局范围内的控制台中，无需任何代码
console.log(this)
在客户端/浏览器中，此关键字是一个全局对象，它是窗口
console.log(this === window) // true
and
在Server/Node/Javascript运行时中，此关键字也是一个全局对象，即module.exports
console.log(this === module.exports) // true
console.log(this === exports) // true
请记住，导出只是对module.exports的引用
这里有一个很好的JavaScript源代码。
以下是总结：
全局this在浏览器中，在全局范围内，这是windowobject<script type=“text/javascript”>console.log（此==窗口）；//真的var foo=“bar”；console.log（this.foo）；//“条形图”console.log（window.foo）；//“条形图”在使用repl的节点中，这是顶级命名空间。您可以将其称为全局。>这个{ArrayBuffer:[Function:ArrayBuffer]，Int8Array:{[Function:Int8Array]BYTES_PER_ELEMENT:1}，Uint8Array：{[Function:Uint8Array]BYTES_PER_ELEMENT:1}，...>全局==此真的在从脚本执行的节点中，全局范围中的这个对象以空对象开始。它与全球不同\\测试.jsconsole.log（此）；\\{}console.log（this==全局）；\\时尚函数this
除了在DOM事件处理程序的情况下，或者当提供了thisArg时（请参见下文），在节点和浏览器中都会在不使用新引用调用全局范围的函数中使用此函数…
<script type="text/javascript">
foo = "bar";
function testThis() {
this.foo = "foo";
}
console.log(this.foo); //logs "bar"
testThis();
console.log(this.foo); //logs "foo"
</script>
如果使用use strict；，在这种情况下，这将是未定义的
<script type="text/javascript">
foo = "bar";
function testThis() {
"use strict";
this.foo = "foo";
}
console.log(this.foo); //logs "bar"
testThis(); //Uncaught TypeError: Cannot set property 'foo' of undefined
</script>
若使用new调用函数，这将是一个新上下文，它将不会引用全局this。
<script type="text/javascript">
foo = "bar";
function testThis() {
this.foo = "foo";
}
console.log(this.foo); //logs "bar"
new testThis();
console.log(this.foo); //logs "bar"
console.log(new testThis().foo); //logs "foo"
</script>
原型
您创建的函数将成为函数对象。它们会自动获得一个特殊的原型属性，这是您可以为其赋值的属性。当您使用new调用函数来创建实例时，您可以访问分配给原型属性的值。您可以使用此访问这些值。
function Thing() {
console.log(this.foo);
}
Thing.prototype.foo = "bar";
var thing = new Thing(); //logs "bar"
console.log(thing.foo); //logs "bar"
在原型上分配数组或对象通常是错误的。如果希望每个实例都有自己的数组，请在函数中创建它们，而不是在原型中创建它们。
function Thing() {
this.things = [];
}
var thing1 = new Thing();
var thing2 = new Thing();
thing1.things.push("foo");
console.log(thing1.things); //logs ["foo"]
console.log(thing2.things); //logs []
反对这个
您可以在对象的任何函数中使用它来引用该对象的其他财产。这与使用new创建的实例不同。
var obj = {
foo: "bar",
logFoo: function () {
console.log(this.foo);
}
};
obj.logFoo(); //logs "bar"
DOM事件this
在HTML DOM事件处理程序中，这始终是对事件附加到的DOM元素的引用
function Listener() {
document.getElementById("foo").addEventListener("click",
this.handleClick);
}
Listener.prototype.handleClick = function (event) {
console.log(this); //logs "<div id="foo"></div>"
}
var listener = new Listener();
document.getElementById("foo").click();
除非您绑定上下文
function Listener() {
document.getElementById("foo").addEventListener("click",
this.handleClick.bind(this));
}
Listener.prototype.handleClick = function (event) {
console.log(this); //logs Listener {handleClick: function}
}
var listener = new Listener();
document.getElementById("foo").click();
HTML此
在可以放入JavaScript的HTML属性中，这是对元素的引用。
<div id="foo" onclick="console.log(this);"></div>
<script type="text/javascript">
document.getElementById("foo").click(); //logs <div id="foo"...
</script>
评估此
您可以使用eval访问此。
function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
eval("console.log(this.foo)"); //logs "bar"
}
var thing = new Thing();
thing.logFoo();
用这个
您可以使用with将其添加到当前范围中，以读取和写入其值，而无需显式引用它。
function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
with (this) {
console.log(foo);
foo = "foo";
}
}
var thing = new Thing();
thing.logFoo(); // logs "bar"
console.log(thing.foo); // logs "foo"
jQuery this
jQuery在很多地方都会引用DOM元素。
<div class="foo bar1"></div>
<div class="foo bar2"></div>
<script type="text/javascript">
$(".foo").each(function () {
console.log(this); //logs <div class="foo...
});
$(".foo").on("click", function () {
console.log(this); //logs <div class="foo...
});
$(".foo").each(function () {
this.click();
});
</script>
这是JavaScript中一个被误解的概念，因为它在不同地方的行为几乎不同。简单地说，这是指我们当前正在执行的函数的“所有者”。
这有助于获取我们使用的当前对象（也称为执行上下文）。如果您了解当前函数在哪个对象中执行，那么您可以很容易地了解这是什么当前函数
var val = "window.val"
var obj = {
val: "obj.val",
innerMethod: function () {
var val = "obj.val.inner",
func = function () {
var self = this;
return self.val;
};
return func;
},
outerMethod: function(){
return this.val;
}
};
//This actually gets executed inside window object
console.log(obj.innerMethod()()); //returns window.val
//Breakdown in to 2 lines explains this in detail
var _inn = obj.innerMethod();
console.log(_inn()); //returns window.val
console.log(obj.outerMethod()); //returns obj.val
上面我们创建了3个同名“val”的变量。一个在全局上下文中，一个在obj内部，另一个在obj的innerMethod内部。JavaScript通过从本地到全局的作用域链来解析特定上下文中的标识符。
很少有地方可以区分这一点
调用对象的方法
var status = 1;
var helper = {
status : 2,
getStatus: function () {
return this.status;
}
};
var theStatus1 = helper.getStatus(); //line1
console.log(theStatus1); //2
var theStatus2 = helper.getStatus;
console.log(theStatus2()); //1
当执行第1行时，JavaScript为函数调用建立一个执行上下文（EC），将其设置为最后一个“.”之前引用的对象。因此在最后一行中，您可以理解a（）是在全局上下文（即窗口）中执行的。
使用构造函数
这可用于引用正在创建的对象
function Person(name){
this.personName = name;
this.sayHello = function(){
return "Hello " + this.personName;
}
}
var person1 = new Person('Scott');
console.log(person1.sayHello()); //Hello Scott
var person2 = new Person('Hugh');
var sayHelloP2 = person2.sayHello;
console.log(sayHelloP2()); //Hello undefined
当执行new Person（）时，将创建一个全新的对象。调用Person，并将其this设置为引用该新对象。
函数调用
function testFunc() {
this.name = "Name";
this.myCustomAttribute = "Custom Attribute";
return this;
}
var whatIsThis = testFunc();
console.log(whatIsThis); //window
var whatIsThis2 = new testFunc();
console.log(whatIsThis2); //testFunc() / object
console.log(window.myCustomAttribute); //Custom Attribute
如果我们错过了新的关键字，whatIsThis指的是它能找到的最全局的上下文（window）
使用事件处理程序
如果事件处理程序是内联的，则它引用全局对象
<script type="application/javascript">
function click_handler() {
alert(this); // alerts the window object
}
</script>
<button id='thebutton' onclick='click_handler()'>Click me!</button>
通过JavaScript添加事件处理程序时，这是指生成事件的DOM元素。
您还可以使用.apply（）.call（）和.bind（）操作上下文JQuery代理是另一种方法，您可以使用它来确保函数中的值符合您的要求。（检查了解$.proxy（）、jQuery.proxy）用法）var that=this在JavaScript中意味着什么
“这”是关于范围的。每个函数都有自己的作用域，因为JS中的所有内容都是一个对象，所以即使是一个函数也可以使用“this”将一些值存储到自身中。OOP 101教导“这”仅适用于对象的实例。因此，每次函数执行时，该函数的新“实例”都具有“this”的新含义。
大多数人在尝试在匿名闭包函数中使用“this”时会感到困惑，例如：
(function(value) {
this.value = value;
$('.some-elements').each(function(elt){
elt.innerHTML = this.value; // uh oh!! possibly undefined
});
})(2);
所以这里，在each（）内部，“this”不包含您期望的“value”（从this.value=value；在其上方）。因此，为了克服这个（并非双关语）问题，开发人员可以：
(function(value) {
var self = this; // small change
self.value = value;
$('.some-elements').each(function(elt){
elt.innerHTML = self.value; // phew!! == 2
});
})(2);
试试看；你会开始喜欢这种编程模式
要正确理解“这”，就必须理解上下文和范围以及它们之间的区别。
作用域：在javascript中，作用域与变量的可见性有关，作用域通过使用函数实现。（阅读有关范围的更多信息）
上下文：上下文与对象相关。它指函数所属的对象。当您使用JavaScript“this”关键字时，它指的是函数所属的对象。例如，在函数内部，当你说：“this.accoutNumber”时，你指的是属性“accoutNumber”，该属性属于该函数所属的对象。
如果对象“myObj”有一个名为“getMyName”的方法，当JavaScript关键字“this”在“getMyName”中使用时，它将引用“myObj”。如果函数“getMyName”是在全局范围内执行的，那么“this”是指窗口对象（严格模式除外）。
现在让我们看看一些示例：
<script>
console.log('What is this: '+this);
console.log(this);
</script>
在浏览器输出中运行abobve代码将：
根据窗口对象上下文中的输出，也可以看到窗口原型引用了对象。
现在让我们尝试函数内部：
<script>
function myFunc(){
console.log('What is this: '+this);
console.log(this);
}
myFunc();
</script>
输出：
输出是相同的，因为我们将“this”变量记录在全局范围中，并将其记录在函数范围中，我们没有更改上下文。在这两种情况下，上下文都是相同的，与寡妇对象相关。
现在让我们创建自己的对象。在javascript中，可以通过多种方式创建对象。
<script>
var firstName = "Nora";
var lastName = "Zaman";
var myObj = {
firstName:"Lord",
lastName:'Baron',
printNameGetContext:function(){
console.log(firstName + " "+lastName);
console.log(this.firstName +" "+this.lastName);
return this;
}
}
var context = myObj.printNameGetContext();
console.log(context);
</script>
输出：
因此，从上面的示例中，我们发现“this”关键字引用的是与myObj相关的新上下文，而myObject也具有到Object的原型链。
让我们再举一个例子：
<body>
<button class="btn">Click Me</button>
<script>
function printMe(){
//Terminal2: this function declared inside window context so this function belongs to the window object.
console.log(this);
}
document.querySelector('.btn').addEventListener('click', function(){
//Terminal1: button context, this callback function belongs to DOM element
console.log(this);
printMe();
})
</script>
</body>
输出：有道理吧？（阅读评论）
如果您无法理解上面的示例，让我们尝试使用自己的回调；
<script>
var myObj = {
firstName:"Lord",
lastName:'Baron',
printName:function(callback1, callback2){
//Attaching callback1 with this myObj context
this.callback1 = callback1;
this.callback1(this.firstName +" "+this.lastName)
//We did not attached callback2 with myObj so, it's reamin with window context by default
callback2();
/*
//test bellow codes
this.callback2 = callback2;
this.callback2();
*/
}
}
var callback2 = function (){
console.log(this);
}
myObj.printName(function(data){
console.log(data);
console.log(this);
}, callback2);
</script>
输出：
现在，让我们了解范围、自我、IIFE和THIS的行为
var color = 'red'; // property of window
var obj = {
color:'blue', // property of window
printColor: function(){ // property of obj, attached with obj
var self = this;
console.log('In printColor -- this.color: '+this.color);
console.log('In printColor -- self.color: '+self.color);
(function(){ // decleard inside of printColor but not property of object, it will executed on window context.
console.log(this)
console.log('In IIFE -- this.color: '+this.color);
console.log('In IIFE -- self.color: '+self.color);
})();
function nestedFunc(){// decleard inside of printColor but not property of object, it will executed on window context.
console.log('nested fun -- this.color: '+this.color);
console.log('nested fun -- self.color: '+self.color);
}
nestedFunc(); // executed on window context
return nestedFunc;
}
};
obj.printColor()(); // returned function executed on window context
</script>
输出非常棒，对吧？
