高階函式

1.安全的型別檢測

        談到型別檢測，可能大家首先想到的就是typeof 或者 instanceof (檢測陣列Array.isArray(arr))等這些方式，但是這些方法都有自己的侷限性，比如說Safari（直至第四版）對正則使用typeof會返回function,instanceof必須要在同一個作用域下，還有現在瀏覽器開始支援原生JSON物件了（Douglas Crockford定義了一個全域性JSON物件），於是檢測物件是不是原生就又變得困難了 。

         大家可能想到了一個物件的建構函式名和作用域是無關的，於是就可以使用以下方式判斷(比如說陣列)：

function isArray(obj){
    return Object.prototype.toString.call(obj) == "[object Array]";
}

        像這樣，可以判別建構函式名是否為 [object Array],[object Function],[object RegExp],[object JSON]來判定各種型別

2.作用域安全的建構函式

         建構函式就是一個使用New操作符呼叫的函式，只有使用New呼叫時，建構函式裡面的this物件才會指向例項，如果像如下呼叫：

function Student(name,age){
    this.name = name;
    this.age = age;
}
var Tom = Student('Tom',12);
 

訪問Tom.name是未定義的，這是因為此時的this指向了window,訪問window.name就會得到'Tom'。其實很多時候我們會忘掉使用New操作符去例項化一個物件，造成this晚繫結。如果想避免這種問題就需要使用如下構造方式：

function Student(name,age){
    if( this instanceof Student){
        this.name = name;
        this.age = age;
    } else {
        return new Student(name,age);
    }
}

當然，這樣雖然避免了this晚繫結的問題，但是鎖定了可以使用該建構函式的環境，當你想要使用構造i函式竊取模式的繼承且不使用原型鏈，那麼這個繼承就會無效，例如：

function Student(name,age){
    if( this instanceof Student){
        this.name = name;
        this.age = age;
    } else {
        return new Student(name,age);
    }
}

function Xueba(name,age,score){
    Student.call(this,name,age);
    this.score = score;
}

var Tom = new Xueba('Tom',12,99);
console.log(Tom.name);

發現name和age並沒有被繼承，因為Xueba並非Student的例項。要解決這個問題只需要讓Xueba成為Student的例項即可

Xueba.prototype = new Student();

3.惰性載入函式

        因為各個瀏覽器之間的差異，多數的js程式碼中包含了很多if語句，重複的執行大量的if語句是很耗費資源的，於是就有了解決方法：惰性載入。何為惰性載入呢，直白說就是在第一次執行的時候得到結果，以後再執行就直接呼叫第一次獲取的結果使用。惰性載入有兩種載入方式：在第一次呼叫的時執行，在頁面首次載入時執行，至於那種方法更合適，就要看你的具體需求而定了。舉個簡單的栗子：

 function getInnerText(element){
            if(typeof element.textContent == "String"){
                return element.textContent;
            } else {
                return element.innerText;
            }
        }

（請忽略這裡的判斷很少，就當他的if語句很多且每個if裡面的邏輯很多)每次呼叫都會進行一次判斷，再看看下面的程式碼

function getInnerText(element){
            if(typeof element.textContent == "String"){
                getInnerText = function(element){
                    return element.textContent;
                }
            } else {
                getInnerText = function(element){
                    return element.innerText;
                } 
            }
            return getInnerText(item);
        }

第一次呼叫以上兩者都會進行判斷，但是不同的是，第二種在第一次掉用後就不需要再次判斷了，直接返回結果。假設處於大量判斷的程式碼中，後者是不是就節省了資源（廢話一句，可能會有人說，這點資源對於人的感知來說壓根感覺不到，但是你想想如果有很多這樣類似的判定呢），另外一種寫法就是在宣告函式的時候就指定適當的函式

var element = document.getElementById("there");
var getInnerText = (function(){
    if(typeof element.textContent == "String"){
          return function(element){
                return element.textContent;
          };
     } else {
          return function(element){
                 return element.innerText;
           } 
     }
      return getInnerText(item);
})();
console.log(getInnerText(element));

4.函式繫結

              簡單來說就是在特定的環境中以指定引數呼叫另一個函式，先看個例子

var handler = {
    msg: "233",
    handleClick: function(event){
        console.log(this.msg);
    }
}

var btn = document.getElementById("my-btn");
btn.addEventListener('click',handler.handleClick,false);

為什麼點選後顯示的是undefine而不是233 ？此時的handler裡的this指向了window，這裡我們可以用閉包來解決這個問題

var handler = {
   msg: "233",
   handleClick: function(event){
      console.log(this.msg);
   }
}

var btn = document.getElementById("my-btn");
btn.addEventListener('click',function(event){handler.handleClick(event);},false);

