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读取xml
Nov 04 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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 SQLite类
2009/05/07 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
ini_set的用法介绍
2014/01/07 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
创联软件面试题笔试题
2012/10/07 面试题
《地震中的父与子》教学反思
2014/04/10 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
Ajax实现三级联动效果
2021/10/05 Javascript
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
教你如何用cmd快速登录服务器
2022/06/10 Servers
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers