JS中this引发bug分析-js教程-PHP中文网

JS中this引发bug分析

小云云

发布： 2017-12-13 09:22:09

原创

1431人浏览过

在 js 中，this 这个上下文总是变化莫测，很多时候出现bug 总是一头雾水，其实，只要分清楚不同的情况下如何执行就可以了，本文主要介绍了分析javascript中this引发的bug以及相关的处理方法分析，希望能帮助到大家。

在JavaScript中有一个很特别、很常用又常常让初学者很困扰的东西 ─ “this”，在这堂课中会来谈谈这个”this”。

this通常会指向一个对象，同时this会在不同的情境下指向不同的对象。让我们来看几个不同的情境，帮助我们更了解”this”。

window object (global object)

这里我们在三种不同情境去打印”this”，分别是在函数的最外层(outer environment)直接去执行；使用fuction statement去执行；使用function expression去执行（如果还不清楚function statement和function expression的差别，可以参考注1）。

结果会发现，这三个”this”都会指向同样的对象，也就是global environment的window object (global object)：

这也就是说，我们可以直接利用这个function和this在window object建立新的属性：

在这里我们利用this.NewVariable = "..."来在window object建立新的属性，函数的最后，我们则可以直接console.log(NewVariable)，这里之所以可以不用打this.NewVariable或window.NewVariable是因为任何在global object (window)的属性，我们都可以直接去使用它，而不用使用”.”。

跑出来的结果会像这样子：

它会打印出我们的”Create a new property”，同时，在window这个大的object中，我们也会找到NewVariable这个属性：

method in object

我们知道，在对象里的值如果是原生值（primitive type；例如，字串、数值、逻辑值），我们会把这个新建立的东西称为「属性（property）」；如果对象里面的值是函数（function）的话，我们则会把这个新建立的东西称为「方法（method）」。

在这里，我们就要来建立method：

首先，我们利用object literal的方式创建一个对象c，里面包含属性name和方法log。log是一个匿名函数（anonymous function），函数内容很简单，就是打印this而已（关于匿名函数可参考注1）。最后则是使用c.log的方式来执行该方法。

让我们来看看，这时候的”this”会是什么呢？

答案是对象c！

当这个函数是对象里面的method时，这时候的this就会指向到包含这个method的对象

JavaScript中关于this的一个bug

让我们更进一步延伸来看这个范例：

假设我们在method log裡面多这一行this.name = "Updated Object C name"

因为我们知道”this”现在指的是对象c，所以可以想像的，当我执行这个method的时候，它会去变更c.name的值。

这个部分是没有什么大问题的，不过让我们继续看下去……。

假设我在method log裡面在做一些变更，我在这个method裡面，另外建立一个函数叫做setname，一样是用this.name = newname的方式来修改这个object c中name属性的值。

接着执行setname这个函数，希望把object c中name的属性值改成”New name for object c”，最后再去打印”this”来看一下。

结果我们会发现，对象c中name属性的值并没有变成”New name for object c”，竟然还是一样！？怎么会这样呢？

仔细一看，我们回来看一下我们的window object，我们会发现，在window object中发现了一个新的属性”name”，而且值是”New name for object c”。

这是什么意思呢？意思是原来我们刚刚在函数setname里面的this，指向到的是global object (window object)，而不再是刚刚的object C！

Is This Image NSFW?

图片安全检测，AI分析图像是否适合安全工作

查看详情

我们在setname这个function中，用console.log(this)来看一下：

在log这个method中，我们一共执行了三次的console.log(this)结果如下：

第一个和第三个”this”指向到的是对象c，而第二个在setname中的this，指向的则是window object (global object)，而这也就是为什么setname这个function没办法帮我们修改对象c中name属性的名称，因为”this”根本没指向到对象c。

而许多人都认为，这是JavaScript的一个bug。

那么我们可以怎么做

那么碰到上述的这个例子时，我们可以怎么做来避免指向到不同的对象呢？

许多人的解法是这样的，因为我们知道对象都是用的引用的方式，所以我们可以这样做

STEP 1

我们在整个函数的最上面加上一行var self = this（有些人会用var that = this）。由于引用的特性，self和this会指向到同一个对象，而this指向对象c，所以self一样会指向对象c。

STEP 2

接着，把方法log内原本使用的”this”都改成”self”，这样做可以确保self指向到的是c对象而不用担心会像上面的例子一样指向到错误的对象。

结果也如同我们预期的，在第二次console.log(self)的时候，就再次替换了对象c中name属性的值。

总结

让我们来总结一下：

如果我们是在全局环境建立函数并打印this，这时候this会指向到全局对象，也就是window对象。

如果我们是在对象里面创建函数，也就是方法（method）的情况时，这时候的this一般就会指向到包含这个方法的对象（之所以说”一般”是因为除了上述bug的情况之外）。

碰到method中可能会有不知道this指向到什么的情况时，为了避免不必要的错误，我们可以在method中的最上面建立一个变量，去把它指定成this（var self = this）。

4.如果真的还是不知道那个情况下的this会指向到什么，就console.log出来看看吧！

示例代码

// function statement
function a(){
 console.log(this);
 this.NewVariable = "Create a new property";
}
a();
console.log(NewVariable);
var c = {
 name:"The C object",
 log: function(){
 var self = this;
 self.name = "Updated object C name";
 console.log(self);
 
 var setname = function(newname){
  self.name = newname;
  console.log(self);
 }
 setname("New name for object c");
 console.log(self)
 }
}
c.log();

登录后复制

看完本文之后相信大家对JS中this引发的bug，都有所了解，有需要的赶紧收藏起来吧。