JS语法汇总

爱被打了一巴掌 2022-06-09 06:37 244阅读 0赞

#  #

# 函数表达式和函数声明 #

在ECMAScript中，创建函数的最常用的两个方法是函数表达式和函数声明，两者期间的区别是有点晕，因为ECMA规范只明确了一点：函数声明必须带有标示符（Identifier）（就是大家常说的函数名称），而函数表达式则可以省略这个标示符：

函数声明:

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

函数表达式：

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

所以，可以看出，如果不声明函数名称，它肯定是表达式，可如果声明了函数名称的话，如何判断是函数声明还是函数表达式呢？ECMAScript是通过上下文来区分的，如果function foo()\{\}是作为赋值表达式的一部分的话，那它就是一个函数表达式，如果function foo()\{\}被包含在一个函数体内，或者位于程序的最顶部的话，那它就是一个函数声明。

##  ##

# Module 模式简介及面向duix #

Module模式是JavaScript编程中一个非常通用的模式，一般情况下，大家都知道基本用法，本文尝试着给大家更多该模式的高级使用方式。

首先我们来看看Module模式的基本特征：

1.  模块化，可重用
2.  封装了变量和function，和全局的namaspace不接触，松耦合
3.  只暴露可用public的方法，其它私有方法全部隐藏

关于Module模式，最早是由YUI的成员Eric Miraglia在4年前提出了这个概念，我们将从一个简单的例子来解释一下基本的用法（如果你已经非常熟悉了，请忽略这一节）。

# 基本用法 #

先看一下最简单的一个实现，代码如下：

我们可以通过如下的方式来调用：

var calculator = new Calculator('eq');
    calculator.add(2, 2);

大家可能看到了，每次用的时候都要new一下，也就是说每个实例在内存里都是一份copy，如果你不需要传参数或者没有一些特殊苛刻的要求的话，我们可以在最后一个\}后面加上一个括号，来达到自执行的目的，这样该实例在内存中只会存在一份copy，不过在展示他的优点之前，我们还是先来看看这个模式的基本使用方法吧。

## **匿名闭包** ##

匿名闭包是让一切成为可能的基础，而这也是JavaScript最好的特性，我们来创建一个最简单的闭包函数，函数内部的代码一直存在于闭包内，在整个运行周期内，该闭包都保证了内部的代码处于私有状态。

(function () {
        // ... 所有的变量和function都在这里声明，并且作用域也只能在这个匿名闭包里
        // ...但是这里的代码依然可以访问外部全局的对象
    }());

注意，匿名函数后面的括号，这是JavaScript语言所要求的，因为如果你不声明的话，JavaScript解释器默认是声明一个function函数，有括号，就是创建一个函数表达式，也就是自执行，用的时候不用和上面那样在new了，当然你也可以这样来声明：

(function () {
       /* 内部代码 */})();

不过我们推荐使用第一种方式

## **引用全局变量** ##

JavaScript有一个特性叫做隐式全局变量，不管一个变量有没有用过，JavaScript解释器反向遍历作用域链来查找整个变量的var声明，如果没有找到var，解释器则假定该变量是全局变量，如果该变量用于了赋值操作的话，之前如果不存在的话，解释器则会自动创建它，这就是说在匿名闭包里使用或创建全局变量非常容易，不过比较困难的是，代码比较难管理，尤其是阅读代码的人看着很多区分哪些变量是全局的，哪些是局部的。  
  
不过，好在在匿名函数里我们可以提供一个比较简单的替代方案，我们可以将全局变量当成一个参数传入到匿名函数然后使用，相比隐式全局变量，它又清晰又快，我们来看一个例子：

(function ($, YAHOO) {
        // 这里，我们的代码就可以使用全局的jQuery对象了，YAHOO也是一样
    } (jQuery, YAHOO));

现在很多类库里都有这种使用方式，比如jQuery源码。

不过，有时候可能不仅仅要使用全局变量，而是也想声明全局变量，如何做呢？我们可以通过匿名函数的返回值来返回这个全局变量，这也就是一个基本的Module模式，来看一个完整的代码：

