文档章节

调皮的JavaScript

lotozhou
 lotozhou
发布于 2015/11/26 10:26
字数 1895
阅读 32
收藏 1

JavaScript是一门有趣的语言,不仅有趣而且调皮,不同的内核的浏览器在解析的时候表现会有些差异,今天主要是抛砖引玉,和大家一起讨论一些在实际开发中比较常见但同时可能并没有过于在意的JavaScript表现。这里先做几个约定:

由于JavaScript是一门解释性语言,自然没有编译过程,但在脚本执行之前会有语法检查和执行环境的构建,我们把这一过程姑且称为预处理吧。

当使用var关键字来声明一个变量或者函数时,我们把这一过程称为变量声明和函数声明,当使用表达式形如function fn() = {}来定义一个函数的方式称为函数定义。

文中实例的测试环境是我电脑上安装的IE9、FF4.0、chrome 14.0三个不同内核的浏览器。

好吧,接下来进入正题,主要看一些简单的demo来观察和了解浏览器是怎样初始化JavaScript中的变量以及函数,主要涉及到的点包括JavaScript中的作用域以及执行环境,对这方便不是很了解的朋友可以参考文章最后的相关链接,看一些简单的demo吧。


DEMO1、函数声明

  1. fn();  //output  2

  2. var fn= function(){

  3.     console.log(1);

  4. }

  5. function fn(){

  6.     console.log(2);

  7. }

  8. fn();  //output  1

复制代码

这个能说明什么呢?第一次调用fn时访问的是通过函数定义的方法,第二次调用访问的是通过函数定义的方法,那么这整个过程从预处理到执行完毕是谁覆盖了谁,谁的优先级更高呢?带着这个疑惑接着测试。


DEMO2、 关于局部变量和全局变量的访问

  1. var num1 = 1;

  2. function   fn(num3){

  3.     console.log(num1);    //output    undefined

  4.     console.log(num3);    //output  4

  5.     console.log(num4);    //throw error  “num4 is not defined”

  6.     console.log(num2);    //throw error  “num2 is not defined”

  7.     var num1 = num4 = 2;

  8.     num2 = 3;

  9.     var num3= 5;

  10. }

  11. fn(4);

复制代码

这里在fn方法中依次输出了四个变量,不知道结果和你预期的有没有差异,输出的第一个参数num1在局部和全局环境中都有声明,局部变量优先级高于全局变量无可厚非,这里不一样的是在声明变量之前访问了num1,说明在预处理阶段构造执行环境时已经为局部变量分配了存储空间,赋的初始值是undefined罢了,输出的第二个变量num3在arguments和局部变量中都有,输出的是arguments中的参数变量,如果前面一个结论成立,那么说明arguments中的变量覆盖了局部环境中的变量,也就是说通过变量定义的方式优先级高于arguments对象数组中定义的变量。第三个输出num4时会报错误,说明连续赋值操作中除第一个变量以外的变量被视为全局变量处理,而全局环境中没有相关定义所以会出错,第四个num2输出出错也是由于被视为全局变量的原因,这两个地方的错误应该可以引用这样一句话:“个人自扫门前雪,莫管他人瓦上霜”,也就是说预处理阶段一个独立的执行环境只会维护自己内部的变量,忽略其他环境的变量。


DEMO3、函数的调用

  1. function   fn(t){

  2.     t();

  3.     function t(){

  4.         console.log(2);

  5.     }

  6.     var t = function(){

  7.         console.log(3);

  8.     }

  9. }

  10. fn(function(){console.log(1)});  //output  2

复制代码

这个demo主要目的是比较arguments、函数定义和函数声明三种方式的一个优先级,从结果知道输出的是通过函数声明的方式定义的函数,从上一个实例得出的结论是arguments中变量会覆盖var方式定义的变量,这里arguments中的变量又被函数定义的方法覆盖了,那我们可以得到这样一个结论:将函数声明为变量(var t = function(){})的方式优先级最高,在预处理阶段被初始化,执行时会先被arguments中的变量覆盖,最后被通过函数定义(function t(){})创建的变量覆盖,这一过程完毕后程序才开始执行。

众所周知JavaScript中没有块级作用域,浏览器间也是表现一致的,比如以下代码:

  1. if(true){

  2. var m= 1;

  3. }

  4. console.log(m); //ouput 1

复制代码

好吧,在这一点上没有任何疑问,那接下来继续看下面一段代码:


DEMO4

  1. console.log(fn.toString());

  2. if (true) {

  3.    function fn(){ return 1; }

  4. }else {

  5.    if(false){

  6.       function fn(){ return 2; }

  7.    }

  8. }

复制代码

这段代码的输出是什么呢,我觉得不防自己测试下,在IE中和chrome中会输出”function fn(){return 2;}”,在FF中是会报错的,那如果代码改成:

  1. if (true) {

  2.      function fn(){ return 1; }

  3.   }else {

  4.      if(false){

  5.        function fn(){ return 2; }

  6.      }

  7. }

  8. console.log(fn.toString());

复制代码

