如何“这”在JavaScript中工作吗?(How does 'this' work

2019-06-27 01:57发布

我知道有关于这一主题的几个其他职位,但他们还是离开了我困惑。

我已经包括jQuery和一切,我有这样的例子一个简单的JavaScript类:

function CarConstructor(){
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph=fillKph;
}

function fillKph(){
  $("#kphdiv").html(this.speed*1.61);
}

car1 = new CarConstructor();
car1.fillKph();

现在我知道,那个代码段不能正常工作,并且未正确consturcted。

“此”关键字有参考我的DOM元素与“kphdiv”的ID。

我的问题是什么是处理这个的最佳方式。

我看过一个方法,您可以设置一些变量等于这个(绑定),然后重新使用该变量来引用您的对象。 例如:

function CarConstructor(){
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph=fillKph;
}

function fillKph(){
  var me=this;
  $("#kphdiv").html(me.speed*1.61);
}

car1 = new CarConstructor();
car1.fillKph();

我也可以让我一个全局变量...我不知道。

我只是好奇,如果有另一个/更好的办法。

Answer 1:

哦,孩子,你是混淆了不少东西。

function CarConstructor(){
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph; // <-> This particular statement has no meaning. 
  //When you write this.fillKph without any assignment, it will be 'undefined'. 
  //Just because you have a function named 'fillKph' somewhere else, 
  //it doesn't mean it will get attached to this property.
}

尝试,

var toyota = new Car();
alert(typeof toyota.fillKph); //will alert undefined.

该fillKph功能在全球范围内创建,即作为“窗口”对象的属性。

function fillKph(){
  var me=this;
  $("#kphdiv").html(me.speed*1.61);
}

为了解决这个问题,你可以rezzif建议什么。 你的最终代码看起来像

function Car()
{
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph = function (){
      $("#kphdiv").html(this.speed*1.61);
  };
}

car1 = new Car();
car1.fillKph();

如果您发现,我并没有存储参考“这个”内的局部变量。 为什么? 有一个在这种情况下没有必要。 要了解更多,请参阅我的详细解答这里 。

如果您要创建很多车的对象,你可以定义在原型fillKph方法。

function Car()
{
  this.speed=19; // in mph
  this.make="Ford";
}

Car.prototype.fillKph = function fillKph() { $("#kphdiv").html(this.speed*1.61); };

car1 = new Car();
car1.fillKph();

编辑:

如果你这样做,

function CarConstructor(){
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph = fillKph;
}

function fillKph(){
  $("#kphdiv").html(me.speed*1.61);
}

car1 = new Car();
car1.fillKph(); //This will work as expected.

但问题是,fillKph在“窗口”的范围定义,这样我就可以直接调用它,

fillKph(); //Calling it this way will break it as it won't get correct 'this'.

重点是,

alert(typeof fillKph); // alerts 'function' if you do it your way,
alert(typeof fillKph); // alerts 'undefined', if you do it the way I suggested, which is preferred in my opinion.


Answer 2:


function CarConstructor(){
  var _this = this;  
  this.speed=19; // in mph
  this.make="Ford";
  this.fillKph = function (){
      $("#kphdiv").html(_this.speed*1.61);
  };
}

car1 = new CarConstructor();
car1.fillKph();


Answer 3:

有完全没有错,后一种方法,这是完全正常的,可能做的最优雅的方式,它只是存储在这一点上和时间在另一个执行环境中使用的执行上下文引用,其引用指向不同的对象。



Answer 4:

关于混乱的事情this在JavaScript是对关系的new运营商。 当你走了作用域链, this通常是指最后occruance new 。 如果需要的话,这意味着将所有的方式回到window对象。 所以,如果你有这样的事情:

function MyObject() 
{ 
    this.baz = "some value"; 
    this.bar = function() { return this.baz; }
}
var foo = new MyObject();
alert(foo.bar());

它按预期工作,因为foo的变量,用一个新的对象/范围所创建的this关键字,所以参考this.baz点到正确的地方。

不过,如果你这样做:

var foo = new MyObject();
var bar = foo.bar;
alert(bar());

期待调用foo的酒吧功能,你现在叫它创造了“范围”之外的foo由新的运营商。 您使用的this酒吧函数内部现在看起来窗口对象,它不具备一个定义baz

这看似是一个边缘的情况下,但如jQuery,使用新创造了很多隐含对象的或期望你周围的传递功能,如变量的框架中工作时是非常重要的。 你必须要非常小心。



文章来源: How does 'this' work in JavaScript?