JavaScript- this value

JavaScript- this value

本文关键字：value this JavaScript-      更新时间：2023-09-26

我在jqplot库中看到了这样的代码:

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

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

$.extend(true, this, options)中this指的是什么?它是函数本身还是窗口，还是只在调用时指定?

谢谢!

更新:

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

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

在您的示例中，$.jqplot.Dragable是一个构造函数。this是指

创建的对象
new $.jqplot.Dragable(options)

。至于$.extend，它只是将options的每个方法和属性复制到this。

但没关系。首先，您应该了解this是什么。之后，你可以阅读我在我的答案底部发布的链接，了解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原型的方法。这意味着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 -继承和原型链

相关文章：