资讯专栏INFORMATION COLUMN

JavaScript真正的this指向原理

VioletJack / 3093人阅读

摘要:为了能够在函数体内部获得当前的运行环境。然后获取函数的地址内存地址,函数运行后,其函数内部上下文指向的就是原始对象环境,即指向返回的属性值。一旦,变量就直接指向函数本身,所以就变成在全局环境执行。

JavaScript函数是一个多带带的值,它可以在不同的环境(上下文)中执行,同时JavaScript 允许在函数体内部,引用当前环境的其他变量。

为了能够在函数体内部获得当前的运行环境(context)。所以,this就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。

在JavaScript语言中,this的设计跟内存的数据结构有关。基本数据类型是按值访问的,引用类型存储在内存中。

比如:

 var outer={
   fn:function(){console.log(this.x)},
   x:2
 }
 var x=1;
 var runFn=outer.fn;
 
 outer.fn() //2
 runFn() //1

上面的代码中,将一个对象赋值给变量outer,JavaScript引擎会先在内存中生成对象{fu:function(){},x:2},然后把对象的内存地址赋值给变量outer。

也就是说,变量outer 保存的是一个地址。后面如果要读取outer.fn,引擎先从outer拿到内存地址,然后再从该地址读出原始的对象。

然后原始对象根据fn属性值,然而fn的属性值是一个函数,这时JavaScript引擎将函数多带带保存在内存中,然后将函数的内存地址赋值给fn属性的 value 属性。

然后获取函数的地址内存地址,outer.fn()函数运行后,其函数内部上下文(context)指向的就是原始对象环境,即his指向outer,返回outer的x属性值。

outer.fn()是通过outer找到fn,所以就是在outer环境执行。一旦var runFn = outer.fn,变量runFn就直接指向函数本身,所以runFn()就变成在全局环境执行。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109017.html

相关文章

  • 深入理解 JavaScript class

    摘要:在规范中,引入了的概念。使用中的声明一个类,是非常简单的事。中面向对象实例化的背后原理,实际上就是原型对象。与区别理解上述原理后,还需要注意与属性的区别。实际上,在中,类继承的本质依旧是原型对象。 在 ES6 规范中,引入了 class 的概念。使得 JS 开发者终于告别了,直接使用原型对象模仿面向对象中的类和类继承时代。 但是JS 中并没有一个真正的 class 原始类型, clas...

    Vicky 评论0 收藏0
  • 前端面试之Js篇

    摘要:作为构造函数使用,绑定到新创建的对象。内部实现类和类的继承构造函数构造函数调用父类构造函数参考请尽可能详尽的解释的工作原理的原理简单来说通过对象来向服务器发异步请求,从服务器获得数据,然后用来操作而更新页面。 1 . 请解释事件代理 (event delegation) 当需要对很多元素添加事件的时,可以通过将事件添加到它们的父节点通过委托来触发处理函数。其中利用到了浏览器的事件冒泡机...

    anyway 评论0 收藏0
  • 关于JavaScriptthis理解

    摘要:想想也是难以置信,这应该全归功于对框架的依赖,促使助长了自己对学习的懈怠。真正的成了离职就失业的尴尬境地。我们接下来来了解下中的的使用和作用。以前对中的理解很简单粗暴谁调用就指向谁。如果例题中有不对的地方希望予以指教留言评论 前言 使用JavaScript有很长一段时间了,但是以前过多都是使用,从不去及理解其中原理,单单只是去生拼硬凑。这样的开发居然做了2年。匪夷所思居然项目中Java...

    lindroid 评论0 收藏0
  • 前端面试笔记 - js相关

    摘要:将单个事件绑定在父对象上,利用冒泡机制监听来自子元素的事件。事件目标当到达目标元素之后,执行目标元素该事件相应的处理函数。函数对象当使用去调用构造函数时,相当于执行了原型对象上都有个预定义的属性,用来引用它的函数对象。 请解释事件代理 (event delegation)。 将单个事件绑定在父对象上,利用冒泡机制,监听来自子元素的事件。 优点:解决子元素增加删除时候的事件处理,防止内存...

    Dogee 评论0 收藏0
  • JavasScript重难点知识

    摘要:忍者级别的函数操作对于什么是匿名函数,这里就不做过多介绍了。我们需要知道的是,对于而言,匿名函数是一个很重要且具有逻辑性的特性。通常,匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归 递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果...

    forsigner 评论0 收藏0

发表评论

0条评论

VioletJack

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<