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 相关文章推荐
Javascript算符的优先级介绍
Mar 20 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
Angular resolve基础用法详解
Oct 03 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
Vue.js实现备忘录功能
Jun 26 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
Javascript 作用域使用说明
2009/08/13 Javascript
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
python多线程并发实例及其优化
2019/06/27 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
python获取栅格点和面值的实现
2020/03/10 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
Flask处理Web表单的实现方法
2021/01/31 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
幼儿园中秋节活动方案2013
2014/01/29 职场文书
三年级学生评语
2014/04/23 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
爱的教育读书笔记
2015/06/26 职场文书
高中政治教学反思
2016/02/23 职场文书