62

我的问题是：

function Foo()
{
   this.foo = "bar"; // <- What is "this" here?
}

据我所知，它取决于如何Foo使用，即作为构造函数或函数。this在不同的情况下会是什么？

4

6 回答 6

72

this关键字是指函数所属的对象，window如果函数不属于任何对象，则表示对象。

它用于 OOP 代码中，用于引用函数所属的类/对象例如：

function foo() {
    this.value = 'Hello, world';

    this.bar = function() {
        alert(this.value);
    }
}

var inst = new foo();
inst.bar();

这提醒：Hello, world

this您可以使用apply()orcall()函数来操作引用哪个对象。（有时非常方便的功能） 

var bar1 = new function() {
    this.value = '#1';
}
var bar2 = new function() {
    this.value = '#2';
}

function foo() {
    alert(this.value);
}

foo.call(bar1); // Output: #1
foo.apply(bar2, []); // Output: #2
于 2009-12-26T13:22:56.573 回答
28

阅读 Douglas Crockford 对此事的看法，引用他的A Survey of the JavaScript Programming Language 的话：

函数是一个对象。它可以像其他对象一样包含成员。这允许一个函数包含它自己的数据表。它还允许一个对象充当一个类，包含一个构造函数和一组相关的方法。

函数可以是对象的成员。当函数是对象的成员时，它被称为方法。有一个特殊的变量，称为 this，当调用对象的方法时，它被设置为对象。

例如，在表达式 foo.bar() 中，this 变量被设置为对象 foo，作为函数 bar 的一种额外参数。然后功能栏可以参考 this 来访问感兴趣的对象。

在像 do.re.mi.fa() 这样更深层次的表达式中，this 变量被设置为对象 do.re.mi，而不是对象 do。在一个简单的函数调用中，这被设置为全局对象（又名窗口），这不是很有用。正确的行为应该是保留 this 的当前值，尤其是在调用内部函数时。

'this' 也可以根据你的函数被调用的方式改变，阅读apply function和call function。

我建议您花时间在他的（免费）演示文稿中学习 JavaScript 最伟大的思想之一，从这里链接。

于 2009-12-26T13:31:00.900 回答
10

在 JavaScript 中，约定（这只是约定）是任何以大写字母开头的函数都将用作构造函数。然后，有人会打电话

var foo = new Foo()并将this引用即将被 . 引用的新创建的对象foo。

当然，没有什么能阻止你Foo()自己调用，在这种情况下，它this会引用调用函数的对象。为避免混淆，不建议这样做。

于 2009-12-26T13:36:39.950 回答
7

这取决于该函数的使用方式，我们可以使用两种基本类型的函数

  1. 功能
  2. 函数作为对象，使用 new 关键字

会一一看到

1.功能

var example = function () {
  console.log(this);
};

example();

Output : window

这里'this'关键字指向窗口对象。

默认情况下，这应该始终是窗口对象，它指的是根 - 全局范围。所以当我们 console.log(this); 从我们的函数中，因为它被窗口调用（只是刚刚调用），我们应该期望 this 值是我们的窗口对象：

2.作为对象的功能

var example = function () {
  console.log(this);
};

var obj = new example();

Output : example {}

这里的“this”关键字指向新创建的示例对象。

于 2018-06-11T08:14:57.603 回答
1

在 JavaScript 中，一切都是对象，甚至是函数。当你this.foo在下面的代码中说

function Foo()
{
   this.foo = "bar"; // <- What is "this" here?
}

foo成为Foo对象的成员变量

于 2009-12-26T13:24:14.530 回答
1

在 NodeJS 中有一些有趣的行为：

function foo() {
    this.name = 'bar' // <- What is "this" here?
}

foo() // <- TypeError: Cannot set property 'name' of undefined

但是使用箭头函数：

const bar = () => {
    this.name = 'foo'
    console.log(this)
}

bar() // <- { name: 'foo' }

我一直认为传统的函数文字有自己的上下文，但没有箭头函数，这似乎与我的理解相矛盾。

鉴于这种行为，OP 的代码将无法正常工作......

于 2019-11-29T13:22:37.580 回答