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滚轮事件onmousewheel使用介绍
Nov 01 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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
PHP实现简单实用的验证码类
2015/07/29 PHP
php给图片加文字水印
2015/07/31 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
Python之pymysql的使用小结
2019/07/01 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
python中xlutils库用法浅析
2020/12/29 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
信息部岗位职责
2013/11/12 职场文书
文秘专业应届生求职信范文
2013/11/14 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
英语教学课后反思
2016/02/15 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python