浅谈关于JavaScript的语言特性分析


Posted in Javascript onApril 11, 2013

前言
在JavaScript中,作用域、上下文、闭包、函数等算是精华中的精华了。对于初级JSer来说,是进阶必备。对于前端攻城师来说,只有静下心来,理解了这些精华,才能写出优雅的代码。

本文旨在总结容易忘记的重要知识,不会讲基本的概念。如果对基本知识不太熟悉,就去翻下《 JavaScript权威指南》吧~

语言特性函数表达式

先看代码段:

[javascript] view plaincopyprint?
var f = function foo(){  
    return typeof foo; // foo是在内部作用域内有效   
};  
// foo在外部用于是不可见的   
typeof foo; // "undefined"   
f(); // "function"  
var f = function foo(){
    return typeof foo; // foo是在内部作用域内有效
};
// foo在外部用于是不可见的
typeof foo; // "undefined"
f(); // "function"

这里想说一点的就是,在函数表达式中的foo,只能在函数内部引用,外面是不能引用的。

json

很多JavaScript开发人员都错误地把JavaScript对象字面量(Object Literals)称为JSON对象(JSON Objects)。 JSON是设计成描述数据交换格式的,它也有自己的语法,这个语法是JavaScript的一个子集。

{ “prop”: “val” } 这样的声明有可能是JavaScript对象字面量,也有可能是JSON字符串,取决于什么上下文使用它。如果是用在string上下文(用单引号或双引 号引住,或者从text文件读取)的话,那它就是JSON字符串,如果是用在对象字面量上下文中,那它就是对象字面量。

[javascript] view plaincopyprint?
// 这是JSON字符串   
var foo = '{ "prop": "val" }';  
// 这是对象字面量   
var bar = { "prop": "val" };  
// 这是JSON字符串
var foo = '{ "prop": "val" }';
// 这是对象字面量
var bar = { "prop": "val" };

还有一点需要知道的是,JSON.parse用来将JSON字符串反序列化成对象,JSON.stringify用来将对象序列化成JSON字符串。老版本的浏览器不支持这个对象,但你可以通过json2.js来实现同样的功能。

原型

function Animal (){  
    // ...
}
function cat (){  
    // ...
}  
cat.prototype = new Animal();//这种方式会继承构造函数里面的。
cat.prototype = Animal.prototype;//这种方式不会继承构造函数里面的。
//还有一个重要的细节需要注意的就是一定要维护自己的原型链,新手总会忘记这个!
cat.prototype.constructor = cat;

如果我们彻底改变函数的prototype属性(通过分配一个新的对象),那原始构造函数的引用就是丢失,这是因为我们创建的对象不包括constructor属性:

function A() {}
A.prototype = {
  x: 10
};
var a = new A();
alert(a.x); // 10
alert(a.constructor === A); // false!

让我们一起看下MDN上关于constructor的解释吧:prototype:Returns a reference to the Object function that created the instance's prototype.因此,对函数的原型引用需要手工恢复:

function A() {}
A.prototype = {
  constructor: A,
  x: 10
};
var a = new A();
alert(a.x); // 10
alert(a.constructor === A); // true

然而,提交prototype属性不会影响已经创建对象的原型(只有在构造函数的prototype属性改变的时候才会影响到),就是说新创建的对象才有有新的原型,而已创建对象还是引用到原来的旧原型(这个原型已经不能被再被修改了)。

function A() {}
A.prototype.x = 10;
var a = new A();
alert(a.x); // 10
A.prototype = {
  constructor: A,
  x: 20
  y: 30
};
// 对象a是通过隐式的[[Prototype]]引用从原油的prototype上获取的值
alert(a.x); // 10
alert(a.y) // undefined
var b = new A();
// 但新对象是从新原型上获取的值
alert(b.x); // 20
alert(b.y) // 30

因此,“动态修改原型将影响所有的对象都会拥有新的原型”是错误的,新原型仅仅在原型修改以后的新创建对象上生效。这里的主要规则是:对象的原型是对象的创建的时候创建的,并且在此之后不能修改为新的对象,如果依然引用到同一个对象,可以通过构造函数的显式prototype引用,对象创建以后,只能对原型的属性进行添加或修改。

变量对象在函数执行上下文中,VO(variable object)是不能直接访问的,此时由活动对象(activation object)扮演VO的角色。 活动对象是在进入函数上下文时刻被创建的,它通过函数的arguments属性初始化。arguments属性的值是Arguments对象:

function foo(x, y, z) {
  // 声明的函数参数数量arguments (x, y, z)
  alert(foo.length); // 3
  // 真正传进来的参数个数(only x, y)
  alert(arguments.length); // 2
  // 参数的callee是函数自身
  alert(arguments.callee === foo); // true
}

