技术人员求职必看之Javascript词法作用域

2016-02-19 16:15 7 1 收藏

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的技术人员求职必看之Javascript词法作用域教程,一起来看看吧!超容易上手~

【 tulaoshi.com - Web开发 】

  每个人都会犯错——有时候‘孰能无过,过而能改,善莫大焉’,有时候知道自己错了却没有机会更改。其实,错了并不仅仅是错了,做错了,除了及时改正和弥补之外,最重要的是为自己犯的错承担所有责任。

  2009年3月14日,我去参加网易互动的专场招聘会,应聘网页工程师的职位。有幸参加笔试,然后有幸栽在笔试,呵呵。废话少说,抓出影响极深的一题重新研究研究。

  题目大概是:写出如下代码的输出结果并进行分析

var tt = 'aa';
function test(){
alert(tt);
var tt = 'dd';
alert(tt);
}
test();

  “太简单了!”这是我当时看到这个题目是的第一想法,于是轻率答题竟成我的致命之伤。我的答案是——aa和dd,解析:第一次输出全局变量的结果,然后局部变量tt覆盖全局变量所引用的值,所以第二次输出结果是dd。

  任何人见我如此作答,都会认为我是在扫盲——想法及其幼稚(我也这么认为)!网易啊,怎么可能会满意于这种答案!

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  正确的答案应该是:undefined和dd

  为什么第一次alert的结果是undefined呢?要解释得清楚明白需要用到Javascript的词法作用域。

  Javascript中的函数“在定义它们的作用域里运行,而不是在执行它们的作用域里运行”,这是权威指南里抽象而精辟的总结。

  Javascript的逻辑默认在一个全局作用域中执行,如以上程序段中的“var tt='aa';”就是定义一个全局作用域的全局变量(如果以上代码段不是摘自某个函数链的话)。而test()函数内部的逻辑必须在原有的作用域(全局作用域)链再添加test函数本身的作用域(局部性)——这些思想几乎在每一种语言中都是如此定义的,然而Javascript作用域链的特别之处在于函数内部能够嵌套函数的定义(这是闭包的基础。注:在JS中函数是唯一形式的代码作用域)

  嵌套的内部函数可以调用外部函数(被嵌套的函数)的变量和其他嵌套函数(函数是一种数据)。如果是在外部函数内调用嵌套函数,那么调用对象不变,当外部函数执行完毕后所有数据(包括外部函数和嵌套的内部函数)都将被垃圾回收机制收集——这一点还不能体现出‘闭包’的精华。有一种情况,就是Javascript允许外部调用嵌套的内部函数,即使被嵌套函数已经被‘垃圾收集’——最常见的就是在‘某个函数’中用其嵌套的内部函数定义某些元素的响应事件,页面载入的时候被嵌套函数(‘某个函数’)已经执行完毕(被垃圾回收),但当事件触发的时候仍然会有响应的动作,而且响应函数中还可能调用到在被嵌套函数(‘某个函数’)中定义的变量最终值(不是被垃圾回收了吗?)。

  关于闭包的知识和示例有很多资料可供查询,我不想叙述。

  本文的重点是以下非常重要的细节:

  调用对象位于作用域链的前端,局部变量(在函数内部用var声明的变量)、函数参数及Arguments对象都在函数内的作用域中——这意味着它们隐藏了作用域链更上层的任何同名的属性。

  即,在以上程序片段中,test函数内部的“var tt='dd'”将会致使“var tt='aa'”在test函数被调用时完全被隐藏。而且,tt是在第一个alert语句之后定义,所以在调用到第一个alert时,tt是还没有被赋值的。这样说可能会清楚一点,即,在定义test函数时,当定义第一个alert(tt)时,这里会记录tt是作用域链中的一个变量但不会记录它(tt)的值,函数定义完毕后tt就添加到作用域里,所以第一个alert语句能够找到该作用域里的tt(即,相当于找到一个已经在函数内部声明,但未被赋值的tt)。


  以上程序片段的执行结果与以下片段的结果相同:

var tt = 'aa';
function test(){
var tt;
alert(tt);
tt = 'dd';
alert(tt);
}
test();

  Javascript的作用域不可简单的用C++等语言的思维来理解啊!C++在调用函数之前必须先声明或定义,而Javascript没必要。在Javascript中可以先调用函数,后再定义(不用在调用之前作任何声明)。因为在调用函数时,Javascript是向作用域链要函数的定义(函数在定义它们的作用域里运行,而不是在执行它们的作用域里运行)

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  如以上代码写成:

var tt = 'aa';
test();  //先调用后再定义
function test(){
alert(tt);    //undefined
var tt = 'dd';
alert(tt);    //dd}

  以上代码片段虽然能够得到相同的结果,但最好不要那样写啦,习惯不好,代码不好维护。

  重申一下本文的重点:

  函数在定义它们的作用域里运行,而不是在执行它们的作用域里运行。

  调用对象位于作用域链的前端,局部变量(在函数内部用var声明的变量)、函数参数及Arguments对象都在函数内的作用域中——这意味着它们隐藏了作用域链更上层的任何同名的属性。

来源:http://www.tulaoshi.com/n/20160219/1611480.html

延伸阅读
标签: Web开发
通过表单在iframe内向一个跨域的url提交的时候,如何判断提交成功了呢? 这个,基本上,很难,因为浏览器安全沙箱的限制,我们没有办法通过获得iframe内部不同域页面的信息。换种思维,如果开始可以获得iframe内部页面信息,那么不能获得的时候,不就说明表单已经提交了么~ 百度提供给竞价用户使用的商务中心留言本就是采用...
标签: Web开发
最近在读《JavaScript 设计模式》一书,其中工厂模式中提到了memoizing技术,今天仔细整理了一下memoization 相关的资料,与大家共享。 Memoization 的定义: memoization 一词是Donald Michie 根据拉丁语memorandum杜撰的一个词。相应的动词、过去分词、ing形式有memoiz、memoized、memoizing. Memoization 是一种将函数返回值缓...
标签: Web开发
在这里我将试图考察一下目前.NET平台的下的Ajax框架,我也试图从中总结出来一种方法,使得你可以在众多基于.NET平台的Ajax框架和工具包中找到你所合适的一种,同时也希望你在考察、预研和使用这些流行的这些Ajax-NET 的框架时,做得理性和有的放矢。 我想,文章的方法会给目前使用Ajax的.NET用户带来帮助,从而提高你在.NET平台下使...
标签: Web开发
    Eval()函数 这是我在学习找到的一篇简述Eval的文章,我在此转贴并加入一点自己的心得!在此谢谢原创者 该函数可以把一个字符串当作一个JavaScript表达式一样去执行它,具体来说,就是eval接受一个字符串类型的参数,将这个字符串作为代码在上下文环境中执行,并返回执行的结果。举个小例子:  var the_unevaled_answe...
标签: Web开发
说明: 技巧一: 当表单提交或重置时向客户端进行确认操作 技巧二: 列出表单域中所有元素及其重要属性, 就是 input, select 等的 name, value 等. 总结: 用这两个技巧可以写一个通用的客户端表单验证函数, 至于怎么写, 动动脑筋就行了^^. 但是鄙人还是觉得, 不能过于依赖客户端的验证机制, 现在的人聪明得...

经验教程

982

收藏

32
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部