专栏首页FundebugJavaScript中this引发的bug

JavaScript中this引发的bug

转评: this在不同的环境下指向不同的对象,一定要小心!

在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!

我们在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属性的值。

总结

让我们来总结一下:

  1. 如果我们是在全局环境建立函数并打印this,这时候this会指向到全局对象,也就是window对象。
  2. 如果我们是在对象里面创建函数,也就是方法(method)的情况时,这时候的this一般就会指向到包含这个方法的对象(之所以说”一般”是因为除了上述bug的情况之外)。
  3. 碰到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();

引用

[Udemy] JavaScript: Understanding the Weird Parts- Objects, Functions, and ‘This’

延伸阅读

版权声明

转载时请注明作者 Fundebug以及本文地址: https://blog.fundebug.com/2017/12/11/js-this-bug/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为什么JavaScript中的this如此强大?

    译者按: JavaScript 中的 this 让开发者犯迷糊,但是也很灵活很强大。

    Fundebug
  • 5种正确处理JS的this指向的方式

    咱们经常会发现自己用的 this 指向不正确。下面的教你如何简单地将 this 绑定到所需的值。

    Fundebug
  • 你要的 React 面试知识点,都在这了

    React是流行的javascript框架之一,在2019年及以后将会更加流行。React于2013年首次发布,多年来广受欢迎。它是一个声明性的、基于组件的、用...

    Fundebug
  • Python异步Web编程

    异步编程适用于那些频繁读写文件和频繁与服务器交互数据的任务,异步程序以非阻塞的方式执行I/O操作。这样意味着程序可以在等待客户机返回数据的同时执行其他任务,而不...

    jhao104
  • vue+element的表格分页和前端搜索

    1.前端后台管理会存在很多表格,表格数据过多就需要分页; 2.前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返...

    火狼1
  • 基础篇章:关于 React Native 之 Modal 组件的讲解

    (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) Modal是模态视图,它的作用是可以用来覆盖...

    非著名程序员
  • react中常规删除功能

    // let message = ( <div><p > 商机删除后列表将不可见此商机, 请谨慎操作! </p> </div>);

    botkenni
  • 520特辑———旋转爱

    520:网络情人节是信息时代的爱情节日,定于每年的5月20日和5月21日。该节日源于歌手范晓萱的《数字恋爱》中“520”被喻成“我爱你” ,以及...

    流眸
  • MarkDown写作上传图床神器picGo原理

    最近朋友推荐了一个用markdown写博客的神器,typora,用了一下,真的是好用到哭,之前是使用的markText,其实也挺好用的,这两个都是开源的,相对来...

    brzhang
  • JavaScript 之 this 详解

    JavaScript作为一种脚本语言身份的存在,因此被很多人认为是简单易学的。然而情况恰恰相反,JavaScript支持函数式编程、闭包、基于原型的继承等高级功...

    晚晴幽草轩轩主

扫码关注云+社区

领取腾讯云代金券