Question

我目前正在学习javascript，并且正在努力理解对象，特别是“this”关键字。我已经浏览了W3schools的教程并搜索了youtube，并希望有人能在javascript中提供关于“this”的好教程。

Answer 1

忽略ES5中引入的Function.prototype.bind，this的值由函数的调用方式设置。

如果使用非限定标识符调用函数，例如

foo();

然后在输入功能时，this为undefined。在非严格模式下，它将被设置为全局对象（浏览器中的窗口），或者在严格模式下，它将保持为undefined。

如果函数被称为对象的方法，例如

someObj.foo();

然后将this设置为对象。

如果使用new运算符调用某个函数，则其this设置为一个新的对象，就像new Object()一样。

function Foo(name) {
    this.name = name; // this references a new Object
}

如果使用call或apply调用函数，则可以将其this设置为非严格模式下的任何对象，或者设置为严格模式下的任何值（甚至是空的。）

因此this与执行上下文，范围或其他任何内容无关。它与如何调用函数或如何使用bind设置值完全相关。

关于听众中的this，这里已经回答：onClick Function "this" Returns Window Object

动态附加的侦听器是类似的，但在旧的IE中还有一些问题需要处理，这些问题在关于附加侦听器的文章中处理。

Answer 2

this是一个棘手的话题。 this指的是您当前正在使用的函数的“所有者”。根据所处的上下文或范围，this可能意味着几种不同的东西。通常，它引用window对象，它负责跟踪大多数javascript变量，并包含多个函数。这是因为除非明确定义，否则每个javascript函数（和变量）的所有者都是window。换句话说，以下是真的：

<script type="text/javascript">
var something = "Hey";
this.something === something;    //these will evaluate to true, because when you  
window.something === something;  //declared the variable `something`, it was assigned  
this === window;                 //to the window object behind the scenes.
</script>

但它并不总是引用window。在事件处理程序中，this通常是指触发事件的element。我不想深入讨论事件处理程序，但这是使用jQuery的示例。旁注 - 了解jQuery的细节。

HTML：

<div id="myDiv"></div>

使用Javascript：

<script type="text/javascript">
$('#myDiv').bind("click",function() {
                $(this).css("visibility","hidden");   
           });
</script>

在此示例中，this引用顶部框中的html元素。 $()就在它周围，因为这是为元素创建jQuery对象的语法。我这样做了所以我可以使用css函数，但我可以像this.style.visibility = "hidden";

那样轻松完成

上面例子中引用元素this的原因是因为在幕后，jQuery的bind方法正在做这样的事情：

var ele = document.getElementById("myDiv");
ele.onclick = function(){ //the same function as above, but with all the  
                          //behind-the scenes stuff that jquery does to create a jQuery  
                          //object
                        };

请注意，因为我们将函数分配给ele.onclick，所以函数“属于”元素ele。因此，在该函数内，this应引用ele。

如果我遗漏了你仍然不太了解的任何内容，请告诉我。

Javascript对象，特别是此关键字

2 个答案:

HTML：

使用Javascript：