Javascript 链式作用域详细介绍


Posted in Javascript onFebruary 23, 2017

 Javascript 链式作用域

其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里。

这句话有点难懂,但程序的设计,基本都是为了简单,便于理解的。记住JS中经典的一句话是,一切皆对象。

说白了链式作用域,其实就是Javascript的一个特性:子函数中可以访问父函数的所有变量。当然也包括全局变量window(一般的函数定义function a(){},其实都是window对象的子函数)。另外补充一下,函数定义有两种方式,其实略有差别:

var a=function(){}和function a(){},

稍后再解释他们的区别。

所以,我们看Crockford的<<Javascript语言精粹>>中就提到,要在一个函数中定义变量,要养成良好的习惯,请直接在函数开头定义变量。JS中这点上有别于其它语言的要求----尽量推迟变量定义(使用前定义)。

我们看一下laruence提供的例子:

var name = 'laruence';
functionecho(){
   alert(name);
   var name = 'eve';
   alert(name);
   alert(age);
}
 
echo();

这个例子其实很有迷惑性(会让人错误的以为,输出结果是:laruence,eve,error;其实结果是:undefined,eve,error),关键就是因为echo()函数中定义的var name='eve'。但其实换个写法,这个例子就很清楚了:

var name = 'laruence';
function echo() {
   var name;
   alert(name);
   name = 'eve';
   alert(name);
   alert(age);
}
 
echo();

其实,上面的函数在JS引擎解析的时候,就会被解析成这样。如果你是初学者,其实这样理解就可以了。但如果你有别的程序的编程经验,例如java。就很容易被惯用思维给套住了,PS:本人就是给套住的一个。所以,还是按照Crockford的建议把,定义变量,请在函数顶部!!

还记得之前的问题吗?

 var a=function(){}和function a(){}的区别。

它们的区别还变量的定义比较类似。一切皆对象。

他们两个在函数调用时,基本是等价的,但如果调用函数,在定义函数前就会有问题了。其实区别在于等号和function关键字。
var和function定义在预编译的时候被提前,var只是占位,具体赋值要等到JS引擎执行到这行。而function定义会在JS引擎预编译阶段就被直接放入到调用对象中。

还是要举例:

例子一:

alert( echo );//function echo(){return 1;};
function echo(){return 1;};
alert( a );//undefined
var a=function(){return 1;};

所以,函数的定义也可以引申出一句话,请将函数定义放在顶部(先定义后调用)!!

其实还是习惯的问题,JS中一些代码的优良习惯有别于其它语言。建议大家读一下<<Javascript语言精粹>>。在开始学习一门语言时,最好从欣赏优秀的代码开始。而JS中,大家都喜欢用一系列充满迷惑性的代码来加深自己的理解,这其实是一个误区。

另外说一点,this关键字,laruence的解释很简洁到位:"谁调用,谁就是this"。英文版更详细一点:“In JavaScript this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of. ”,中文解释:“在JavaScript中,this永远引用我们所执行函数的拥有者,更准确的说,this引用一个函数的方法对象”。

看看下面的例子,也是误导人的:

function a(){
 g_value="uk";
}
a();
alert(g_value);

其实,比较友好的写法应该是这样:

function a(){
 this.g_value="uk";
}
a();//a.apply(this);
alert(this.g_value);

关于this关键字,和别的语言也有区别。首先它并不是实例的引用,而是调用它的上下文。上面例子的a(),等价于a.apply(this);

call和apply的用法是一样的,区别就在参数传递上。一个是一个一个传参数的,一个是将参数作为类数组传递的(注意这个地方是类数组)。

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
javascript不可用的问题探究
Oct 01 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 #Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 #Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 #Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 #Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 #Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 #Javascript
jquery实现焦点轮播效果
Feb 23 #Javascript
You might like
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
PHP 日期加减的类,很不错
2009/10/10 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python httplib模块使用实例
2015/04/11 Python
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
python 循环while和for in简单实例
2016/08/16 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
python中remove函数的踩坑记录
2021/01/04 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
爸爸的花儿落了教学反思
2014/02/20 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript