@zhangguixu/advanced

# JavaScript 高级技巧

## 一、高级函数

### 1-1 安全的类型检测

**JavaScript内置的类型检测并非完全可靠**

在<a href='../best practice/compare'>best practice/compare</a>中有详细说明。

### 1-2 作用域安全的构造函数

在全局作用域内调用函数构造函数，由于没有使用new，导致在全局作用域添加冗余的属性

```javascript
//Global
function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
}
//没有使用new
var person = Person('zhang',26,'font-end');

console.log(window.name);//'zhang'
console.log(window.age);//26
```

*这个问题是由this对象的晚绑定造成的*

因此，需要在函数里面`确认this对象是正确类型的实例`：

```javascript
function Person(name){
    if(this instanceof Person){
    this.name = 'zhang';
    } else {
        return new Person(name)
    }
}
```

### 1-3 惰性载入函数

惰性载入表示函数执行的分支只会在函数第一次调用的时候执行，在第一次调用过程中，该函数会被覆盖为另一个按照合适方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支。

**应用场景**

实现事件注册函数，由于各浏览器之间的差异，不得不在用的时候做能力检测，单从功能上讲，已经做到了兼容浏览器，但美中不足的是，每次绑定监听，都会再进行一次检测，这在真实的环境中，显然是多余的，同一个应用环境中，其实只需要检测一次即可。

**注意点**

1. 应用越频繁，越能体现这种模式的优势所在

2. 固定不变，一次判定，在固定的应用环境中不会改变

3. 复杂的分支判断，没有差异性，不需要应用这种模式

<a href="../developing javascript web applications/model/ajax.js">代码示例</a>

### 1-4 函数绑定

这个技巧常常和回调函数与事件处理一起使用，以便在将函数作为变量传递的同时保留代码执行环境。

很多JavaScript库实现了一个可以将函数绑定到指定环境的函数，这个函数一般都叫做bind()。一个简单的bind()函数接受一个函数和一个环境，并返回一个给的环境中调用给定函数的函数，并且将所有参数原封不动传递过去。这个函数返回的是一个`闭包`。

```javascript
function bind(fn,context){
    return function(){
        fn.apply(context,arguments);
    };
}
```

ECMAScript5为所有函数定义了一个原生的bind()方法，进一步简单了操作。

### 1-5 函数柯里化

函数柯里化（function currying），它用于创建已经设置好了一个或多个参数的函数。它是与函数绑定紧密相关的主题。

**创建柯里化函数**

调用另一个函数，并为它传入要柯里化的函数和必要参数。

```javascript
function curry(fn){
    var args = Array.prototype.slice.call(arguments,1);
    return function(){
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs= args.concat(innerArgs);
        return fn.apply(null,finalArgs);
    }
};
```

示例：创建一个第一个参数绑定为3的add()的柯里化的版本

```javascript
function add(n1,n2){return n1 + n2;}
var curriedAdd = curry(add,3);
console.log(curriedAdd(5));//8
```

**柯里化与函数绑定的结合**

函数柯里化常常作为函数绑定的一部分包含在其中，构造出更为复杂的bind()函数。

```javascript
function bind(fn,context){
    var args = Array.prototype.slice.call(arguments,1);
    return function(){
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs = args.concat(innerArgs);
        return fn.apply(context,finalArgs);
    }
}
```

这样的bind()函数不仅可以返回绑定给定环境的函数，并且可能绑定其中的某些函数参数

*ECMAScript5的bind()方法实现了函数柯里化。*

**注意**

无论是柯里化函数或是绑定函数，都会带来额外的开销，所以不应滥用。

## 二、防篡改对象

JavaScript共享的本质一直是开发人员心头的痛，因为任何对象都可以被在同一个环境中运行的代码修改。

ECMAScript5致力于解决这个问题，可以让开发人员定义防篡改对象（tamper-proof object）。它的原理就是通过设置每个属性的

* [\[Configurable\]]

* [\[Writable\]]

* [\[Enumerable\]]

* [\[Value\]]

* [\[Get\]]

* [\[Set\]]

### 2-1 不可扩展对象

**Object.preventExtensions(o)**

