Question

我正在学习JavaScript中“ this”的值是如何绑定的。在下面的示例中，说“ this”绑定到getFriends（）方法而不是“ details”对象是正确的，这就是this.name =“”而不是this.name =“ Joe”的原因吗？ / p>

const details = {
    name: 'Joe',
    friends: [ 'Bob', 'Alex' ],
    getFriends: function() {
        this.friends.forEach( function( friend ) {
            console.log( this.name + " is friends with " + friend );
        } );
    }
};

details.getFriends();

// Output:
// is friends with Bob
// is friends with Alex

从我的研究中可以了解到，“ this”在父级范围内没有约束一个级别，对吗？这是使用箭头功能的一个好处，该功能将“ this”绑定到父作用域。

Answer 1

否，当您以这种方式运行代码.globe-img { background-image: url('../images/globe.png'); height: 50px; width: 50px; &:hover { background-image: url('../images/globe-hv.png'); } }指向全局窗口对象时。您可以this的值console.log。要对其进行测试，还可以在窗口上放置一个this键（不要使用名称，因为该名称由窗口使用）。现在，当您运行代码时，您将看到全局代码：

my_name

仅供参考：const details = { my_name: 'Joe', friends: [ 'Bob', 'Alex' ], getFriends: function() { this.friends.forEach( function( friend ) { console.log( this.my_name + " is friends with " + friend ); } ); } }; window.my_name = "What?" details.getFriends();使用第二个值，您可以使用该值指定回调中的forEach。因此，例如：

this

当然，您也可以始终使用箭头功能。

Answer 2

从w3schools报价

In a method, this refers to the owner object. Alone, this refers to the global object. In a function, this refers to the global object. In a function, in strict mode, this is undefined. In an event, this refers to the element that received the event. Methods like call(), and apply() can refer this to any object.

https://www.w3schools.com/js/js_this.asp

Answer 3

关键字this指向当前执行上下文。

默认情况下，函数中的this设置为全局上下文，该上下文始终是浏览器中的窗口对象：

function foo() {
  return this;
}

console.assert(foo() === window);

然而，new运算符作为构造函数调用时，会将this设置为从函数原型创建的对象。该上下文对于每个实例都是唯一的。

function foo() {
  return this;
}

console.assert(new foo() !== window);
console.assert(new foo() !== new foo());

当对象具有方法时，该方法中的this默认为该对象：

const question = {
  ask: function () {
    return this;
  }
};

console.assert(question.ask() === question);

现在，这就是当前执行上下文很重要的原因。

如果将该方法带到其对象之外，则该方法上下文将默认为全局上下文：

const question = {
  ask: function () {
    return this;
  }
};

const ask = question.ask;

console.assert(ask() === window);

要解决该问题，您可以使用bind，call或apply：

const question = {
  ask: function () {
    return this;
  }
};

const ask = question.ask;

console.assert(ask.bind(question)() === question);
console.assert(ask.call(question) === question);
console.assert(ask.apply(question) === question);

您一定已经听说过箭头功能，这些功能将this绑定到定义该功能时可用的上下文。

以前，我们必须将this保存在变量（通常称为that）中，以引用正确的上下文。（或使用bind。）

function foo() {
  const that = this;
  // By the time the function executes, the execution context
  // will be different even though we invoked the function
  // as a constructor.
  setTimeout(function () {
    console.assert(that !== this);
    console.assert(this === window);
  }, 100);
}

new foo();

该技术已被箭头功能弃用：

function foo() {
  setTimeout(() => {
    console.assert(this !== window);
  }, 100);
}

new foo();

但是请记住，函数是按词法作用域定义的，因此，不会会给您预期的结果：

const question = {
  ask: () => {
    return this;
  }
};

console.assert(question.ask() === window);

为什么？在定义箭头功能时，词汇范围中唯一可用的上下文是全局上下文。

“ this”的绑定

3 个答案: