Javascript"这个"范围根据其调用方式给出不同的结果

时间:2015-12-14 16:06:47

标签: javascript scope this

所有

这是代码:

var Person = function (name) {

  this.name = name;

  this.printName = function(){
    console.log("My name is " + this.name);
  }

};


var p = new Person("Steve");

var funcRef = p["printName"];

p.printName();//Works

p["printName"]();//Works
funcRef();//returns incorrect value

在此处找到一个有效的示例:http://plnkr.co/edit/57LS6oXPfqccAWf6uqQV?p=preview

我的问题是最后两个之间的区别是什么?我以同样的方式访问对象方法,唯一的区别是它被调用的方式。

为什么会返回差异结果?

我第一次在javascript中遇到过这个问题。我理解它的范围不同,但我不知道它是如何与我想要理解的对象分离的。

由于

史蒂夫

4 个答案:

答案 0 :(得分:5)

当你直接在对象上调用函数时,

javascript绑定this关键字。

使用test.fn()this test位于fn内。与test['fn']()相同。但是,如果您var fn = test.fn; fn() thiswindow将成为fn内的全局根(this)。

您可以强制使用var fn = test.fn.bind(test);这样的函数:u = Season.first u.users #results in: [#< User id: 1, created_at: some date, #< User id 2, created_at: some other date ]

此处有更多信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

答案 1 :(得分:2)

案例1: 'this'总是采用对象的上下文来调用它。

在p.printName()中,上下文是p因此'this'引用'p'引用的Person对象。

情况2: 但是,当你将'funcRef'指向p的方法时,它会丢失这个上下文,'this'引用全局对象。

全局对象可能会有所不同,具体取决于您的js环境(如浏览器上下文或节点等)。

这就是为什么你会看到不同的结果。

答案 2 :(得分:2)

正如其他答案所说,this在您调用该函数时受到约束。保持对象引用的常用方法是使用以下内容:

var Person = function (name) {

  var self = this; // Keep a reference to this object for later use
  self.name = name;

  self.printName = function(){
    console.log("My name is " + self.name);
  }

};

答案 3 :(得分:2)

上述答案已经解释了这个范围的行为方式,以下是这个范围的最佳实践。用法,使用&#39;这个&#39;作为一个名为&#39; self&#39;的新变量,请参阅下面的代码,这样您就可以更好地控制并减少由于此范围的错误用法而导致的错误。

var Person = function (name) {
  var self=this;
  self.name = name;

  self.printName = function(){
    console.log("My name is " + self.name);
  }
};