可以使得不能在给对象添加属性和方法

**Object.isExtensible(o)**

确定对象是否可以扩展

```javascript
var person = {name:'zhang'};
Object.isExtensible(person); //true
Object.preventExtensions(person);
Object.isExtensible(person);//false
```

### 2-1 密封的对象

**Object.seal(o)**

密封对象不可扩展，而且已有成员的`[[Configurable]]`特性被设置为false，意味着不能删除属性和方法。

**Object.isSealed(o)**

检测是否被密封了

```javascript
var person = {name:'zhang'};
Object.isSealed(person);//false
Object.seal(person);
Object.isSealed(person);//true
Object.isExtensible(person);//false
```

### 2-3 冻结的对象

**Object.freeze(o)**

最严格的防篡改级别就是冻结对象（frozen object）。冻结的对象不能扩展，又是密封的，而且对象属性的`[[Writable]]`特性会被设置为false。

如果定义了`[[Set]]`函数，访问器属性仍然是可写的。

**Object.isFrozen(o)**

```javascript
var person = {name:'zhang'};
Object.freeze(person);
Object.isFrozen(person);//true
Object.isSealed(person);//true
Object.isExtensible(person);//false
```

## 三、高级定时器

要理解setTimeout()和setInterval()，必须结合<a href="./event-loop.md">Event Loop</a>

### 3-1 重复的定时器

setInterval有两个问题：

1. 某些间隔会被跳过
2. 多个定时器的代码执行之间的间隔可能会比预期的小

为了避免setInterval()的重复定时器的2个缺点，可以使用链式的setTimeout()调用

```javascript
setTimout(function(){
    //处理中

    setTimeout(arguments.callee,interval);

},interval);
```

这种写法可以保证在下一次定时器代码执行之前，至少要等到指定的间隔，避免了连续的运行。

### 3-2 Yielding Processes

浏览器在JavaScript运行时间上采取了限制,此类限制有两个

1. 调用栈尺寸限制
2. 长时间脚本限制（50ms以上）

在任何一种情况下，创建一个定时器造成UI线程暂停，如同它从一个任务切换到下一个任务。因此，`定时器代码复位所有相关的浏览器限制`，包括长运行脚本时间。此外，调用栈也在定时器代码中复位为零。这一特性使得定时器成为长运行JavaScript代码理想的跨浏览器解决方案。

例如在处理大规模的数组的时候，可以采用下列的方式来进行处理。

```javascript
function timedProcessArray(items,process,callback){
    var todo=items.concat();
    setTimeout(function(){
        var start=+new Date(); //小技巧，new Date()和+new Date()是不一样的
        do{
            process(todo.shift())  //进行批处理
        }while(todo.length>0&&(+new Date()-start)<50);

        if(todo.length>0){
            setTimeout(arguments.callee,25);
        }else{
            callback(items);
        }
    },25);
}
```

### 3-3 函数节流

函数节流是保证函数不要过于频繁并且在不超过规定时间内执行。

<a href="../blog/skill/throttle.md">详细解释</a>

## 四、自定义事件

基于`观察者模式`的一种创建松散耦合代码的技术。使用自定义事件有助于`解耦`相关对象，保持功能的隔绝。

```javascript
function EventTarget(){
    this.handlers = {};
}

EventTarget.prototype = {
    constructor : EventTraget,
    addHandler : function(type,handler){
        if(typeof this.handlers[type] === 'undefined'){
            this.handlers[type] = [];
        }
        this.handlers[type].push(handler);
    },
    fire : function(event){
        if(!event.target){
            event.target = this;
        }
        if(this.handlers[type] instanceof Array){
            var handlers = this.handlers[event.type];
            for(var i = 0,len = handlers.length; i < len; i++){
                handlers[i](event);//执行回调函数
            }
        }
    },
    removeHandler : function(type,handler){
        if(this.handlers[type] instanceof Array){
            var handlers = this.handlers[type];
            for(var i = 0,len = handlers.length; i < len; i++){
                if(handlers[i] === handler){
                    break;
                }
            }
            handlers.splice(i,1);//删除
        }
    }
}
```