当进入执行上下文(代码执行之前)时,VO里已经包含了下列属性:1. 函数的所有形参(如果我们是在函数执行上下文中);

•所有函数声明(FunctionDeclaration, FD);
•所有变量声明(var, VariableDeclaration);
另一个经典例子:

alert(x); // function
var x = 10;
alert(x); // 10
x = 20;
function x() {};
alert(x); // 20

根据规范函数声明是在当进入上下文时填入的; 在进入上下文的时候还有一个变量声明“x”,那么正如我们在上面所说,变量声明在顺序上跟在函数声明和形式参数声明之后,而且在这个进入上下文阶段,变量声明不会干扰VO中已经存在的同名函数声明或形式参数声明。变量相对于简单属性来说,变量有一个特性(attribute):{DontDelete},这个特性的含义就是不能用delete操作符直接删除变量属性。

a = 10;
alert(window.a); // 10
alert(delete a); // true
alert(window.a); // undefined
var b = 20;
alert(window.b); // 20
alert(delete b); // false
alert(window.b); // still 20。b is variable,not property!
var a = 10; // 全局上下文中的变量
(function () {
  var b = 20; // function上下文中的局部变量
})();
alert(a); // 10
alert(b); // 全局变量 "b" 没有声明.

this在一个函数上下文中,this由调用者提供,由调用函数的方式来决定。如果调用括号()的左边是引用类型的值,this将设为引用类型值 的base对象(base object),在其他情况下(与引用类型不同的任何其它属性),这个值为null。不过,实际不存在this的值为null的情况,因为当this的值 为null的时候,其值会被隐式转换为全局对象。

(function () {
  alert(this); // null => global
})();<SPAN style="LINE-HEIGHT: 25.2px; FONT-FAMILY: Helvetica, Tahoma, Arial, sans-serif; FONT-SIZE: 14px"> </SPAN>

在这个例子中,我们有一个函数对象但不是引用类型的对象(它不是标示符,也不是属性访问器),相应地,this值最终设为全局对象。

var foo = {
    bar: function () {
      alert(this);
    }
};
foo.bar(); // Reference, OK => foo
(foo.bar)(); // Reference, OK => foo
(foo.bar = foo.bar)(); // global
(false || foo.bar)(); // global
(foo.bar, foo.bar)(); // global

问题在于后面的三个调用,在应用一定的运算操作之后,在调用括号的左边的值不在是引用类型。

•第一个例子很明显———明显的引用类型,结果是,this为base对象,即foo。

•在第二个例子中,组运算符并不适用,想想上面提到的,从引用类型中获得一个对象真正的值的方法,如GetValue。相应的,在组运算的返回中———我们得到仍是一个引用类型。这就是this值为什么再次设为base对象,即foo。

•第三个例子中,与组运算符不同,赋值运算符调用了GetValue方法。返回的结果是函数对象(但不是引用类型),这意味着this设为null,结果是global对象。

•第四个和第五个也是一样——逗号运算符和逻辑运算符(OR)调用了GetValue 方法,相应地,我们失去了引用而得到了函数。并再次设为global。

正如我们知道的,局部变量、内部函数、形式参数储存在给定函数的激活对象中。

function foo() {
   function bar() {
      alert(this); // global
   }
   bar(); // the same as AO.bar()
}

活动对象总是作为this返回,值为null——(即伪代码的AO.bar()相当于null.bar())。这里我们再次回到上面描述的例子,this设置为全局对象。

作用域链

通过函构造函数创建的函数的scope属性总是唯一的全局对象。

一个重要的例外,它涉及到通过函数构造函数创建的函数。

var x = 10;
function foo() {
   var y = 20;
   function barFD() { // 函数声明
      alert(x);
      alert(y);
   }
   var barFn = Function('alert(x); alert(y);');
   barFD(); // 10, 20
   barFn(); // 10, "y" is not defined
}
foo();

还有:

var x = 10, y = 10;
with ({x: 20}) {
  var x = 30, y = 30;
//这里的 x = 30 覆盖了x = 20;
  alert(x); // 30
  alert(y); // 30
}
alert(x); // 10
alert(y); // 30

在进入上下文时发生了什么?标识符“x”和“y”已被添加到变量对象中。此外,在代码运行阶段作如下修改:

•x = 10, y = 10;
•对象{x:20}添加到作用域的前端;
•在with内部,遇到了var声明,当然什么也没创建,因为在进入上下文时,所有变量已被解析添加;
•在第二步中,仅修改变量“x”,实际上对象中的“x”现在被解析,并添加到作用域链的最前端,“x”为20,变为30;
•同样也有变量对象“y”的修改,被解析后其值也相应的由10变为30;
•此外,在with声明完成后,它的特定对象从作用域链中移除(已改变的变量“x”--30也从那个对象中移除),即作用域链的结构恢复到with得到加强以前的状态。
•在最后两个alert中,当前变量对象的“x”保持同一,“y”的值现在等于30,在with声明运行中已发生改变。
函数

