深入理解JavaScript中的this

栏目: JavaScript · 发布时间: 5年前

内容简介:对于刚刚开始接触前端开发的程序猿来说,无论是日常工作还是面试新工作,对this的理解与掌握都至关重要,不要着急,学完这节课,你就真正的能理解this其实没那么难。这段代码,相信小伙伴们都能看得懂,网上搜索的时候,大部分都是这种例子,所有的人都告诉你,this指向运行时调用它的对象。obj.getName()运行时,getName运行在obj环境(上下文),所以,this指向obj,而getName()运行在全局环境下,所以获取到的是全局环境下的name值。 规则是这么定义的,但是,很少有人告诉你,函数的运行

对于刚刚开始接触前端开发的程序猿来说,无论是日常工作还是面试新工作,对this的理解与掌握都至关重要,不要着急,学完这节课,你就真正的能理解this其实没那么难。

起源

var obj = {
   name: "hansheng",
   getName:function (){
        console.log(this.name)
   }
}
var name = "shengxiansheng";
var getName = obj.getName;
getName(); //shengxiansheng
obj.getName();//hansheng
复制代码

这段代码,相信小伙伴们都能看得懂,网上搜索的时候,大部分都是这种例子,所有的人都告诉你,this指向运行时调用它的对象。obj.getName()运行时,getName运行在obj环境(上下文),所以,this指向obj,而getName()运行在全局环境下,所以获取到的是全局环境下的name值。 规则是这么定义的,但是,很少有人告诉你,函数的运行环境到底是怎么决定的。

内存数据结构

JavaScript中,内存分为栈内存和堆内存。 ###基础数据类型:

  • Number
  • String
  • Boolean
  • null
  • undefined
  • symbol

这些基础数据类型存储在栈内存中。

引用数据类型

  • Array
  • Function
  • Object
  • ...

可以认为除了上文提到的基本数据类型以外,所有类型都是引用数据类型。 引用数据类型存在于堆内存中。 举个例子:

var obj  = {name: hansheng};
复制代码

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

深入理解JavaScript中的this

也就是说,变量obj是一个内存地址,后面要读obj.name,引擎先从obj中拿到内存地址,然后再从该地址读出原始对象,返回它的name属性。 原始对象以字典结构保存,每一个属性名都对应一个属性描述对象。

深入理解JavaScript中的this

值为函数

上面的例子中,值为基础数据类型时,显示的非常明显,但是,有可能,对象属性值为函数。

var obj = {
    name:function(){}
}
复制代码

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

深入理解JavaScript中的this

这就可以解释,为什么函数可以在不同的环境中运行了。

var f = function(){}
var obj  = {
    f: f
}
f(); //单独环境运行
obj.f()//obj环境运行
复制代码

那么问题来了,一个函数可以在不同的环境中运行,这时候,就需要一种机制,能够在函数体内部获得当前的运行环境。所以,this的出现,就是为了在函数体内部,指代函数当前的运行环境。

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。

深入理解JavaScript中的this

在obj环境中运行,this.x指向obj.x

深入理解JavaScript中的this

回到开头,obj.getName()是通过obj找到的getNamee,所以就在obj环境执行,一旦 var getName = obj.getName,变量getName就直接指向函数本身,所以getName是运行在全局环境中的。

感谢阮一峰大神的分享。 下一篇文章我会给大家分享,如何改变this的指向,相信你会学到不一样this指向。

切图不易,感谢大家阅读,如果觉得不错,记得关注哦。

文章会每周更新两篇,别忘了点赞呦~:+1:


以上所述就是小编给大家介绍的《深入理解JavaScript中的this》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序员的英语

程序员的英语

[韩]朴栽浒、[韩]李海永 / 颜廷连 / 人民邮电出版社 / 2018-2 / 49.00元

高考以后就把英语都还给老师了? 写代码特顺溜,一到英语就卡壳? 常见的语法书太枯燥,单词书又太宽泛? 不用急,快来加入针对开发人员的英语读解能力训练项目! - 安全与黑客攻击、无人机与机器人、大数据、物联网、云计算,顺应新技术潮流! - 语法、单词、完形填空、阅读理解、翻译,多角度提升读解能力! - 英语母语技术人员审校,提供“语言和技术”双保险!一起来看看 《程序员的英语》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具