上面的代码声明了一个全局变量blogModule，并且带有2个可访问的属性：blogModule.AddTopic和blogModule.Name，除此之外，其它代码都在匿名函数的闭包里保持着私有状态。同时根据上面传入全局变量的例子，我们也可以很方便地传入其它的全局变量。

## **扩展** ##

Module模式的一个限制就是所有的代码都要写在一个文件，但是在一些大型项目里，将一个功能分离成多个文件是非常重要的，因为可以多人合作易于开发。再回头看看上面的全局参数导入例子，我们能否把blogModule自身传进去呢？答案是肯定的，我们先将blogModule传进去，添加一个函数属性，然后再返回就达到了我们所说的目的，上代码：

var blogModule = (function (my) {
        my.AddPhoto = function () {
            //添加内部代码  
        };
        return my;
    } (blogModule));

这段代码，看起来是不是有C\#里扩展方法的感觉？有点类似，但本质不一样哦。同时尽管var不是必须的，但为了确保一致，我们再次使用了它，代码执行以后，blogModule下的AddPhoto就可以使用了，同时匿名函数内部的代码也依然保证了私密性和内部状态。

## **松耦合扩展** ##

上面的代码尽管可以执行，但是必须先声明blogModule，然后再执行上面的扩展代码，也就是说步骤不能乱，怎么解决这个问题呢？我们来回想一下，我们平时声明变量的都是都是这样的：

var cnblogs = cnblogs || {} ;

这是确保cnblogs对象，在存在的时候直接用，不存在的时候直接赋值为\{\}，我们来看看如何利用这个特性来实现Module模式的任意加载顺序：

var blogModule = (function (my) {
    
        // 添加一些功能   
        
        return my;
    } (blogModule || {}));

通过这样的代码，每个单独分离的文件都保证这个结构，那么我们就可以实现任意顺序的加载，所以，这个时候的var就是必须要声明的，因为不声明，其它文件读取不到哦。

## **紧耦合扩展** ##

虽然松耦合扩展很牛叉了，但是可能也会存在一些限制，比如你没办法重写你的一些属性或者函数，也不能在初始化的时候就是用Module的属性。紧耦合扩展限制了加载顺序，但是提供了我们重载的机会，看如下例子：

var blogModule = (function (my) {
        var oldAddPhotoMethod = my.AddPhoto;
    
        my.AddPhoto = function () {
            // 重载方法，依然可通过oldAddPhotoMethod调用旧的方法
        };
    
        return my;
    } (blogModule));

通过这种方式，我们达到了重载的目的，当然如果你想在继续在内部使用原有的属性，你可以调用oldAddPhotoMethod来用。

## **克隆与继承** ##

这种方式灵活是灵活，但是也需要花费灵活的代价，其实该对象的属性对象或function根本没有被复制，只是对同一个对象多了一种引用而已，所以如果老对象去改变它，那克隆以后的对象所拥有的属性或function函数也会被改变，解决这个问题，我们就得是用递归，但递归对function函数的赋值也不好用，所以我们在递归的时候eval相应的function。不管怎么样，我还是把这一个方式放在这个帖子里了，大家使用的时候注意一下就行了。

# 立即调用的函数表达式及自调用 #

在JavaScript里，任何function在执行的时候都会创建一个执行上下文，因为为function声明的变量和function有可能只在该function内部，这个上下文，在调用function的时候，提供了一种简单的方式来创建自由变量或私有子function。

#  #

// 由于该function里返回了另外一个function，其中这个function可以访问自由变量i
    // 所有说，这个内部的function实际上是有权限可以调用内部的对象。
    
    function makeCounter() {
        // 只能在makeCounter内部访问i
        var i = 0;
    
        return function () {
            console.log(++i);
        };
    }
    
    // 注意，counter和counter2是不同的实例，分别有自己范围内的i。
    
    var counter = makeCounter();
    counter(); // logs: 1
    counter(); // logs: 2
    
    var counter2 = makeCounter();
    counter2(); // logs: 1
    counter2(); // logs: 2
    
    alert(i); // 引用错误：i没有defind（因为i是存在于makeCounter内部）。

很多情况下，我们不需要makeCounter多个实例，甚至某些case下，我们也不需要显示的返回值，OK，往下

# 自执行函数表达式 #

