Javascript 这个内部函数

this inside function

提问by Frank T. Icali

My question is:

我的问题是：

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

From what I can tell it depends on how Foois used, i.e. as a constructor or as a function. What can thisbe in different circumstances?

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

回答by Atli

The thiskeyword refers to the object the function belongs to, or the windowobject if the function belongs to no object.

的this关键字是指功能所属的对象，或window对象如果函数不属于任何对象。

It's used in OOP code, to refer to the class/object the function belongs to For example:

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

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

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

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

This alerts: Hello, world

这提醒： Hello, world

You can manipulate which object thisrefers to by using the apply()or call()functions. (A very very handy feature at times)

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

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

回答by Zoran Regvart

Read what Douglas Crockford has to say on the matter, to quote him from A Survey of the JavaScript Programming Language:

阅读道格拉斯·克罗克福德 (Douglas Crockford) 对此事的看法，引用他从《JavaScript 编程语言调查》中的话：

A function is an object. It can contain members just as other objects. This allows a function to contain its own data tables. It also allows an object to act as a class, containing a constructor and a set of related methods.

A function can be a member of an object. When a function is a member of an object, it is called a method. There is a special variable, called this that is set to the object when a method of the object is called.

For example, in the expression foo.bar(), the this variable is set to the object foo as a sort of extra argument for the function bar. The function bar can then refer to this to access the object of interest.

In a deeper expression like do.re.mi.fa(), the this variable is set to the object do.re.mi, not to the object do. In a simple function call, this is set to the Global Object (aka window), which is not very useful. The correct behavior should have been to preserve the current value of this, particularly when calling inner functions.

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

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

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

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

Also 'this' can change depending on how your function is invoked, read on apply functionand call function.

此外，“this”可以根据您的函数的调用方式而变化，阅读apply function和call function。

I would recommend that you spend time learning form one of JavaScript's greatest minds in his (free) presentations, linked from here.

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

回答by danben

In JavaScript, the convention (and this is only a convention) is that any function that begins with a capital letter is to be used as a constructor. Then, one would call

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

var foo = new Foo()and thiswould refer to the newly created object that is about to be referenced by foo.

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

Of course, there is nothing stopping you from calling Foo()on its own, in which case thiswould then refer to the object from which the function was called. To avoid confusion, that is not recommended.

当然，没有什么可以阻止您Foo()自行调用，在这种情况下，this将引用调用函数的对象。为避免混淆，不建议这样做。

回答by dhaker

Its depends on how that function is used, there are two basic types in which we can use functions

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

1. Function
2. Function as an Object, by using new keyword

1. 功能
2. 用作对象，通过使用 new 关键字

will see one by one

会一一看到

1.Function

1.功能

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

example();

Output : window

Here 'this' keyword points to window object.

这里的'this'关键字指向window对象。

By default, this should always be the window Object, which refers to the root - the global scope. So when we console.log(this); from our function, as it's invoked by the window (simply just called), we should expect the this value to be our window Object:

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

2.Function as an Object

2.函数作为对象

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

var obj = new example();

Output : example?{}

Here 'this' keyword points to newly created example object.

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

回答by Mark Tyers

In NodeJS there is some interesting behaviour:

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

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

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

But using an arrow function:

但是使用箭头函数：

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

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

I was always under the impression that a traditional function literal had its own context but not arrow functions, this seems to contradict my understanding.

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

Given this behaviour the code by the OP would not work...

鉴于这种行为，OP 的代码将不起作用......

回答by Xinus

In JavaScript everything is object even functions. When you say this.fooin following code

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

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

foobecomes member variable of Fooobject

foo成为Foo对象的成员变量