相思资源网 Design By www.200059.com

前言
在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. 函数的所有形参(如果我们是在函数执行上下文中);

"codetitle">复制代码 代码如下:
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">&nbsp;</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

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

"codetitle">复制代码 代码如下:
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”已被添加到变量对象中。此外,在代码运行阶段作如下修改:

"codetitle">复制代码 代码如下:
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,语言特性分析

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“浅谈关于JavaScript的语言特性分析”

暂无浅谈关于JavaScript的语言特性分析的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?