javascript函數(shù)中的3個高級技巧

更新時間：2016年09月22日 08:34:41 作者：小火柴的藍色理想

這篇文章主要為大家詳細介紹了javascript函數(shù)中的3個高級技巧,具有一定的參考價值，感興趣的小伙伴們可以參考一下

前面的話

　　函數(shù)對任何一門語言來說都是一個核心的概念，在javascript中更是如此。前面曾以深入理解函數(shù)系列的形式介紹了函數(shù)的相關內容，本文將再深入一步，介紹函數(shù)的3個高級技巧

技巧一：作用域安全的構造函數(shù)

構造函數(shù)其實就是一個使用new操作符調用的函數(shù)

function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
}
var person=new Person('match',28,'Software Engineer');
console.log(person.name);//match

如果沒有使用new操作符，原本針對Person對象的三個屬性被添加到window對象

function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
}     
var person=Person('match',28,'Software Engineer');
console.log(person);//undefined
console.log(window.name);//match

window的name屬性是用來標識鏈接目標和框架的，這里對該屬性的偶然覆蓋可能會導致頁面上的其它錯誤，這個問題的解決方法就是創(chuàng)建一個作用域安全的構造函數(shù)

function Person(name,age,job){
  if(this instanceof Person){
    this.name=name;
    this.age=age;
    this.job=job;
  }else{
    return new Person(name,age,job);
  }
}
var person=Person('match',28,'Software Engineer');
console.log(window.name); // ""
console.log(person.name); //'match'
var person= new Person('match',28,'Software Engineer');
console.log(window.name); // ""
console.log(person.name); //'match'

但是，對構造函數(shù)竊取模式的繼承，會帶來副作用。這是因為，下列代碼中，this對象并非Polygon對象實例，所以構造函數(shù)Polygon()會創(chuàng)建并返回一個新的實例

function Polygon(sides){
  if(this instanceof Polygon){
    this.sides=sides;
    this.getArea=function(){
      return 0;
    }
  }else{
    return new Polygon(sides);
  }
}
function Rectangle(wifth,height){
  Polygon.call(this,2);
  this.width=this.width;
  this.height=height;
  this.getArea=function(){
    return this.width * this.height;
  };
}
var rect= new Rectangle(5,10);
console.log(rect.sides); //undefined

如果要使用作用域安全的構造函數(shù)竊取模式的話，需要結合原型鏈繼承，重寫Rectangle的prototype屬性，使它的實例也變成Polygon的實例

function Polygon(sides){
  if(this instanceof Polygon){
    this.sides=sides;
    this.getArea=function(){
      return 0;
    }
  }else{
    return new Polygon(sides);
  }
}
function Rectangle(wifth,height){
  Polygon.call(this,2);
  this.width=this.width;
  this.height=height;
  this.getArea=function(){
    return this.width * this.height;
  };
}
Rectangle.prototype= new Polygon();
var rect= new Rectangle(5,10);
console.log(rect.sides); //2

技巧二：惰性載入函數(shù)

因為各瀏覽器之間的行為的差異，我們經常會在函數(shù)中包含了大量的if語句，以檢查瀏覽器特性，解決不同瀏覽器的兼容問題。比如，我們最常見的為dom節(jié)點添加事件的函數(shù)

function addEvent(type, element, fun) {
  if (element.addEventListener) {
    element.addEventListener(type, fun, false);
  }
  else if(element.attachEvent){
    element.attachEvent('on' + type, fun);
  }
  else{
    element['on' + type] = fun;
  }
}

每次調用addEvent函數(shù)的時候，它都要對瀏覽器所支持的能力進行檢查，首先檢查是否支持addEventListener方法，如果不支持，再檢查是否支持attachEvent方法，如果還不支持，就用dom0級的方法添加事件。這個過程，在addEvent函數(shù)每次調用的時候都要走一遍，其實，如果瀏覽器支持其中的一種方法，那么他就會一直支持了，就沒有必要再進行其他分支的檢測了。也就是說，if語句不必每次都執(zhí)行，代碼可以運行的更快一些。

解決方案就是惰性載入。所謂惰性載入，指函數(shù)執(zhí)行的分支只會發(fā)生一次

有兩種實現(xiàn)惰性載入的方式

【1】第一種是在函數(shù)被調用時，再處理函數(shù)。函數(shù)在第一次調用時，該函數(shù)會被覆蓋為另外一個按合適方式執(zhí)行的函數(shù)，這樣任何對原函數(shù)的調用都不用再經過執(zhí)行的分支了

我們可以用下面的方式使用惰性載入重寫addEvent()

