分析JS中this引发的bug


Posted in Javascript onDecember 12, 2017

在 js 中,this 这个上下文总是变化莫测,很多时候出现bug 总是一头雾水,其实,只要分清楚不同的情况下如何执行就可以了,以下就是我们给大家整理的相关内容:

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

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

window object (global object)

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

分析JS中this引发的bug

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

分析JS中this引发的bug

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

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

分析JS中this引发的bug

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

分析JS中this引发的bug

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

分析JS中this引发的bug

method in object

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

在这里,我们就要来建立method:

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

分析JS中this引发的bug

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

答案是对象c!

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

分析JS中this引发的bug

JavaScript中关于this的一个bug

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

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

分析JS中this引发的bug

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

分析JS中this引发的bug

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

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

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

分析JS中this引发的bug

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

分析JS中this引发的bug

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

分析JS中this引发的bug

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

分析JS中this引发的bug

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

分析JS中this引发的bug

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

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

分析JS中this引发的bug

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

那么我们可以怎么做

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

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

STEP 1

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

STEP 2

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

分析JS中this引发的bug

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

分析JS中this引发的bug

总结

让我们来总结一下:

如果我们是在全局环境建立函数并打印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();
Javascript 相关文章推荐
javascript 网页跳转的方法
Dec 24 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 #Javascript
基于input动态模糊查询的实现方法
Dec 12 #Javascript
详解vue.js之props传递参数
Dec 12 #Javascript
react实现菜单权限控制的方法
Dec 11 #Javascript
Angular 作用域scope的具体使用
Dec 11 #Javascript
angularjs实现柱状图动态加载的示例
Dec 11 #Javascript
Vue响应式原理深入解析及注意事项
Dec 11 #Javascript
You might like
简单的页面缓冲技术
2006/10/09 PHP
php中explode函数用法分析
2014/11/15 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
jQuery 表格工具集
2010/04/25 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
python数据封装json格式数据
2018/03/04 Python
python读取文件名称生成list的方法
2018/04/27 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
python设置随机种子实例讲解
2019/09/12 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
使用Python构造hive insert语句说明
2020/06/06 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
柏林通行证:Berlin Pass
2018/04/11 全球购物
Linux常见面试题
2013/03/18 面试题
大学生实习思想汇报
2014/01/12 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
保管员岗位职责
2015/02/14 职场文书
2015年招生工作总结
2015/05/04 职场文书
技术入股协议书
2016/03/22 职场文书