Javascript 链式作用域详细介绍

 更新时间:2017年02月23日 14:17:00   作者:DoubleLi  
这篇文章主要介绍了Javascript 链式作用域详细介绍的相关资料,需要的朋友可以参考下

 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的用法是一样的,区别就在参数传递上。一个是一个一个传参数的,一个是将参数作为类数组传递的(注意这个地方是类数组)。

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

相关文章

  • js中的eventType事件及其浏览器支持性介绍

    js中的eventType事件及其浏览器支持性介绍

    js中的eventType事件想必大家都不陌生吧,下面为大家详细介绍下一般的事情及浏览器支持性,感兴趣的朋友可以参考下
    2013-11-11
  • 简单实现轮播图效果的实例

    简单实现轮播图效果的实例

    下面小编就为大家带来一篇简单实现轮播图效果的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 解析javascript图片懒加载与预加载的分析总结

    解析javascript图片懒加载与预加载的分析总结

    本篇文章介绍了javascript图片懒加载与预加载的分析,详细的介绍了懒加载和预加载的问题,有需要的可以了解一下。
    2016-10-10
  • 浅析ES6与CommonJS中模块的用法对比

    浅析ES6与CommonJS中模块的用法对比

    ES6 的模块化汲取了 CommonJS 和AMD 的优点,拥有简洁的语法和异步的支持,并且写法也和 CommonJS 非常的相似,下面我们就来看看二者用法的差异吧
    2023-09-09
  • JS中如何优雅的使用async await详解

    JS中如何优雅的使用async await详解

    async表示异步,而await可以看作async wait,个人对async与await的简单理解就是,我们可以用同步的方式去书写异步代码,这篇文章主要给大家介绍了关于JS中如何优雅的使用async await的相关资料,需要的朋友可以参考下
    2021-10-10
  • 微信小程序中的轮播图实现示例

    微信小程序中的轮播图实现示例

    打开一个小程序,我们会发现,一般构图排版都是图片banner - 快捷按钮 - 产品/文章列表等详细信息,底部导航一般是2~5个。这样的排版是比较美观的,那么为什么要这样设计,这些轮播图、快捷按钮等小程序组件都有什么用呢?接下来就带你详细了解下
    2022-12-12
  • AutoJs实现刷宝短视频的思路详解

    AutoJs实现刷宝短视频的思路详解

    这篇文章主要介绍了AutoJs实现刷宝短视频的思路详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 微信小程序的引导页实现代码

    微信小程序的引导页实现代码

    这篇文章主要介绍了微信小程序的引导页实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • JS操作CSS随机改变网页背景实现思路

    JS操作CSS随机改变网页背景实现思路

    JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的,下面是具体的实现思路,感兴趣的朋友可以参考下
    2014-03-03
  • JavaScript实现抽奖器效果

    JavaScript实现抽奖器效果

    这篇文章主要为大家详细介绍了JavaScript实现抽奖器效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论