雖然問題解決了，但是有時候閉包會增大程式碼的理解以及除錯難度。ECMAScript5為所有函式定義了一個原生的bind()方法，它接受一個函式和一個環境，並返回一個在給定環境中呼叫給定函式的函式，並將所有引數傳遞過去，可能有一些繞口，我們來看一個例子

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

bind函式的作用就是在閉包中使用apply呼叫傳入的函式，並傳遞context物件和引數，當呼叫返回函式時，就會在給定環境中執行被傳入的函式並給出所有引數。使用方式如下

function bind(fn,context){
    return function(){
         return fn.apply(context,arguments);
     }
}
var handler = {
     msg: "233",
      handleClick: function(event){
             console.log(this.msg);
      }
}

var btn = document.getElementById("my-btn");
btn.addEventListener('click',bind(handler.handleClick,handler),false);

上面的bind函式只是為了大家方便理解才寫出來的，在ECMAScript5中無需我們定義就可直接使用，如下

var handler = {
   msg: "233",
   handleClick: function(event){
        console.log(this.msg);
   }
}

var btn = document.getElementById("my-btn");
btn.addEventListener('click',handler.handleClick.bind(handler),false);

此時被繫結的函式要比普通函式有更多的開銷，他們主要用於事件處理程式以及SetTimeout，setInterval等，請在必要時使用。

5.函式柯里化

          函式的柯里化和函式的繫結精密相關，使用方式也是一樣的，兩者的區別在於前者的函式被呼叫時，還需要傳入一些引數。bind()方法也實現了函式柯里化，例如

var handler = {
    msg: "233",
    handleClick: function(name,event){
       console.log(this.msg+":"+name+":"+event.type);
    }
}

var btn = document.getElementById("my-btn");
btn.addEventListener("click",handler.handleClick.bind(handler,"hello"),false);

防篡改物件

          js共享的本質一直讓我們有些頭疼，多人開發的專案，你一不小心就修改了別人的程式碼，甚至是用非相容重寫原生物件。當然你可以通過屬性的[[Configurable]],[[Writeable]]等特性改變屬性的行為，但是這裡還有更簡單的方法。

1.不可擴充套件物件（Object.preventExtensions(obj)）

         一般的物件都是可以擴充套件的，也就是說任何物件都允許新增屬性和方法，但是使用Object.preventExtensions()方法可以改變這個行為

var person = {
    name: "Bob",
    age: 12
};
person.score= 99;
console.log(person);
Object.preventExtensions(person);
person.job = "student";
console.log(person);

你會發現呼叫了Object.preventExtensions()方法後，就不能新增屬性了，但是對於已經存在的屬性，我們依舊可以修改或者刪除

var person = {
    name: "Bob",
    age: 12
};
person.score= 99;
console.log(person);

Object.preventExtensions(person);
person.job = "student";
console.log(person);

person.age= 23;
console.log(person);

delete person.age;
console.log(person);

使用Object.isExtensible(person)可以判定person這個物件是否可以擴充套件（可擴充套件返回true,反之false）

2.密封物件(Object.seal(obj))

          ECMAScript5定義的第二個級別就是密封物件，密封物件不可擴充套件，已有成員的[[Configurable]]已經被設為false,這意味著不能刪除屬性和方法，但是依然能修改已有屬性,使用方式和第一個一樣。使用Object.isSealed()方法判斷物件是否密封了，被密封了的會返回true.注意，因為密封物件是不可擴充套件的，所以密封了的物件呼叫Object.isExtensible()會返回false

3.凍結物件（Object.freeze(obj)）

         最嚴格的就是凍結物件，凍結物件既不可擴充套件，又是密封，且[[Writeable]]特性定位false,凍結了的物件只可讀,使用方式和第一個一樣。使用Object.isFrozen()可以檢測凍結物件，凍結了的物件返回true, 注意凍結物件既是不可擴充套件也是密封的，可以呼叫Object.isSealed()和Object.isExtensible()方法

注意：凍結一個物件，只是一種淺凍結，對於物件裡的特殊元素，比如陣列，物件等依然可以操作。例如

const teacher = Object.freeze({
    name: "Bob",
    age: 21,
    grade: [2,2,2,3,4]
})
teacher.name = "www";
teacher.grade.push(6);//物件的淺凍結
console.log(teacher);

grade依然可以新增元素。如果你想所有凍結（深凍結），可以參考以下方式

var constantize = function(obj){
    Object.freeze(obj);
    Object.keys(obj).forEach((key,i)=>{
        if(typeof obj[key] === 'object'){
            constantize(obj[key]);
        }
    });
}
const teacher2 = {
    name: "Bob",
    age: 21,
    grade: [2,2,2,3,4]
}
constantize(teacher2);
teacher2.name = "www";
teacher2.grade.push(6);//有些會報錯，有些回忽略
console.log(teacher2);