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类中获取外部函数名的方法
Aug 19 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
jupyter notebook清除输出方式
2020/04/10 Python
详解python metaclass(元类)
2020/08/13 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
Internet体系结构
2014/12/21 面试题
初婚未育未抱养证明
2014/01/12 职场文书
迎新晚会主持词
2014/03/24 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
医院消毒隔离制度
2015/08/05 职场文书
详解Redis瘦身指南
2021/05/26 Redis
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS