深入理解JS系列 - 2 - 相识名词的区分与隐藏知识点

最新推荐文章于 2024-10-20 22:38:54 发布

shuimoY

最新推荐文章于 2024-10-20 22:38:54 发布

阅读量203

点赞数

函数表达式和函数声明

在ECMAScript中，创建函数的最常用的两个方法是函数表达式和函数声明,而他们又非常相识。

函数声明必须带有标示符（Identifier）（就是大家常说的函数名称），而函数表达式则可以省略这个标示符：

　　函数声明:

　　function 函数名称 (参数：可选){ 函数体 }

　　函数表达式：

　　function 函数名称（可选）(参数：可选){ 函数体 }

这样还是很难区分，我们要通过上下文环境来判断。如果function foo(){}是作为赋值表达式的一部分的话，那它就是一个函数表达式，如果function foo(){}被包含在一个函数体内，或者位于程序的最顶部的话，那它就是一个函数声明。

 function foo(){} // 声明，因为它是程序的一部分
  var bar = function foo(){}; // 表达式，因为它是赋值表达式的一部分

  new function bar(){}; // 表达式，因为它是new表达式

  (function(){
    function bar(){} // 声明，因为它是函数体的一部分
  })();

还有一种函数表达式不太常见，就是被括号括住的(function foo(){})，他是表达式的原因是因为括号 ()是一个分组操作符，它的内部只能包含表达式。

函数声明的实际规则如下：

函数声明只能出现在程序或函数体内。从句法上讲，它们不能出现在Block（块）（{ ... }）中，例如不能出现在 if、while 或 for 语句中。因为 Block（块）中只能包含Statement语句，而不能包含函数声明这样的源元素。

命名函数表达式，理所当然，就是它得有名字，前面的例子var bar = function foo(){};就是一个有效的命名函数表达式，但有一点需要记住：这个名字只在新定义的函数作用域内有效，因为规范规定了标示符不能在外围的作用域内有效：

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

命名函数表达式只能在内部使用，但是我们可以用来调试的时候，查看调用栈。

自调用函数和立即调用函数

自调用函数应该解释为：自己调用自己的函数，即想递归一样。

立即执行函数才是我们理解上的直接会自己马上执行的函数。

TIPS:执行上下文时，函数声明，变量声明会被提前。而同名的函数声明会覆盖变量声明，其他则是后来覆盖前面的，而赋值会留在原地。

函数在后面加（）即可变为立即调用。但不是所有函数都可以直接加（）的。

条件为：表达式可以（）立即执行，而函数声明会报错。例：

function foo(){ /* code */ }(); // SyntaxError: Unexpected token )

(function () { /* code */ } ()); // 推荐使用这个
(function () { /* code */ })(); // 但是这个也是可以用的

// 由于括弧()和JS的&&，异或，逗号等操作符是在函数表达式和函数声明上消除歧义的
// 所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了
// 不过，请注意下一章节的内容解释

var i = function () { return 10; } ();
true && function () { /* code */ } ();
0, function () { /* code */ } ();

// 如果你不在意返回值，或者不怕难以阅读
// 你甚至可以在function前面加一元操作符号

!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();

// 还有一个情况，使用new关键字,也可以用，但我不确定它的效率
// http://twitter.com/kuvos/status/18209252090847232

new function () { /* code */ }
new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧()

用闭包保存状态

和普通function执行的时候传参数一样，自执行的函数表达式也可以这么传参，因为闭包直接可以引用传入的这些参数，利用这些被lock住的传入参数，自执行函数表达式可以有效地保存状态。

// 这个代码是错误的，因为变量i从来就没背locked住
// 相反，当循环执行以后，我们在点击的时候i才获得数值
// 因为这个时候i操真正获得值
// 所以说无论点击那个连接，最终显示的都是I am link #10（如果有10个a元素的话）

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', function (e) {
        e.preventDefault();
        alert('I am link #' + i);
    }, 'false');

}

