一段奇葩Javascript代码引发的思考
今天与一挚友加同事调试一段奇葩的javascript代码,在分析出结果后,让我萌生了写此篇文章的想法,如有不对之处望指正,也欢迎大家一起讨论。缩减后的js代码如下,你是否能准确说明他的输出值呢?
function DemoFunction(){
this.init = function(){
var func = (function(va){
this.va = va;
return function(){
va += this.va;
return va;
}
})(function(va1, va2){
var va3 = va1 + va2; //干扰代码
return va1;
}(1,2)); console.log(func(20)); this.func = func;
console.log(this.func(100));
}
}
var a = new DemoFunction();
a.init();
如果要解释这段代码,首先我们得有如下几个概念:
- 执行上下文:每次当控制器转到ECMAScript可执行代码时,即会进入一个可执行上下文,参考文献
- this:this的创建是在 “进入执行上下文” 时创建的,在代码执行过程中是不可变的,参考文献。
- 自执行函数:准确来说应该叫:立即调用函数表达式。因为他声明后即执行,参考文献。
详细解释此段代码
一、首先看DemoFunction的构造函数
这是代码的重点,第一层代码可以缩减为如下:
function DemoFunction(){
this.init = function(){
//省略代码....
}
}
表示为DemoFunction的实例提供init方法(声明:此处有误导成份,方法应尽可能放在原型链接上,也就是prototype上。),对外公开的接口。
二、在init方法中,再次省略代码如下:
var func = (function(va){
this.va = va;
return function(){
va += this.va;
return va;
}
})(8/*省略代码...*/); //省略代码....
代码虽短,但信息量巨大,但这样省略部分代码后,你是否可以清晰的看出他的层次结构。
- 首先定义了一个立即执行函数,并把此函数的执行结果赋值给func。
- 需要注意立即执行函数中
this.va=va
这行代码,由于立即执行函数没有调用者,所以在进入可执行上下文时,this会被赋值为Global(浏览器中为window对象)。 - 更需要注意立即执行函数,返回的是一个闭包,在这里一定要注意一个问题:this是在进入可执行上下文时创建的。
- 也就是说此段代码执行完成后,func的值应该是这样的:
func = function(){
va += this.va;
return va;
}
只不过此时他的父级作用域是立即执行函数而已。
三、在init方法中,注意如下代码:
var func = (function(va){
this.va = va;
return function(){
va += this.va;
return va;
}
})(function(va1, va2){
var va3 = va1 + va2;
return va1;
}(1,2));
//省略代码....
va又为一个立即执行函数,这个立即执行函数接受了两个参数va1,va2,但只返回了va1。以此为据,那么可以确定va的值也就为1。接着就执行this.va=va
这句代码,由于当前this为window,所以参数va的值被赋值到了window的一个叫va的属性上。
四、在init方法中,加上输出语句:
var func = (function(va){
this.va = va;
return function(){
va += this.va;
return va;
}
})(function(va1, va2){
var va3 = va1 + va2;
return va1;
}(1,2)); console.log(func(20)); this.func = func;
console.log(this.func(100));
}
主要分析两个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了。
一段奇葩Javascript代码引发的思考的更多相关文章
- 由闭包引起的对javascript代码可维护性的思考
在最近的编程实践中由闭包的使用引起了我对javascript代码可维护性的思考.面向对象的其中一个特性封装性通过封装可以降低类与类之间或模块与模块之间耦合性从而使我们的设计更加高内聚低耦合,在大规模的 ...
- 因一段JavaScript代码引发的闲扯
前两天,一朋友给我发了一段JavaScript代码: function f1(){ var n=999; nAdd=function(){ n+=1 }; function f2(){ alert(n ...
- 由一段JS代码引发的思考
不知道大家在编程的时候有没有遇到过这种情况,就是在循环遍历删除一部分内容的时候,发现只能删除其中一部分,而另一部分却总也删不掉,然后觉得自己的逻辑没有问题啊,于是陷入了深深的抑郁之中…… 昨天在处理一 ...
- 一段自用javascript代码
function jsontoarray(mjson) { var arr = []; ; for(var x in mjson.data){ arr[i] = new Array(); arr[i] ...
- 前端福利!10个短小却超实用的JavaScript 代码段
JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高 性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaS ...
- 以优美方式编写JavaScript代码
英文原文:CoffeeScript: The beautiful way to write JavaScript 我用 JavaScript 编程很多年了,写了大量的 JavaScript 代码,即便 ...
- silverlight 中javascript 代码与托管代码的互调用 以及一些思考
silverlight 客户端javascript 代码与托管代码的互调用时比较用意义的同时,因为silverlight本身就是一个插件,如果两者之间不能进行相互的调用,对于web 上的一些特殊的功能 ...
- JavaScript代码段整理笔记系列(二)
上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey ...
- JavaScript代码段整理笔记系列(一)
30段JavaScript代码——上篇 1.如何区分IE及非IE浏览器: if(!+[1,]){ //IE 11 不支持 alert("这是 IE 浏览器"): }else{ al ...
随机推荐
- 20175305张天钰《java程序设计》第五周学习总结
<java程序设计>第五周学习总结 接口与实现 知识小点: (1)用Arrays.sort方法对所有实现Comparable接口的对象进行排序 (2)接口体现了has-a关系,继承体现了i ...
- scrapy + selenium 的动态爬虫
动态爬虫 在通过scrapy框架进行某些网站数据爬取的时候,往往会碰到页面动态数据加载的情况发生,如果直接使用scrapy对其url发请求,是绝对获取不到那部分动态加载出来的数据值.但是通过观察我们会 ...
- JavaScript处理null、undefined和空值
最近一直在写前端,在使用jquery的ajax请求然后处理返回值的时候,经常会遇到返回值为undefined或者"null"的情况,很是头疼,而返回接口是来自于其他公司的,所以这种 ...
- git commit时暂时忽略已提交的文件
当正在修改某文件A,此时需要commit,但是A没修改完暂时不能一起commit. 执行: git update-index --assume-unchanged A的路径 git暂时会忽略该文件的修 ...
- JOISC2019 游记
JOISC2019 游记 Day 1: 試験 (Examination) 题目大意: 有\(n(n\le10^5)\)个人,每个人有两种属性\(s_i,t_i\).\(q(q\le10^5)\)次询问 ...
- Spring系列__01HelloWorld
Spring作为一款成熟的Java框架,其优点和意义不用我多说,可以参考:https://m.w3cschool.cn/wkspring/pesy1icl.html 今天开始写一下Spring家族的总 ...
- Openjudge — 7624 山区建小学
问题描述 政府在某山区修建了一条道路,恰好穿越总共m个村庄的每个村庄一次,没有回路或交叉,任意两个村庄只能通过这条路来往.已知任意两个相邻的村庄之间的距离为di(为正整数),其中,0 < i & ...
- Java_异常处理
这篇我们聊聊java中的异常.首先我们要知道什么是异常? Exception: exception翻译过来就是“意外”的意思.事实上,异常的本质就是程序的错误,包括程序逻辑错误和系统错误.错误在编写程 ...
- 数据库mysql大全(高级版)
1.说明:创建数据库 CREATE DATABASE database-name .说明:删除数据库 drop database dbname .说明:备份sql server --- 创建 备份数据 ...
- mysql中Table is read only的解决方法
首先去到mysq的bin目录 cd /usr/local/mysql/bin 执行如下mysqladmin ./mysqladmin -p flush-tables 接着输入数据库存的root密码即可