JavaScript 中的 this 关键字

JavaScript 中最令人困惑的关键字之一是 this 关键字。它是一个特殊的标识符关键字，在每个函数的作用域中自动定义，但它到底指的是什么，即使是经验丰富的 JavaScript 开发人员也会感到困惑。

this 关键字指的是一段代码（例如函数体）应该运行的上下文。最典型的是，它用在对象方法中，其中 this 指的是该方法所附加的对象，从而允许在不同的对象上重用相同的方法。

this 的值可以在函数执行的地方识别，而不是在函数声明的地方

我们将检查不同的规则来识别 javascript 中的 this

默认绑定

我们将应用函数调用最常见情况的默认规则：独立函数执行。当其他规则都不适用时，将此规则视为默认的包罗万象的规则。

在独立函数调用中，该值将是全局对象（在浏览器环境中，它是窗口对象，在节点环境中，它将是全局对象）

function bar() {
    console.log(this) // this will be global object (window)
}
bar()

但是......

这个值可以与代码在严格模式或非严格模式下运行的方式不同

如果当函数作为独立函数调用时，这通常在非严格模式下引用全局对象，在严格模式下引用未定义

"use strict"
function bar() {
    console.log(this) // undefined
}
bar()

微妙但重要的是，只有当 bar() 的内容未在严格模式下运行时，全局对象才有资格进行默认绑定；

function bar() {
    console.log(this) // global object (window)
}
(function() {
    "use strict"
    bar()
})()

隐式绑定

当常规函数作为对象的方法 (obj.method()) 被调用时，this 指向该对象。

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    foo
}
obj.foo() // this here is object owing the function

首先，请注意声明 bar() 以及随后将其作为引用属性添加到 obj 上的方式。无论 foo() 最初是在 obj 上声明，还是稍后添加为引用（如此代码片段所示），在任何一种情况下，该函数都不会真正由 obj 对象“拥有”或“包含”。

隐式丢失：
使用回调时，隐式绑定函数会丢失该绑定，这通常意味着它会回退到全局对象或未定义的默认绑定，具体取决于严格模式。

function bar() {
    setTimeout(function() {
        console.log(this) // this will be global object
    }, 1000);
}
const obj = {
    name: "javascript",
    bar
}
obj.bar() // this will be global object

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    bar
}
const a = obj.bar
a() // this will be global object

显式绑定

使用我们刚刚看到的隐式绑定，我们必须修改相关对象以包含其自身对函数的引用，并使用此属性函数引用来间接（隐式）将 this 绑定到对象。

但是，如果您想强制函数调用使用特定对象进行 this 绑定，而不在该对象上放置属性函数引用，该怎么办？

是的，这是可能的，javascript提供了很多方法，例如.map，.filter数组，我们在函数中只有很少的方法。它们是 apply 、 call 和 bind

这是这些方法的语法
打电话

function bar() {
    console.log(this) // this will be global object (window)
}
bar()

申请

"use strict"
function bar() {
    console.log(this) // undefined
}
bar()

apply 和 call 之间有细微的区别。语法相同，但我们在 apply 方法中将参数作为数组传递

function bar() {
    console.log(this) // global object (window)
}
(function() {
    "use strict"
    bar()
})()

通过 bar.call(..) 显式绑定调用 bar 允许我们强制其 this 为 obj。

新绑定

当一个函数用作构造函数时（使用 new 关键字），它的 this 会绑定到正在构造的新对象，无论构造函数是在哪个对象上访问的。 this 的值将成为 new 表达式的值，除非构造函数返回另一个非原始值。

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    foo
}
obj.foo() // this here is object owing the function

以上是JavaScript 中的 this 关键字的详细内容。更多信息请关注PHP中文网其他相关文章！