JavaScript- 这个值

Question

我看到一些 code like this from jqplot library :

$.jqplot.Dragable = function(options) {
    // a bunch of code here.
    $.extend(true, this, options);
};

这是向库中添加新插件的例程。

this 在$.extend(true, this, options) 中指的是什么？是函数本身还是window，还是只有调用的时候才会指定？

谢谢!

更新:

这个问题本来是一个一般性问题，因为我不理解 js 中的 this 值。经过一些研究，显然:
1. 如果使用 func() 调用，则 this 将是 window 或 undefined (严格模式)
2. 如果像 foo.funct() 这样调用，this 指的是 foo。

至于这个特定的 jqplot 库，当它被调用时，它实际上是在 $.jqplot 上调用的，其中 jqplot 被添加到 jquery 中。所以this应该引用$.jqplot

Answer 1

在你的例子中 $.jqplot.Dragable 是一个构造函数。 this 指的是创建时的对象

new $.jqplot.Dragable(options)

被调用。对于$.extend，它只是将options 中的所有方法和属性复制到this 上。

但没关系。首先你应该明白什么是this。之后，您可以阅读我发布在我的 aswer 底部的链接，以了解 JavaScript 中的构造函数和 OOP。

在 javascript 中，this 指的是方法或函数的上下文。 this 的值可以是三样东西。

全局上下文

当简单地按名称或直接变量引用(不是对象属性)执行函数时，this 指向全局范围。在浏览器中，这是 window 对象。

注意在严格模式下this是undefined

function setFoo(val) {
    this.foo = val;
}

上面我们有一个函数setFoo。这个函数只是获取一个值并将其设置在 this 上。让我们执行函数看看会发生什么......

setFoo(10);

在这种情况下，this 指的是全局范围。因此，window.foo 或 foo 应等于 10。

window.foo == 10 //true
foo == 10 //true

对象上下文

当函数被存储为对象的属性时，它被称为方法。当一个方法被执行时，this 成为该方法附加的对象。这允许该方法修改和使用对象上的数据。

现在让我们获取 setFoo 并将其附加到一个对象。

var myObject = {};
myObject.setFoo = setFoo;

如果我们现在执行，myObject 将有一个名为 foo 的新属性，它将等于我们传递给 myObject.setFoo 的值。

myObject.setFoo(34);

myObject.foo 应该等于 34，因为 this 引用对象 myObject。

myObject.foo == 34; //true

调用上下文

可以设置 this 的最后一种方法是使用 Function 原型(prototype)的方法。这意味着 JavaScript 中的所有函数和方法都有这些 to 方法。它们是call 和apply。这些函数允许程序员在执行函数或方法时设置自定义上下文。两者几乎相同，只是 apply 将数组作为其第二个参数。数组中的每一项都作为参数按顺序传递给函数/方法。

称呼

var x = {};
setFoo.call(x, 20);
x.foo == 20; // true

申请

var x = {};
var args = [20];
setFoo.apply(x, args);
x.foo == 20; // true

您应该阅读 MDN 上关于this 的文章。它将帮助您更好地理解何时使用它，以及为什么它是功能范围的重要组成部分。

MDN - this

您还应该阅读，因为 this 的主要目的是在 JavaScript 中启用 OOP(面向对象编程)。

MDN - Inheritance and the prototype chain