javascript中的每个执行上下文都有一个this参数，该参数由以下参数设置：

如何调用函数（包括作为对象方法、调用和应用的使用、new的使用）绑定的使用箭头函数的词汇（它们采用外部执行上下文的this）代码是严格模式还是非严格模式是否使用eval调用代码

可以使用func.all、func.apply或func.bind设置此值。

默认情况下，当在DOM元素上引发事件后调用监听器时，函数的这个值就是DOM元素，这让大多数初学者感到困惑。

jQuery使用jQuery.proxy进行更改变得很简单。

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在浏览器中，在全局范围内，这是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的一种方法是看到只有一种方法可以调用函数1。它是

functionObject.call(objectForThis, arg0, arg1, arg2, ...);

始终为objectForThis提供一些值。

其他一切都是functionObject.call的语法糖

因此，其他一切都可以通过它如何转换为functionObject.call来描述。

如果你只是调用一个函数，那么这就是“全局对象”，在浏览器中就是窗口

函数foo（）{console.log（此）；}foo（）；//这是窗口对象

换句话说，

foo();

被有效地转化为

foo.call(window);

请注意，如果使用严格模式，则这将是未定义的

“使用严格”；函数foo（）{console.log（此）；}foo（）；//这是窗口对象

这意味着

换句话说，

foo();

被有效地转化为

foo.call(undefined);

在JavaScript中有+、-和*等运算符。还有点运算符。

这个运算符与右侧的函数和左侧的对象一起使用时，实际上意味着“将对象作为this传递给函数”。

实例

常量bar={name:'bar'，foo（）｛console.log（此）；},};bar.foo（）；//这是酒吧

换句话说，bar.foo（）转换为consttemp=bar.foo；临时呼叫（bar）；

注意，函数的创建方式并不重要（主要是…）。所有这些都会产生相同的结果

常量bar={name:'bar'，fn1（）｛console.log（this）；｝，fn2:function（）｛console.log（this）；｝，fn3：其他函数，};函数otherFunction（）｛console.log（this）｝；bar.fn1（）；//这是酒吧bar.fn2（）；//这是酒吧bar.fn3（）；//这是酒吧

同样，这些都只是语法糖

{ const temp = bar.fn1; temp.call(bar); }
{ const temp = bar.fn2; temp.call(bar); }
{ const temp = bar.fn3; temp.call(bar); }

另一个褶皱是原型链。当您使用.b时，JavaScript首先查找属性b的a直接引用的对象。如果在对象上找不到b，则JavaScript将在对象的原型中查找b。

定义对象原型的方法多种多样，2019年最常见的是class关键字。出于这个目的，尽管这并不重要。重要的是，当它在对象a中查找属性b时，如果它在对象上找到属性b，或者在它的原型链中找到属性b（如果b最终是一个函数），那么上述规则同样适用。函数b引用将使用call方法调用，并将a作为objectForThis传递，如该答案顶部所示。

现在让我们想象一下，在调用另一个函数之前，我们创建了一个显式设置此值的函数，然后使用调用它。（点）运算符

函数foo（）{console.log（此）；}函数栏（）{const objectForThis=｛name:“moo”｝foo.call（objectForThis）；//显式传递objectForThis}常量对象={酒吧};obj.bar（）；

在转换为使用调用之后，obj.bar（）变为consttemp=obj.bar；临时调用（obj）；。当我们进入bar函数时，我们调用foo，但我们显式地为objectForThis传递了另一个对象，所以当我们到达foo时，这是内部对象。

这是bind和=>函数有效的作用。它们是语法糖。他们有效地构建了一个新的不可见函数，就像上面的bar一样，它在调用指定的函数之前显式地设置了这个函数。在绑定的情况下，这将设置为传递给绑定的任何值。

函数foo（）{console.log（此）；}const bar=foo.bind（｛name:“moo”｝）；//bind创建了一个新的不可见函数，该函数使用绑定对象调用foo。bar（）；//我们在这里传递给bar的objectForThis被忽略，因为//绑定创建的不可见函数将使用//我们在上面绑定的对象bar.call（｛name:“other”｝）；

注意，如果functionObject.bind不存在，我们可以像这样创建自己的

function bind(fn, objectForThis) {
  return function(...args) {
    return fn.call(objectForthis, ...args);
  };
}

然后我们可以这样称呼它

function foo() {
  console.log(this);
}

const bar = bind(foo, {name:'abc'});

箭头函数，=>运算符是绑定的语法糖

const a = () => {console.log(this)};

与

const tempFn = function() {console.log(this)}; 
const a = tempFn.bind(this);

与bind一样，会创建一个新的不可见函数，该函数使用objectForThis的绑定值调用给定函数，但与bind不同的是，要绑定的对象是隐式的。当使用=>运算符时，这就是发生的情况。

所以，就像上面的规则一样

const a = () => { console.log(this); }  // this is the global object

'use strict';
const a = () => { console.log(this); }  // this is undefined

function foo() {
  return () => { console.log(this); }
}

const obj = {
  foo,
};
const b = obj.foo();
b();

obj.foo（）转换为consttemp=obj.foo；临时调用（obj）；这意味着foo中的箭头运算符将obj绑定到一个新的不可见函数，并返回分配给b.b（）的新的不可视函数。该不可见函数忽略传递给它的this，并将obj作为objectForThis`传递给箭头函数。

上面的代码翻译为

function foo() {
  function tempFn() {
    console.log(this);
  }
  return tempFn.bind(this);
}

const obj = {
  foo,
};
const b = obj.foo();
b.call(window or undefined if strict mode);

1apply是另一个类似于调用的函数

functionName.apply(objectForThis, arrayOfArgs);

但从概念上讲，ES6甚至可以将其转换为

functionName.call(objectForThis, ...arrayOfArgs);

javascript中的每个执行上下文都有一个this参数，该参数由以下参数设置：

如何调用函数（包括作为对象方法、调用和应用的使用、new的使用）绑定的使用箭头函数的词汇（它们采用外部执行上下文的this）代码是严格模式还是非严格模式是否使用eval调用代码

可以使用func.all、func.apply或func.bind设置此值。

默认情况下，当在DOM元素上引发事件后调用监听器时，函数的这个值就是DOM元素，这让大多数初学者感到困惑。

jQuery使用jQuery.proxy进行更改变得很简单。