总结此Javascript：

它的值取决于函数的调用方式，而不是创建位置！通常，该值由点左侧的对象确定。（全球空间中的窗口）在事件侦听器中，this的值引用调用事件的DOM元素。当使用new关键字调用函数时，this的值引用新创建的对象您可以使用以下函数操纵此值：call、apply、bind

例子：

let对象={prop1:function（）｛console.log（this）；｝}object.prop1（）；//对象位于点的左侧，因此这是对象constmyFunction=object.prop1//我们将函数存储在变量myFunction中myFunction（）；//我们在全球空间//myFunction是全局对象的属性//因此，它记录窗口对象

事件侦听器示例：

document.querySelector（'.foo'）.addEventListener（'click'，函数（）{console.log（this）；//这是指调用eventListener的DOM元素})document.querySelector（'.foo'）.addEventListener（'click'，（）=>{console.log（this）；//提示，es6箭头函数没有自己的绑定到此v})//因此，这将记录全局对象.foo：悬停{颜色：红色；光标：指针；}<div class=“foo”>单击我</div>

示例构造函数：

职能人员（姓名）{this.name=名称；}const me=新人（'Willem'）；//当使用new关键字时，构造函数中的this将引用新创建的对象console.log（me.name）；//因此，name属性被放置在使用new关键字创建的对象上。

这是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中意味着什么

关于如何在JavaScript中解释“this”关键字，存在很多困惑。希望这篇文章能让所有这些人一劳永逸。还有更多。请仔细阅读整篇文章。预先警告，这篇文章很长。

无论使用的上下文如何，“this”总是引用Javascript中的“当前对象”。然而，“当前对象”是什么根据上下文而不同。上下文可能正好是以下6项中的1项：

全局（即在所有功能之外）内部直接“非绑定函数”调用（即尚未通过调用functionName.bind绑定的函数）内部间接“非绑定函数”通过functionName.Call和functionName.apply调用在“绑定函数”内部调用（即通过调用functionName.bind绑定的函数）通过“新建”创建对象内联DOM事件处理程序内部

以下逐一介绍了每种情况：

全局上下文（即所有功能外部）：在所有功能之外（即在全局上下文中）对象”（因此“this”的值）始终是浏览器的“窗口”对象。内部直接“非绑定函数”调用：在直接“非绑定函数”调用中调用的函数调用变为“当前对象”（因此“this”的值）。如果在没有显式当前对象的情况下调用函数，则当前对象要么是“窗口”对象（对于非严格模式），要么是未定义的（对于严格模式）。中定义的任何函数（或变量）全局上下文自动成为“窗口”对象的属性。例如，假设函数在全局上下文中定义为函数UserDefinedFunction（）{警报（this）}它成为窗口对象的属性，就像您定义了它作为window.UserDefinedFunction=函数（）{警报（this）} 在“非严格模式”下，直接通过“UserDefinedFunction（）”调用/调用此函数将自动调用/调用它作为“window.UserDefinedFunction（）”，将“window”作为“UserDefinedFunction”中的“当前对象”（以及“this”的值）。在“非严格模式”中调用此函数将导致以下结果UserDefinedFunction（）//显示[object Window]，因为它自动被调用为窗口。UserDefined Function（）在“严格模式”下，通过“UserDefinedFunction（）”将“NOT”自动将其调用为“window.UserDefinedFunctions（）”。因此，“当前对象”（以及“this”的值）“UserDefinedFunction”应未定义。在“严格模式”下调用此函数将导致以下结果UserDefinedFunction（）//显示未定义然而，使用窗口对象显式调用它将导致以下内容window.UserDefinedFunction（）//“无论模式如何，始终显示[object window]。”让我们看看另一个例子。请查看以下代码函数UserDefinedFunction（）{警报（this.a+“，”+this.b+“，“+this.c+”，“+this.d”）}变量o1={a： 1中，b： 2，f： 用户定义函数}无功氧气={c： 3中，d： 4中，f： 用户定义函数}o1.f（）//应显示1,2，未定义，未定义o2.f（）//应显示未定义、未定义、3,4在上面的示例中，我们看到当“UserDefinedFunction”通过o1调用，“this”取值为o1显示其财产“a”和“b”的值。价值“c”和“d”的定义与o1相同没有定义这些财产类似地，当通过o2调用“UserDefinedFunction”时，“this”取o2的值，并显示其财产“c”和“d”的值。“a”和“b”的值显示为未定义，因为o2未定义这些财产。间接“非绑定函数”内部通过functionName.Call和functionName.apply调用：当通过调用“非绑定函数”时functionName.call或functionName.apply，“当前对象”（因此“this”的值）设置为传递给调用/应用的“this”参数（第一个参数）。下面的代码也演示了这一点。函数UserDefinedFunction（）{警报（this.a+“，”+this.b+“，“+this.c+”，“+this.d”）}变量o1={a： 1中，b： 2，f： 用户定义函数}无功氧气={c： 3中，d： 4中，f： 用户定义函数}UserDefinedFunction.call（o1）//应显示1,2，未定义，未定义UserDefinedFunction.apply（o1）//应显示1,2，未定义，未定义UserDefinedFunction.call（o2）//应显示未定义、未定义、3、4UserDefinedFunction.apply（o2）//应显示未定义、未定义、3、4o1.f.call（o2）//应显示未定义、未定义、3、4o1.f.apply（o2）//应显示未定义、未定义、3、4o2.f.call（o1）//应显示1,2，未定义，未定义o2.f.apply（o1）//应显示1,2，未定义，未定义上述代码清楚地表明，任何“NON”的“this”值绑定函数”可以通过调用/应用来更改。此外，如果“this”参数未显式传递给调用/应用，“current object”（因此“this”的值）在非严格模式下设置为“window”，在严格模式下为“undefined”。在“绑定函数”调用（即通过调用functionName.bind绑定的函数）内部：绑定函数是其“this”值为固定的下面的代码演示了“this”在有界函数的函数UserDefinedFunction（）{警报（this.a+“，”+this.b+“，“+this.c+”，“+this.d”）}变量o1={a： 1中，b： 2，f： 用户定义函数，bf:空}无功氧气={c： 3中，d： 4中，f： 用户定义函数，bf:空}var bound1=用户定义函数.bind（o1）；//将函数“bound1”的“this”值永久固定到对象o1bound1（）//应显示1,2，未定义，未定义var bound2=UserDefinedFunction.bind（o2）；//将函数“bound2”的“this”值永久固定到对象o2bound2（）//应显示undefined，undefineed，3,4var边界3=o1.f.bind（o2）；//将函数“bound3”的“this”值永久固定到对象o2bound3（）//应显示undefined，undefineed，3,4var绑定4=o2.f.bind（o1）；//永久地将函数“bound4”的“this”值固定到对象o1bound4（）//应显示1,2，undefined，undefineo1.bf=UserDefinedFunction.bind（o2）//将函数“o1.bf”的“this”值永久固定到对象o2o1.bf（）//应显示未定义、未定义、3,4o2.bf=UserDefinedFunction.bind（o1）//将函数“o2.bf”的“this”值永久固定到对象o1o2.bf（）//应显示1,2，未定义，未定义bound1.call（o2）//仍应显示1,2，undefined，undefine。“call”不能更改绑定函数的“this”值bound1.apply（o2）//仍应显示1,2，undefined，undefine。“apply”不能更改绑定函数的“this”值o2.bf。

以下总结了整篇文章

在全局上下文中，“this”总是指“window”对象每当调用函数时，都会在对象（“当前对象”）。如果未明确提供当前对象，当前对象是NON Strict中的“窗口对象”默认情况下，模式和严格模式中的“未定义”。非绑定函数中“this”的值是对调用该函数的上下文中的对象（“当前对象”）的引用非绑定函数中“this”的值可以由调用和应用函数的方法。“this”的值对于Bound函数是固定的，不能被函数的调用和应用方法覆盖。绑定和已绑定函数不会更改“this”的值。它保持设置为第一个绑定函数设置的值。构造函数中“this”的值是已创建并初始化内联DOM事件处理程序中“this”的值是引用指定事件处理程序的元素。

JavaScript中的this总是指正在执行的函数的“所有者”。

如果未定义显式所有者，则引用最顶层的所有者窗口对象。

所以如果我做了

function someKindOfFunction() {
   this.style = 'foo';
}

element.onclick=someKindOfFunction；

这将引用元素对象。但是要小心，很多人都会犯这个错误。

<element onclick=“someKindOfFunction（）”>

在后一种情况下，您只是引用函数，而不是将其交给元素。因此，这将引用窗口对象。

“这”是关于范围的。每个函数都有自己的作用域，因为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中的“this”这是执行上下文的财产之一。

每次执行函数时都会创建此属性，而不是在此之前。它的价值不是静态的，而是取决于它的使用方式。获取一个指向其所在函数所有者的值习惯于

“this”关键字有不同的使用方式，下面是它的示例（方法、正则函数、箭头函数、事件监听器、显式函数绑定）。

1.方法内部。

this==（对调用方法的对象）。

在上面的示例中，方法“fullName（）”由对象“person”调用，因此方法“fullName（）”中的值将等于对象“person”。

2.函数内部。

i） 函数声明/表达式

在松散模式下，此==窗口（对象）

在严格模式下，this==未定义

注意：使用函数声明或函数表达式方法定义函数时，此属性的工作原理相同。

ii）箭头功能：

箭头函数没有自己的此属性，它们将此属性的值作为其周围的函数。如果周围函数不存在，即如果它们是在全局级别定义的，则此==窗口（对象）

3.事件侦听器this==附加处理程序的对象。单击事件绑定到Document对象

在上面的示例中，由于单击处理程序附加到“document”对象，因此它将等于“document“对象

4.显式函数绑定（调用、应用、绑定）

call（）和apply（）方法是预定义的JavaScript方法。

它们都可以用来调用另一个对象作为参数的对象方法。

在上面的示例中，“printFullDetails（）”中的这一点通过传递作为调用方法的第一个参数显式设置为personObj1和personObj2。

您可以在这里探索有关调用、应用和绑定方法的更多信息。