// 这个是可以用的，因为他在自执行函数表达式闭包内部
// i的值作为locked的索引存在，在循环执行结束以后，尽管最后i的值变成了a元素总数（例如10）
// 但闭包内部的lockedInIndex值是没有改变，因为他已经执行完毕了
// 所以当点击连接的时候，结果是正确的

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    (function (lockedInIndex) {

        elems[i].addEventListener('click', function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex);
        }, 'false');

    })(i);

}

// 你也可以像下面这样应用，在处理函数那里使用自执行函数表达式
// 而不是在addEventListener外部
// 但是相对来说，上面的代码更具可读性

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', (function (lockedInIndex) {
        return function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex);
        };
    })(i), 'false');

}

其实，上面2个例子里的lockedInIndex变量，也可以换成i，因为和外面的i不在一个作用于，所以不会出现问题，这也是匿名函数+闭包的威力。

根本"没有Json"对象那些事

给大家澄清一下一个非常普遍的误解，我认为很多JavaScript开发人员都错误地把JavaScript对象字面量（Object Literals）称为JSON对象（JSON Objects），因为他的语法和JSON规范里描述的一样，但是该规范里也明确地说了JSON只是一个数据交换语言，只有我们将之用在string上下文的时候它才叫JSON。

何时是json?

JSON是设计成描述数据交换格式的，他也有自己的语法，这个语法是JavaScript的一个子集。
{ "prop": "val" } 这样的声明有可能是JavaScript对象字面量也有可能是JSON字符串，取决于什么上下文使用它，如果是用在string上下文（用单引号或双引号引住，或者从text文件读取）的话，那它就是JSON字符串，如果是用在对象字面量上下文中，那它就是对象字面量。

// 这是JSON字符串
var foo = '{ "prop": "val" }';
 
// 这是对象字面量
var bar = { "prop": "val" };

而且要注意，JSON有非常严格的语法，在string上下文里{ "prop": "val" } 是个合法的JSON，但{ prop: "val" }和{ 'prop': 'val' }确实不合法的。所有属性名称和它的值都必须用双引号引住，不能使用单引号。另外，即便你用了转义以后的单引号也是不合法的

真正的JSON对象

开头已经提到，对象字面量不是JSON对象，但是有真正的JSON对象。但是两者完全不一样概念，在新版的浏览器里JSON对象已经被原生的内置对象了，目前有2个静态方法：JSON.parse用来将JSON字符串反序列化成对象，JSON.stringify用来将对象序列化成JSON字符串。老版本的浏览器不支持这个对象，但你可以通过json2.js来实现同样的功能。

如果还不理解，别担心，参考一下的例子就知道了：

// 这是JSON字符串，比如从AJAX获取字符串信息
var my_json_string = '{ "prop": "val" }';
 
// 将字符串反序列化成对象
var my_obj = JSON.parse( my_json_string );
 
alert( my_obj.prop == 'val' ); //  提示 true, 和想象的一样!
 
// 将对象序列化成JSON字符串
var my_other_json_string = JSON.stringify( my_obj );

另外，Paul Irish提到Douglas Crockford在JSON RFC里用到了“JSON object”，但是在那个上下文里，他的意思是“对象描述成JSON字符串”不是“对象字面量”。

JSON 是一门语言JSON 这门语言「抄袭」了 JavaScript ……JSON 这门语言里的数据类型有 array、object、null、boolean、number、string 共六种……「JSON 对象」的全称是「符合 JSON 对象语法的字符串」，我不推荐使用「JSON 对象」一词，很误导人「JSON 字符串」的全称是「符合 JSON 语法的字符串」如果一段字符串符合 JSON 的语法，我们就可以将其简称为「一段 JSON」JSON.parse 的作用是把「符合 JSON 语法的字符串」变成「JS 里的数据结构」JSON.stringify 的作用是把「JS 里的数据结构」变成「符合 JSON 语法的字符串」「把json对象转成json字符串」这句话只能说明你不懂 JSON 的本质