要解决上述问题，非常简单，我们只需要用大括弧将代码的代码全部括住就行了，因为JavaScript里括弧()里面不能包含语句，所以在这一点上，解析器在解析function关键字的时候，会将相应的代码解析成function表达式，而不是function声明。

// 下面2个括弧()都会立即执行
    
    (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 */ } () // 如果需要传递参数，只需要加上括弧()

上面所说的括弧是消除歧义的，其实压根就没必要，因为括弧本来内部本来期望的就是函数表达式，但是我们依然用它，主要是为了方便开发人员阅读，当你让这些已经自动执行的表达式赋值给一个变量的时候，我们看到开头有括弧(，很快就能明白，而不需要将代码拉到最后看看到底有没有加括弧。

# 强大的原型及原型链 #

JavaScript 不包含传统的类继承模型，而是使用 prototypal 原型模型。

虽然这经常被当作是 JavaScript 的缺点被提及，其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单，但是实现 JavaScript 中的原型继承则要困难的多。

由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言，所以理解两种继承模式的差异是需要一定时间的，今天我们就来了解一下原型和原型链。

## **原型使用方式1：** ##

在使用原型之前，我们需要先将代码做一下小修改：

var Calculator = function (decimalDigits, tax) {
                this.decimalDigits = decimalDigits;
                this.tax = tax;
            };

然后，通过给Calculator对象的prototype属性赋值**对象字面量**来设定Calculator对象的原型。

Calculator.prototype = {
                add: function (x, y) {
                    return x + y;
                },
    
                subtract: function (x, y) {
                    return x - y;
                }
            };
            //alert((new Calculator()).add(1, 3));

这样，我们就可以new Calculator对象以后，就可以调用add方法来计算结果了。

## **原型使用方式2：** ##

第二种方式是，在赋值原型prototype的时候使用function立即执行的表达式来赋值，即如下格式：

Calculator.prototype = function () { } ();

它的好处在前面的帖子里已经知道了，就是可以封装私有的function，通过return的形式暴露出简单的使用名称，以达到public/private的效果，修改后的代码如下：

Calculator.prototype = function () {
                add = function (x, y) {
                    return x + y;
                },
    
                subtract = function (x, y) {
                    return x - y;
                }
                return {
                    add: add,
                    subtract: subtract
                }
            } ();
    
            //alert((new Calculator()).add(11, 3));

同样的方式，我们可以new Calculator对象以后调用add方法来计算结果了。

# 再来一点 #

## **分步声明：** ##

上述使用原型的时候，有一个限制就是一次性设置了原型对象，我们再来说一下如何分来设置原型的每个属性吧。

首先，声明了一个BaseCalculator对象，构造函数里会初始化一个小数位数的属性decimalDigits，然后通过原型属性设置2个function，分别是add(x,y)和subtract(x,y)，当然你也可以使用前面提到的2种方式的任何一种，我们的主要目的是看如何将BaseCalculator对象设置到真正的Calculator的原型上。

创建完上述代码以后，我们来开始：

var Calculator = function () {
        //为每个实例都声明一个税收数字
        this.tax = 5;
    };
            
    Calculator.prototype = new BaseCalculator();

我们可以看到Calculator的原型是指向到BaseCalculator的一个实例上，目的是让Calculator集成它的add(x,y)和subtract(x,y)这2个function，还有一点要说的是，由于它的原型是BaseCalculator的一个实例，所以不管你创建多少个Calculator对象实例，他们的原型指向的都是同一个实例。

var calc = new Calculator();
    alert(calc.add(1, 1));
    //BaseCalculator 里声明的decimalDigits属性，在 Calculator里是可以访问到的
    alert(calc.decimalDigits);

上面的代码，运行以后，我们可以看到因为Calculator的原型是指向BaseCalculator的实例上的，所以可以访问他的decimalDigits属性值，那如果我不想让Calculator访问BaseCalculator的构造函数里声明的属性值，那怎么办呢？这么办：

var Calculator = function () {
        this.tax= 5;
    };
    
    Calculator.prototype = BaseCalculator.prototype;

通过将BaseCalculator的原型赋给Calculator的原型，这样你在Calculator的实例上就访问不到那个decimalDigits值了，如果你访问如下代码，那将会提升出错。

var calc = new Calculator();
    alert(calc.add(1, 1));
    alert(calc.decimalDigits);

## **重写原型：** ##

在使用第三方JS类库的时候，往往有时候他们定义的原型方法是不能满足我们的需要，但是又离不开这个类库，所以这时候我们就需要重写他们的原型中的一个或者多个属性或function，我们可以通过继续声明的同样的add代码的形式来达到覆盖重写前面的add功能，代码如下：

//覆盖前面Calculator的add() function 
    Calculator.prototype.add = function (x, y) {
        return x + y + this.tax;
    };
    
    var calc = new Calculator();
    alert(calc.add(1, 1));

这样，我们计算得出的结果就比原来多出了一个tax的值，但是有一点需要注意：那就是重写的代码需要放在最后，这样才能覆盖前面的代码。

# 原型链 #

在将原型链之前，我们先上一段代码：

上面的例子中，test 对象从 Bar.prototype 和 Foo.prototype 继承下来；因此，它能访问 Foo 的原型方法 method。同时，它也能够访问那个定义在原型上的 Foo 实例属性 value。需要注意的是 new Bar() 不会创造出一个新的 Foo 实例，而是重复使用它原型上的那个实例；因此，所有的 Bar 实例都会共享相同的 value 属性。

## **属性查找：** ##

当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止，到查找到达原型链的顶部 - 也就是 Object.prototype - 但是仍然没有找到指定的属性，就会返回 undefined，我们来看一个例子：

通过代码运行，我们发现subtract是安装我们所说的向上查找来得到结果的，但是add方式有点小不同，这也是我想强调的，就是属性在查找的时候是先查找自身的属性，如果没有再查找原型，再没有，再往上走，一直插到Object的原型上，所以在某种层面上说，用 for in语句遍历属性的时候，效率也是个问题。

还有一点我们需要注意的是，我们可以赋值任何类型的对象到原型上，但是不能赋值原子类型的值，比如如下代码是无效的：

function Foo() {}
    Foo.prototype = 1; // 无效

## **hasOwnProperty函数：** ##

hasOwnProperty是Object.prototype的一个方法，它可是个好东西，他能判断一个对象是否包含自定义属性而不是原型链上的属性，因为hasOwnProperty 是 JavaScript 中唯一一个处理属性但是不查找原型链的函数。

// 修改Object.prototype
    Object.prototype.bar = 1; 
    var foo = {goo: undefined};
    
    foo.bar; // 1
    'bar' in foo; // true
    
    foo.hasOwnProperty('bar'); // false
    foo.hasOwnProperty('goo'); // true

只有 hasOwnProperty 可以给出正确和期望的结果，这在遍历对象的属性时会很有用。 没有其它方法可以用来排除原型链上的属性，而不是定义在对象自身上的属性。

但有个恶心的地方是：JavaScript 不会保护 hasOwnProperty 被非法占用，因此如果一个对象碰巧存在这个属性，就需要使用外部的 hasOwnProperty 函数来获取正确的结果。

当检查对象上某个属性是否存在时，hasOwnProperty 是唯一可用的方法。同时在使用 for in loop 遍历对象时，推荐总是使用 hasOwnProperty 方法，这将会避免原型对象扩展带来的干扰，我们来看一下例子：

// 修改 Object.prototype
    Object.prototype.bar = 1;
    
    var foo = {moo: 2};
    for(var i in foo) {
        console.log(i); // 输出两个属性：bar 和 moo
    }

我们没办法改变for in语句的行为，所以想过滤结果就只能使用hasOwnProperty 方法，代码如下：

// foo 变量是上例中的
    for(var i in foo) {
        if (foo.hasOwnProperty(i)) {
            console.log(i);
        }
    }

这个版本的代码是唯一正确的写法。由于我们使用了 hasOwnProperty，所以这次只输出 moo。如果不使用 hasOwnProperty，则这段代码在原生对象原型（比如 Object.prototype）被扩展时可能会出错。

总结：推荐使用 hasOwnProperty，不要对代码运行的环境做任何假设，不要假设原生对象是否已经被扩展了。

# 总结 #

原型极大地丰富了我们的开发代码，但是在平时使用的过程中一定要注意上述提到的一些注意事项。