输出的结果在IE和chrome中没有变化,在FF中变成了”function fn(){return 1;}”,这个结果可能和你之前预想的不太一样,我在网上看了一些网站对此也有不同的说法,有些说是FF的bug,个人觉得不应该算bug,毕竟每一个浏览器厂商在实现ECMAScript的标准时会有差异,不能因为和大多数人实现的不一样,就把自己视为错误吧。那为什么会出现这种差异呢,个人觉得是在预处理阶段构建执行环境时对块状作用域的处理上有一些差异,首先先确认一点,如果在块级作用域中通过var关键字声明一个变量,那么不管在声明语句之前还是之后访问该变量都是没有问题的,因为在构建执行环境时会找出所有本域中通过var定义的变量并分配空间,但是通过函数定义的方式就不一样了,IE和chrome会在构建的时候初始化函数对象,并且后面的定义会覆盖前面的定义,从上面的代码还可以看出一点,由于在预处理阶段已经处理了函数定义,在代码的执行阶段不管代码逻辑如何都会直接忽略函数的定义(这点很重要),而在FF中预处理时会忽略块级作用域中的函数定义,在代码执行时再进行初始化,两种实现方式从性能和效率上来说个人感觉FF的实现方式更合理一些,所以不能把这种实现方式归类于bug,当然纯属个人观点。


DEMO5、关于命名函数表达式

  1. fn = function() {return true;};

  2. gn = function() {return false;};

  3. (function() {

  4.    fn = function fn() {return false;};

  5. })();

  6. console(fn());

复制代码

先看一下结果,在IE8及以下版本中输出的true,IE9、FF以及chrome中输出的是false。好吧,先讨论下命名函数表达式,格式如下:

  1. var fn = function fn_alias(){

  2.    console.log(fn_alias.toString());

  3. };

复制代码

在声明一个函数的同时为其指定一个别名,这个别名在IE8及以下版本中在外部是可以访问的,在IE9、FF或者chrome中只能在函数内部访问,这就是为什么会出现DEMO5中那样的情况了,在外部可以访问会造成诸多问题,比如变量名污染等,所以建议在实际开发中不采用这种写法。



© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
和Javascript函数谈一场恋爱(上)

如果Javascript函数是我心中的那个女孩,那么,就让我们谈一场恋爱吧。 1 初见 初见Javascript函数,其实和其它语言的函数也没什么两样。 1.1 函数的声明 function is_true() { return true...

weixin_胖胖熊_0
07/30
0
0
3.3 Js、App和缓存---熊孩子、篮子和仓库

前端组合:熊孩子、村姑、化妆师   上次在这提到村姑和化妆师的故事,其实村姑背后有个大家族。上次教大家如何用代码做自我介绍,其实用到了JavaScript(简称js)。   html只是个静态页面...

产品经理的技术课堂
04/26
0
0
养成一个好习惯:在严格模式下开发Javascript

前言 坦白说对于Javascript所谓的严格模式在今年早些时候我还一无所知,真正在开发中应用也就几个月.对于这个ECMAScript5就已经引入的东西,已经不能算新了,对于这个东西一直处在字面的理解上,...

顽Shi
2014/06/13
0
16
细说JavaScript数据类型及转换

细说JavaScript数据类型及转换 JavaScript数据类型 1.Boolean(布尔) 布尔:(值类型)var b1=true;//布尔类型 2.Number(数字) 数值:(值类型)var n1=3.1415926;//数值类型 n1.toFixed...

开元中国2015
2015/07/13
0
0
JavaScript 需要掌握的知识

1.不仅仅是面试,JavaScript 开发者都应该知道的十个概念(https://my.oschina.net/editorial-story/blog/1529543) 2. 深入理解javascript原型和闭包(完结)(http://www.cnblogs.com/wangfup...

IT追寻者
2016/06/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Snackbar源码分析

目录介绍 1.最简单创造方法 1.1 Snackbar作用 1.2 最简单的创建 1.3 Snackbar消失的几种方式 2.源码分析 2.1 Snackbar的make方法源码分析 2.2 对Snackbar属性进行设置 2.3 Snackbar的show显示...

潇湘剑雨
33分钟前
1
0
分布式作业系统 Elastic-Job-Lite 源码分析 —— 作业数据存储

分布式作业系统 Elastic-Job-Lite 源码分析 —— 作业数据存储 摘要: 原创出处 http://www.iocoder.cn/Elastic-Job/job-storage/ 本文基于 Elastic-Job V2.1.5 版本分享 1. 概述 本文主要分享...

DemonsI
40分钟前
1
0
jmockit demo

1、@Mocked,标识一个指定的class的实例或被测对象的参数被Mock掉。 2、@Capturing,标识一个被Mock的对象,从该对象派生的子类也被Mock了。 3、@Injectable,标识只有一个指定的被测对象的内...

我的老腰啊
53分钟前
1
0
内容换行

用 <textarea>13611112222 这里想换行 13877779999</textarea><textarea>13611112222 13877779999</textarea>...

小黄狗
54分钟前
1
0
学习设计模式——单例模式

1. 认识单例模式 1. 定义:一个类中仅有一个实例,并提供一个访问它的全局访问点。 2. 结构:仅一个Singleton类,其中包含一个static类变量,而类变量的类型就是Singleton类,而且Singleton...

江左煤郎
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部