JavaScript 中的 this 工作原理


Posted in Javascript onJune 20, 2018

一、问题的由来

学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。

var obj = {
 foo: function () {}
};
var foo = obj.foo;
// 写法一
obj.foo()
// 写法二
foo()

上面代码中,虽然obj.foo和foo指向同一个函数,但是执行结果可能不一样。请看下面的例子。

var obj = {
 foo: function () { console.log(this.bar) },
 bar: 1
};
var foo = obj.foo;
var bar = 2;
obj.foo() // 1
foo() // 2

这种差异的原因,就在于函数体内部使用了this关键字。很多教科书会告诉你,this指的是函数运行时所在的环境。对于obj.foo()来说,foo运行在obj环境,所以this指向obj;对于foo()来说,foo运行在全局环境,所以this指向全局环境。所以,两者的运行结果不一样。

这种解释没错,但是教科书往往不告诉你,为什么会这样?也就是说,函数的运行环境到底是怎么决定的?举例来说,为什么obj.foo()就是在obj环境执行,而一旦var foo = obj.foo,foo()就变成在全局环境执行?

本文就来解释 JavaScript 这样处理的原理。理解了这一点,你就会彻底理解this的作用。

二、内存的数据结构

JavaScript 语言之所以有this的设计,跟内存里面的数据结构有关系。

var obj = { foo: 5 };

上面的代码将一个对象赋值给变量obj。JavaScript 引擎会先在内存里面,生成一个对象{ foo: 5 },然后把这个对象的内存地址赋值给变量obj。

也就是说,变量obj是一个地址(reference)。后面如果要读取obj.foo,引擎先从obj拿到内存地址,然后再从该地址读出原始的对象,返回它的foo属性。

原始的对象以字典结构保存,每一个属性名都对应一个属性描述对象。举例来说,上面例子的foo属性,实际上是以下面的形式保存的。

{
 foo: {
  [[value]]: 5
  [[writable]]: true
  [[enumerable]]: true
  [[configurable]]: true
 }
}

注意,foo属性的值保存在属性描述对象的value属性里面。

三、函数

这样的结构是很清晰的,问题在于属性的值可能是一个函数。

var obj = { foo: function () {} };

这时,引擎会将函数单独保存在内存中,然后再将函数的地址赋值给foo属性的value属性。

{
 foo: {
  [[value]]: 函数的地址
  ...
 }
}

由于函数是一个单独的值,所以它可以在不同的环境(上下文)执行。

var f = function () {};
var obj = { f: f };
// 单独执行
f()
// obj 环境执行
obj.f()

四、环境变量

JavaScript 允许在函数体内部,引用当前环境的其他变量。

var f = function () {
 console.log(x);
};

上面代码中,函数体里面使用了变量x。该变量由运行环境提供。

现在问题就来了,由于函数可以在不同的运行环境执行,所以需要有一种机制,能够在函数体内部获得当前的运行环境(context)。所以,this就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。

var f = function () {
 console.log(this.x);
}
上面代码中,函数体里面的this.x就是指当前运行环境的x。
var f = function () {
 console.log(this.x);
}
var x = 1;
var obj = {
 f: f,
 x: 2,
};
// 单独执行
f() // 1
// obj 环境执行
obj.f() // 2

上面代码中,函数f在全局环境执行,this.x指向全局环境的x。

在obj环境执行,this.x指向obj.x。

回到本文开头提出的问题,obj.foo()是通过obj找到foo,所以就是在obj环境执行。一旦var foo = obj.foo,变量foo就直接指向函数本身,所以foo()就变成在全局环境执行。

总结

以上所述是小编给大家介绍的JavaScript 中的 this 工作原理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 Javascript
用js实现放大镜效果
Oct 28 Javascript
JS实现扫雷项目总结
May 19 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 #Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 #Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 #Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 #Javascript
JS中call和apply函数用法实例分析
Jun 20 #Javascript
微信小程序模拟cookie的实现
Jun 20 #Javascript
JS伪继承prototype实现方法示例
Jun 20 #Javascript
You might like
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
django 创建过滤器的实例详解
2017/08/14 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
空指针到底是什么
2012/08/07 面试题
施工安全协议书
2016/03/22 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
python超详细实现完整学生成绩管理系统
2022/03/17 Python
vue实现简易音乐播放器
2022/08/14 Vue.js