一段奇葩Javascript代码引发的思考
2017-12-13 00:00
746 查看
今天与一挚友加同事调试一段奇葩的javascript代码,在分析出结果后,让我萌生了写此篇文章的想法,如有不对之处望指正,也欢迎大家一起讨论。缩减后的js代码如下,你是否能准确说明他的输出值呢?
如果要解释这段代码,首先我们得有如下几个概念:
执行上下文:每次当控制器转到ECMAScript可执行代码时,即会进入一个可执行上下文。
this:this的创建是在 “进入执行上下文” 时创建的,在代码执行过程中是不可变的。
自执行函数:准确来说应该叫:立即调用函数表达式。因为他声明后即执行。
详细解释此段代码
一、首先看DemoFunction的构造函数这是代码的重点,第一层代码可以缩减为如下:表示为DemoFunction的实例提供init方法(声明:此处有误导成份,方法应尽可能放在原型链接上,也就是prototype上。),对外公开的接口。二、在init方法中,再次省略代码如下:
代码虽短,但信息量巨大,但这样省略部分代码后,你是否可以清晰的看出他的层次结构。首先定义了一个立即执行函数,并把此函数的执行结果赋值给func。需要注意立即执行函数中this.va=va这行代码,由于立即执行函数没有调用者,所以在进入可执行上下文时,this会被赋值为Global(浏览器中为window对象)。更需要注意立即执行函数,返回的是一个闭包,在这里一定要注意一个问题:this是在进入可执行上下文时创建的。也就是说此段代码执行完成后,func的值应该是这样的:
只不过此时他的父级作用域是立即执行函数而已。三、在init方法中,注意如下代码:
va又为一个立即执行函数,这个立即执行函数接受了两个参数va1,va2,但只返回了va1。以此为据,那么可以确定va的值也就为1。接着就执行this.va=va这句代码,由于当前this为window,所以参数va的值被赋值到了window的一个叫va的属性上。四、在init方法中,加上输出语句:
主要分析两个console.log,也是产出结果的时候到了。第一个console.log输出的是func(20),这里一定要注意调用者是没有具体指定的,此时默认的就是Global(也就是widnow对象),因此输出为:2第二个console.log输出的是this.func(100),可以看到this.func与func是指向同一个函数的引用,但此时的调用者则指定为this,也就是当前对象的实例,因此输出为:NaN。原因:this(当前对象的实例)作为调用者,在func的函数中va += this.va这句代码中的this是指向当前对象的实例,但当前对象的实例上是没有va属性的。如果你调试跟踪会发现va是有值的,他的值为:1,这是为什么呢?这就是作用域链,va虽然在当前作用域没有,但在父级(也就是window的作用域下)是存一个叫va的属性的。总结通过此段示例代码的分析,我们可以体会到要深入理解Javascript代码,必须要明白且深度掌握他的:闭包、this、原型链(作用域链)、立即调用函数表达式、函数等概念和机理。此类概念每时每该都充斥任务一个库或者框架的代码中,有了他们做为基石,理解和看懂别人的Js代码就so easy了。
作者:小龙女先生原文:https://www.cnblogs.com/cqhaibin/p/6540907.html声明:文章著作权归作者所有,如有侵权,请联系小编删除。
感谢 · 转发欢迎大家留言
相关文章推荐
- 一段奇葩Javascript代码引发的思考
- javascript 一段代码引发的思考第1/2页
- javascript 一段代码引发的思考第1/2页
- 一段代码引发的思考
- 一段代码,引发的思考。
- 因一段JavaScript代码引发的闲扯
- 因一段JavaScript代码引发的闲扯
- 一段Golang代码引发的思考
- 一段代码引发的思考-----(类及操作符重载,数组相加)
- 由一段JS代码引发的思考
- 一段代码引发的思考
- 由一段小代码引发的关于“表达式”和“语句”的探讨
- JavaScript 使用计时事件制作的钟表 【每日一段代码76】
- JavaScript indexOf() 方法 【每日一段代码81】
- 如何用Java编写一段代码引发内存泄露
- 一段多浏览器的"复制到剪贴板"javascript代码
- JavaScript alert 换行 【每日一段代码47】
- 一段javascript的页面搜索代码
- 因酷时代:中考一事引发的一段思考
- 一段有趣的代码--强大的javascript