7

我了解this关键字背后的一般概念，但我无法弄清楚它在实践中实际指的是什么。例如，在这两个示例练习中，我都猜错了数字。

对于问题1，我说警报将是'5'，因为它指的是函数中匿名函数之外的this.x。

在 question2 中，我认为警报会是 5，因为这条线

var alertX = o.alertX;

将变量 o 内的属性 x 的值 5 绑定到新变量 'alertX' ，该变量将成为下一行中的函数调用：alertX();

你能解释我为什么错了吗？

var question1 = function() {
    this.x = 5;
     (function() {
        var x = 3;
        this.x = x;
    })();
    alert(this.x);
};
var answer1 = 3; 


var question2 = function() {
    this.x = 9;
    var o = {
        'x':5,
        'alertX':function() { alert(this.x); }
    };
    var alertX = o.alertX;
    alertX();
}
var answer2 = 9;
4

3 回答 3

3

在第一种情况下，当您调用没有显式接收器的方法时this，全局对象是全局对象（window在 Web 浏览器中）。

在第二种情况下类似：即使该函数是在对象上定义的，并且您在另一个对象中，通过调用该函数并将alertx()其this设置为 Global/ window。

简而言之：

  • 因为foo.bar()，this里面的bar会foo。
  • 对于bar()，this将是全局对象。
    • 这包括所谓的“自调用 lambdas”，即(function(){ ... })().
  • 对于bar.call(whee)and bar.apply(whee)，this将是whee（因为这就是这些方法的作用）。

另一个例子：

var o1 = { name:"o1", f:function(){ console.log(this.name) } };
var o2 = { name:"o2" };
o2.gogogo = o1.f;
o2.gogogo(); // Will output "o2"
于 2012-09-04T23:11:13.010 回答
0

这些很好的例子说明了这在 Javascript 中变得多么有趣。this总是指它被调用/调用的上下文，而不仅仅是它当时的位置！question2 就是一个很好的例子。

我假设您正在像这样全局调用这些：

question1();
question2();

在问题1：

您有一个匿名函数，在您第一次将 x 设置为 5 后运行。如果该匿名函数未设置为变量、函数内部等，则会将此设置为 window 的全局变量。但是您将它放在一个函数中并设置为变量 question1。因此，当它自行运行时，它将this（即 question1 函数）x变量设置为 3。

在问题2中：

X 最初设置为 9，在本例中为 question2。现在让你失望的是，即使在你设置的o {}对象中x : 5。你的 alertX 函数正在调用 this.x。所有这些都会让你认为它会警告 5！但是您在o {}对象之外调用警报函数，因此this再次引用 question2 函数！

于 2012-09-04T23:19:33.483 回答
0

将以下内容放入浏览器的控制台

var x = -1, log = function(){ // set up some stuff
if(console) if(console.log) return console.log.apply(console, arguments),undefined;
return alert(arguments.join(', ')),undefined;
},
question1 = function() {
    this.x = 5; // question1.x is 5
     (function() { // anonymous function fires in global 'window'
        var x = 3; // so window.x is now 3
        this.x = x; // this is window
    })();
    log('ans1',this.x,this); // see below
},
question2 = function() {
    this.x = 9; // question2.x is 9
    var o = {
        'x':5,  // o.x is 5
        'alertX':function() { log('ans2',this.x,this); }
    };
    var alertX = o.alertX; // alertX === o.alertX
    alertX(); // being called in global scope

    // to make alertX have scope of question2
    this.alertX = o.alertX; // this is question2
    this.alertX(); // so we're calling from question2
},
a1 = new question1(), // note the new operator
a2 = new question2();
undefined;

你会得到

ans1 5 question1
ans2 3 Window
ans2 9 question2
于 2012-09-04T23:32:16.003 回答