关于圆括号的问题

让我们看下这个问题:‘ 为何在函数创建后的立即调用中必须用圆括号来包围它?',答案就是:表达式句子的限制就是这样的。

按照标准,表达式语句不能以一个大括号 { 开始是因为他很难与代码块区分,同样,他也不能以函数关键字开始,因为很难与函数声明进行区分。即,所以,如果我们定义一个立即执行的函数,在其创建后立即按以下方式调用:

function () {
  ...
}();
// 即便有名称
function foo() {
  ...
}();

我们使用了函数声明,上述2个定义,解释器在解释的时候都会报错,但是可能有多种原因。如果在全局代码里定义(也就是程序级别),解释器会将它看做是函数声明,因为他是以function关键字开头,第一个例子,我们会得到SyntaxError错误,是因为函数声明没有名字(我们前面提到了函数声明必须有名字)。第二个例子,我们有一个名称为foo的一个函数声明正常创建,但是我们依然得到了一个语法错误——没有任何表达式的分组操作符错误。在函数声明后面他确实是一个分组操作符,而不是一个函数调用所使用的圆括号。所以如果我们声明如下代码:

// "foo" 是一个函数声明,在进入上下文的时候创建
alert(foo); // 函数
function foo(x) {
   alert(x);
}(1); // 这只是一个分组操作符,不是函数调用!
foo(10); // 这才是一个真正的函数调用,结果是10

创建表达式最简单的方式就是用分组操作符括号,里边放入的永远是表达式,所以解释器在解释的时候就不会出现歧义。在代码执行阶段这个的function就会被创建,并且立即执行,然后自动销毁(如果没有引用的话)

(function foo(x) {
    alert(x);
})(1); // 这才是调用,不是分组操作符

上述代码就是我们所说的在用括号括住一个表达式,然后通过(1)去调用。注意,下面一个立即执行的函数,周围的括号不是必须的,因为函数已经处在表达式的位置,解析器知道它处理的是在函数执行阶段应该被创建的FE,这样在函数创建后立即调用了函数。

var foo = {
    bar: function (x) {
        return x % 2 != 0 ? 'yes' : 'no';
    }(1)
};
alert(foo.bar); // 'yes'

就像我们看到的,foo.bar是一个字符串而不是一个函数,这里的函数仅仅用来根据条件参数初始化这个属性——它创建后并立即调用。

1.因此,”关于圆括号”问题完整的答案如下:
2.当函数不在表达式的位置的时候,分组操作符圆括号是必须的——也就是手工将函数转化成FE。
3.如果解析器知道它处理的是FE,就没必要用圆括号。
自由变量:

function testFn() {
   var localVar = 10;//对于innerFn函数来说,localVar就属于自由变量。
   function innerFn(innerParam) {
      alert(innerParam + localVar);
   }
   return innerFn;
}

闭包的静态作用域:
 

 var z = 10;
function foo() {
  alert(z);
}
foo(); // 10 ? 使用静态和动态作用域的时候
(function () {
  var z = 20;
  foo(); // 10 ? 使用静态作用域, 20 ? 使用动态作用域
})();
// 将foo作为参数的时候是一样的
(function (funArg) {
    var z = 30;
    funArg(); // 10 ? 静态作用域, 30 ? 动态作用域
})(foo);
 

理论:因为作用域链,使得所有的函数都是闭包(与函数类型无关: 匿名函数,FE,NFE,FD都是闭包)。从实践角度:以下函数才算是闭包:* 即使创建它的上下文已经销毁,它仍然存在(比如,内部函数从父函数中返回)

* 在代码中引用了自由变量

最后:
ECMAScript是一种面向对象语言,支持基于原型的委托式继承。

Javascript 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 Javascript
javascript中的delete使用详解
Apr 11 #Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 #Javascript
原生js实现给指定元素的后面追加内容
Apr 10 #Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 #Javascript
裁剪字符串trim()自定义改进版
Apr 10 #Javascript
关于JS管理作用域的问题
Apr 10 #Javascript
js异常捕获方法介绍
Apr 10 #Javascript
You might like
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
python中模块的__all__属性详解
2017/10/26 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python中partial()基础用法说明
2018/12/30 Python
python开启debug模式的方法
2019/06/27 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
python中如何使用insert函数
2020/01/09 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
PHP面试题及答案一
2012/06/18 面试题
车间操作工岗位职责
2013/12/19 职场文书
购房委托书范本
2014/09/18 职场文书
整改落实自查报告
2014/11/05 职场文书
2014年财政工作总结
2014/12/10 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers