一段奇葩Javascript代码引发的思考

今天与一挚友加同事调试一段奇葩的javascript代码，在分析出结果后，让我萌生了写此篇文章的想法，如有不对之处望指正，也欢迎大家一起讨论。缩减后的js代码如下，你是否能准确说明他的输出值呢？

如果要解释这段代码，首先我们得有如下几个概念：

1. 执行上下文：每次当控制器转到ECMAScript可执行代码时，即会进入一个可执行上下文。

2. this：this的创建是在 “进入执行上下文” 时创建的，在代码执行过程中是不可变的。

3. 自执行函数：准确来说应该叫：立即调用函数表达式。因为他声明后即执行。

详细解释此段代码

一、首先看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

声明：文章著作权归作者所有，如有侵权，请联系小编删除。

感谢  ·  转发欢迎大家留言