仍然对JavaScript中的“this”关键字感到困惑


Still confused about “this” keyword in JavaScript

本问题已经有最佳答案，请猛点这里访问。
1
2
3
4
5
6
7
8
9
10
var zee5 ="Variable Outside";

function magical( ) {
    this.zee5 ="Variable Inside";
    alert( this.zee5 );
}

magical();

alert(zee5);

在第二个"警报"中，我期待看到"外部变量"但事实并非如此。 我仍然有"变量内部"这意味着

1
this.zee5 ="Variable Inside";

访问并修改了在脚本顶部创建的zee5变量。 我以为this.zee5会将zee5绑定到名为magical的函数。

相关讨论

在上面的例子中，"this"关键字仍然引用外部上下文，因此如果您在根范围执行上述代码，则This指向窗口。所以你实际上只是在窗口上设置一个名为"zee5"的属性。

您可以在代码中的任何位置使用console.log(this)来查看它指向的内容。

如果要将属性绑定到函数，可以执行类似下面的操作，并将函数分配给变量，而不是使用函数声明。

例如。如果您将代码更改为以下代码，它可能会按您的意思工作：

1
2
3
4
5
6
7
8
9
10
11
12
13
var zee5 ="Variable Outside";

var magical = function(){
alert( this.zee5 );
}
// sets property zee5 on the variable magical
magical.zee5 ="Variable Inside";
// will alert the property set on magical
alert(magical.zee5)
// when the below executes,"this" still refers to window
magical();
// implicitly calling window.zee5, if done from root context
alert( zee5 );

但我认为你可能会做的是混淆js中新对象的声明方式。例如，如果您执行以下操作，更改方法以将函数声明用作构造函数，那么上下文将更改为您刚刚声明的对象，并且您还将得到您期望的内容：

1
2
3
4
5
6
7
8
9
10
11
12
var zee5 ="Variable Outside";

function magical( )
{
this.zee5 ="Variable Inside";
alert( this.zee5 );
}
// will create an object of type magical
// this refers to the new object inside the constructor function
var mag = new magical();

alert( zee5 );

This在"this"关键字如何工作？特别是，请参阅此答案顶部的f1示例。

总结相关答案的直接相关部分：

1
2
function f() { return this; }
f() === window // -> true

现在，关于"变量范围"的问题是对这些答案的补充，但它可以概括为：全局上下文中的变量是全局对象的属性。

1
2
3
var x ="hello";
window.x ="world";
x // ->"world"

所以上下文中的this.zee5 = ..与window.zee5 = ..相同，并且在它上面覆盖全局变量/ property。

要写入名为magical的函数对象的属性，只需使用

1
2
3
4
5
6
7
8
var zee5 ="hi"
function magical()
{
   magical.zee5 ="hello"
}
magical()
zee5          // ->"hi"
magical.zee5  // ->"hello"

人们当然可以"偷偷摸摸"，以便This在函数调用中绑定到魔法，例如magical.apply(magical)或magical = magical.bind(magical)，但我离题了......