总结此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中意味着什么

“this”的值取决于执行函数的“上下文”。上下文可以是任何对象或全局对象，即窗口。

因此，“this”的语义不同于传统的OOP语言。这会导致问题：1.当一个函数传递给另一个变量时（很可能是回调）；和2。当从类的成员方法调用闭包时。

在这两种情况下，这都设置为window。

“这”是关于范围的。每个函数都有自己的作用域，因为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);

试试看；你会开始喜欢这种编程模式

由于这篇文章的篇幅有所增加，我为读者整理了一些新的观点。

这个值是如何确定的？

我们使用这个词的方式与我们在英语等自然语言中使用代词的方式类似：“约翰跑得很快，因为他正在赶火车。”相反，我们可以写“……约翰正在赶火车”。

var person = {    
    firstName: "Penelope",
    lastName: "Barrymore",
    fullName: function () {

    // We use "this" just as in the sentence above:
       console.log(this.firstName + " " + this.lastName);

    // We could have also written:
       console.log(person.firstName + " " + person.lastName);
    }
}

在对象调用定义它的函数之前，不会为其赋值。在全局范围中，所有全局变量和函数都在窗口对象上定义。因此，这在全局函数中引用（并且具有的值）全局窗口对象。

当使用strict时，在未绑定到任何对象的全局函数和匿名函数中，它的值为undefined。

this关键字在以下情况下最容易被误解：1）我们借用了一个使用this的方法，2）我们将一个使用它的方法分配给一个变量，3）使用this的函数作为回调函数传递，4）这在闭包内部使用-一个内部函数。(2)

未来是什么

在ECMA脚本6中定义，箭头函数采用来自封闭（函数或全局）范围。

function foo() {
     // return an arrow function
     return (a) => {
     // `this` here is lexically inherited from `foo()`
     console.log(this.a);
  };
}
var obj1 = { a: 2 };
var obj2 = { a: 3 };

var bar = foo.call(obj1);
bar.call( obj2 ); // 2, not 3!

虽然箭头函数提供了使用bind（）的替代方法，但需要注意的是，它们实际上是在禁用传统的this机制，以支持更广泛理解的词汇范围。(1)

参考文献：

凯尔·辛普森（Kyle Simpson）的《this&Object Prototypes》。©2014 Getify解决方案。javascriptissxy.com-http://goo.gl/pvl0GX 安格斯·克罗尔http://goo.gl/Z2RacU

丹尼尔，太棒了！在事件处理程序的情况下，这里有几个单词，以及这个执行上下文指针的良好列表。

换句话说，JavaScript中的这一点指向运行当前函数的对象（或其执行上下文），并且它始终是只读的，无论如何都不能设置它（这样的尝试将以“赋值中的左侧无效”消息结束）。

对于事件处理程序：内联事件处理程序，例如<elementonclick=“foo”>，会覆盖之前附加的任何其他处理程序，因此要小心，最好不要进行内联事件委派。感谢Zara Alaverdyan，他通过一场不同意见的辩论激发了我的灵感：）

el.onclick=foo；//在foo-obj中el.onclick=函数（）｛this.style.color=“#fff”；｝//objel.onclick=function（）｛doSomething（）；｝//在doSometing中-窗el.addEventListener（'click'，foo，false）//在foo-obj中el.attachEvent（'包含，函数（）｛//this｝'）//窗口，所有符合IE：）<button onclick=“this.style.color='#fff'；”>//obj<button onclick=“foo”>//在foo窗口中，但您可以<buttononclick=“foo（this）”>