function addEvent(type, element, fun) {
  if (element.addEventListener) {
    addEvent = function (type, element, fun) {
      element.addEventListener(type, fun, false);
    }
  }
  else if(element.attachEvent){
    addEvent = function (type, element, fun) {
      element.attachEvent('on' + type, fun);
    }
  }
  else{
    addEvent = function (type, element, fun) {
      element['on' + type] = fun;
    }
  }
  return addEvent(type, element, fun);
}

在這個惰性載入的addEvent()中，if語句的每個分支都會為addEvent變量賦值，有效覆蓋了原函數(shù)。最后一步便是調用了新賦函數(shù)。下一次調用addEvent()時，便會直接調用新賦值的函數(shù)，這樣就不用再執(zhí)行if語句了

但是，這種方法有個缺點，如果函數(shù)名稱有所改變，修改起來比較麻煩

【2】第二種是聲明函數(shù)時就指定適當?shù)暮瘮?shù)。這樣在第一次調用函數(shù)時就不會損失性能了，只在代碼加載時會損失一點性能

以下就是按照這一思路重寫的addEvent()。以下代碼創(chuàng)建了一個匿名的自執(zhí)行函數(shù)，通過不同的分支以確定應該使用哪個函數(shù)實現(xiàn)

var addEvent = (function () {
  if (document.addEventListener) {
    return function (type, element, fun) {
      element.addEventListener(type, fun, false);
    }
  }
  else if (document.attachEvent) {
    return function (type, element, fun) {
      element.attachEvent('on' + type, fun);
    }
  }
  else {
    return function (type, element, fun) {
      element['on' + type] = fun;
    }
  }
})();

技巧三：函數(shù)綁定

在javascript與DOM交互中經常需要使用函數(shù)綁定，定義一個函數(shù)然后將其綁定到特定DOM元素或集合的某個事件觸發(fā)程序上，綁定函數(shù)經常和回調函數(shù)及事件處理程序一起使用，以便把函數(shù)作為變量傳遞的同時保留代碼執(zhí)行環(huán)境

<button id="btn">按鈕</button>
<script>      
  var handler={
    message:"Event handled.",
    handlerFun:function(){
      alert(this.message);
    }
  };
btn.onclick = handler.handlerFun;
</script>

上面的代碼創(chuàng)建了一個叫做handler的對象。handler.handlerFun()方法被分配為一個DOM按鈕的事件處理程序。當按下該按鈕時，就調用該函數(shù)，顯示一個警告框。雖然貌似警告框應該顯示Event handled，然而實際上顯示的是undefiend。這個問題在于沒有保存handler.handleClick()的環(huán)境，所以this對象最后是指向了DOM按鈕而非handler

可以使用閉包來修正這個問題

<button id="btn">按鈕</button>
<script>      
var handler={
  message:"Event handled.",
  handlerFun:function(){
    alert(this.message);
  }
};
btn.onclick = function(){
  handler.handlerFun();  
}
</script>

當然這是特定于此場景的解決方案，創(chuàng)建多個閉包可能會令代碼難以理解和調試。更好的辦法是使用函數(shù)綁定
一個簡單的綁定函數(shù)bind()接受一個函數(shù)和一個環(huán)境，并返回一個在給定環(huán)境中調用給定函數(shù)的函數(shù)，并且將所有參數(shù)原封不動傳遞過去

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

這個函數(shù)似乎簡單，但其功能是非常強大的。在bind()中創(chuàng)建了一個閉包，閉包使用apply()調用傳入的函數(shù)，并給apply()傳遞context對象和參數(shù)。當調用返回的函數(shù)時，它會在給定環(huán)境中執(zhí)行被傳入的函數(shù)并給出所有參數(shù)

<button id="btn">按鈕</button>
<script> 
function bind(fn,context){
  return function(){
    return fn.apply(context,arguments);
  }
}     
var handler={
  message:"Event handled.",
  handlerFun:function(){
    alert(this.message);
  }
};
btn.onclick = bind(handler.handlerFun,handler);
</script>

ECMAScript5為所有函數(shù)定義了一個原生的bind()方法，進一步簡化了操作。

只要是將某個函數(shù)指針以值的形式進行傳遞，同時該函數(shù)必須在特定環(huán)境中執(zhí)行，被綁定函數(shù)的效用就突顯出來了。它們主要用于事件處理程序以及setTimeout()和setInterval()。然而，被綁定函數(shù)與普通函數(shù)相比有更多的開銷，它們需要更多內存，同時也因為多重函數(shù)調用稍微慢一點，所以最好只在必要時使用。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: