本文實(shí)例講述了JavaScript面向?qū)ο笾薪涌趯?shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、蘭溪ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的蘭溪網(wǎng)站制作公司

接口是面向?qū)ο缶幊痰幕A(chǔ)，它是一組包含了函數(shù)型方法的數(shù)據(jù)結(jié)構(gòu)，與類(lèi)一樣，都是編程語(yǔ)言中比較抽象的概念。比如生活中的接口，機(jī)頂盒，人們利用它來(lái)實(shí)現(xiàn)收看不同頻道和信號(hào)的節(jié)目，它猶如對(duì)不同類(lèi)型的信息進(jìn)行集合和封裝的設(shè)備，最后把各種不同類(lèi)型的信息轉(zhuǎn)換為電視能夠識(shí)別的信息。在編程語(yǔ)言中的接口，實(shí)際上是不同類(lèi)的封裝并提供統(tǒng)一的外部聯(lián)系通道，這樣其他對(duì)象就可以利用接口來(lái)調(diào)用不同類(lèi)的成員了。

——整理自《jQuery開(kāi)發(fā)從入門(mén)到精通》

接口的概念

構(gòu)造函數(shù)(類(lèi))是具體的實(shí)現(xiàn)，接口是類(lèi)的約定。API接口(應(yīng)用程序接口)、人機(jī)交互接口、電源接口、USB接口等雖然用途不同，功能各異，但是都包含一個(gè)共同的特性：約定、規(guī)范?？梢哉f(shuō)，接口就是一張契約和合同，它約定了設(shè)計(jì)者和使用者都必須遵循的要求。

接口承諾了具體類(lèi)應(yīng)該事先的功能。

舉一個(gè)很有必要的例子，在java中實(shí)現(xiàn)接口，比如下面的代碼：

interface Base{
 void function1();
 void function2();
 void function3();
}

Base接口承諾了3個(gè)基本功能：function1()、function2()、function3()。這個(gè)接口就像是一份合同，在甲方(調(diào)用類(lèi)的用戶)和乙方(定義類(lèi)的開(kāi)發(fā)人員)之間約定。

乙方負(fù)責(zé)實(shí)現(xiàn)接口約定的功能。功能的實(shí)現(xiàn)就是所謂的類(lèi)。如下實(shí)例：

class App implements Base  // 定義一個(gè)App類(lèi)，用這個(gè)類(lèi)來(lái)實(shí)現(xiàn)接口Base

類(lèi)App將遵照接口的約定。專(zhuān)業(yè)來(lái)說(shuō)就是，應(yīng)用類(lèi)App繼承Base接口類(lèi)。

它的具體實(shí)現(xiàn)如下：

class App implements Base{
 void function1(){
  System.out.println("I am fun1");
 }
 void function2(){
  System.out.println("I am fun2");
 }
 void function3(){
  System.out.println("I am fun3");
 }
}

這樣，乙方實(shí)現(xiàn)了這個(gè)接口，而甲方也應(yīng)該來(lái)按照接口的約定去使用類(lèi)App就行了。

所以說(shuō)，接口(interface)和類(lèi)(class)，實(shí)際上都是相同的數(shù)據(jù)結(jié)構(gòu)。

在接口中可以聲明屬性，方法，事件，類(lèi)型，但不能聲明變量，且不能設(shè)置被聲明成員的具體值(功能實(shí)現(xiàn))。

也就是說(shuō)，接口只能定義成員，不能給定義的成員賦值。而接口作為它的繼承類(lèi)或派生類(lèi)的約定，繼承類(lèi)或派生類(lèi)共同完成接口屬性、方法、事件、類(lèi)型的實(shí)現(xiàn)。在接口和實(shí)現(xiàn)類(lèi)之間，不管是方法名還是屬性調(diào)用順序上都應(yīng)保持一致。

接口的目的就是約束編碼，促使代碼規(guī)范，對(duì)于強(qiáng)類(lèi)型語(yǔ)言是必須的，也是非常重要的環(huán)節(jié)。但是對(duì)于JavaScript弱類(lèi)型語(yǔ)言來(lái)說(shuō)，嚴(yán)格的類(lèi)型檢查會(huì)束縛JavaScript的靈活性。很多前端開(kāi)發(fā)人員根本不用接口，但不會(huì)影響腳本的設(shè)計(jì)。

使用接口的好處：降低對(duì)象間的耦合度，提高代碼的靈活性。學(xué)會(huì)使用接口，能夠讓手中的函數(shù)變得靈巧，這在大型開(kāi)發(fā)中是很重要的。

對(duì)于JavaScript來(lái)說(shuō)，本身不支持接口功能，沒(méi)有提供內(nèi)置方法。但是人工設(shè)計(jì)一個(gè)額外的接口程序，又會(huì)對(duì)程序的性能產(chǎn)生影響。項(xiàng)目越大，這種開(kāi)銷(xiāo)越大。所以，用不用接口可以遵循兩個(gè)條件：

① 項(xiàng)目大小，如果是一個(gè)框架，使用接口在一定程度上會(huì)提高程序的性能。如果是簡(jiǎn)單的應(yīng)用，就不必使用接口了。

② 如果對(duì)JavaScript接口比較熟練，多用接口也可以，如果擔(dān)心過(guò)多使用接口影響性能，則可以在考慮產(chǎn)品發(fā)布前，清除接口功能模塊，或者設(shè)置接口的執(zhí)行條件。防止它被頻繁執(zhí)行，影響性能。

接口的實(shí)現(xiàn)

JavaScript中并不支持接口，但是我們可以模仿其他語(yǔ)言，來(lái)定義接口。

下面來(lái)規(guī)劃接口結(jié)構(gòu)的設(shè)計(jì)和檢測(cè)功能的實(shí)現(xiàn)：

(1) 設(shè)計(jì)一個(gè)接口輔助的類(lèi)結(jié)構(gòu)，這個(gè)構(gòu)造函數(shù)相當(dāng)于一個(gè)過(guò)濾器，用于在接口實(shí)例化過(guò)程中，檢測(cè)初始化參數(shù)是否合法。如果符合接口設(shè)計(jì)標(biāo)準(zhǔn)，則把第2個(gè)參數(shù)中每個(gè)方法名和參數(shù)個(gè)數(shù)以數(shù)組元素的形式輸入接口內(nèi)部屬性methods。在輸入前分別檢測(cè)每個(gè)參數(shù)類(lèi)型是否符合規(guī)定。同時(shí)檢查參數(shù)是否存在殘缺，并即時(shí)以0補(bǔ)齊參數(shù)。

function Interface(name,methods){ // 接口輔助類(lèi)，參數(shù)包括接口實(shí)例的名稱(chēng)和方法集
 if(arguments.length!=2){ // 如果參數(shù)個(gè)數(shù)不等于2，拋出異常。
  throw new Error('標(biāo)準(zhǔn)接口約定，需要兩個(gè)參數(shù)');
 }
 this.name = name; // 存儲(chǔ)第一個(gè)參數(shù)值，實(shí)例化后就是接口實(shí)例的名稱(chēng)
 this.methods = []; // 接口實(shí)例的方法存儲(chǔ)器
 if(methods.length < 1){ // 如果第二個(gè)參數(shù)的元素個(gè)數(shù)為0，說(shuō)明是空數(shù)組，拋出異常。
  throw new Error('接口的第二個(gè)參數(shù)不能為空');
 }
 for(var i = 0; i < methods.length; i++){ // 開(kāi)始對(duì)第2個(gè)參數(shù)的元素進(jìn)行遍歷檢測(cè)
  var item = methods[i];
  if(typeof item[0] !== 'string') { // 如果第二個(gè)參數(shù)的第一個(gè)元素不是string類(lèi)型，拋出異常
   throw new Error("接口約定的第一個(gè)參數(shù)應(yīng)為字符串");
  }
  if(item[1]&&typeof item[1] !== 'number'){ // 如果第二個(gè)參數(shù)有第二個(gè)元素，且第二個(gè)元素不是number類(lèi)型，拋出異常
   throw new Error('接口約定的第個(gè)參數(shù)應(yīng)為數(shù)值');
  }
  if(item.length == 1){ // 如果第二個(gè)參數(shù)只有一個(gè)元素，那么手動(dòng)給它添加第二個(gè)元素 0
   item[1] = 0;
  }
  this.methods.push(item); // 把符合規(guī)定的方法存儲(chǔ)到數(shù)組存儲(chǔ)器中。
 }
}

(2) 為接口輔助類(lèi) Interface 定義一個(gè)方法 implements，該方法將檢測(cè)實(shí)現(xiàn)類(lèi)是否符合接口實(shí)例的約定。它至少包含兩個(gè)參數(shù)，第1個(gè)參數(shù)o表示實(shí)現(xiàn)類(lèi)，第2個(gè)參數(shù)及其后面的參數(shù)表示該類(lèi)將要實(shí)現(xiàn)的接口標(biāo)準(zhǔn)。也就是說(shuō)，可以為一個(gè)類(lèi)指定多個(gè)接口約定，這樣就可以更靈活的分類(lèi)設(shè)計(jì)接口實(shí)例。然后遍歷第二個(gè)及其后面的所有參數(shù)，在循環(huán)結(jié)構(gòu)中，先潔廁接口是否為接口標(biāo)準(zhǔn)的實(shí)例，否則就會(huì)拋出異常。再?gòu)慕涌趯?shí)例的方法存儲(chǔ)器中逐一讀取方法名，填入類(lèi)中來(lái)驗(yàn)證類(lèi)的方法是否符合接口實(shí)例設(shè)置的標(biāo)準(zhǔn)，驗(yàn)證包括方法名、function類(lèi)型和參數(shù)個(gè)數(shù)。如果有問(wèn)題，立即拋出異常。

Interface.implements = function(o){ // 用于檢測(cè)類(lèi)方法是否符合接口實(shí)例的約定 ，此處的o,將來(lái)會(huì)是類(lèi)中的this
 if(arguments.length<2){ // 檢測(cè)該方法傳遞的數(shù)值是否符合規(guī)定
  throw new Error("接口約定類(lèi)應(yīng)包含至少兩個(gè)參數(shù)。");
 }
 for(var i=1;i<arguments.length; i++){ // 遍歷檢測(cè)類(lèi)所遵循的實(shí)例是否合法
  var interface = arguments[i]; // 這里interface表示接口的實(shí)例對(duì)象。
  if(interface.constructor !== Interface){
   throw new Error('從第2個(gè)以上的參數(shù)必須為接口實(shí)例');
  }
  for(var j=0;j<interface.methods.length;j++){ // 檢測(cè)類(lèi)方法是否符合接口實(shí)例的約定
   var method = interface.methods[j][0];
   if(!o[method] || typeof o[method] !== 'function' || o[method].length!==interface.methods[j][1]) {
    throw new Error("該實(shí)現(xiàn)類(lèi)沒(méi)能履行" + interface.name + "接口方法" + method + "約定");
   }
  }
 }
}

(3) 實(shí)例化接口標(biāo)準(zhǔn)，Interface 接口僅僅是個(gè)構(gòu)造函數(shù)，也就是個(gè)框架協(xié)議，還沒(méi)有制定類(lèi)應(yīng)該遵循的具體標(biāo)準(zhǔn)?？蚣軈f(xié)議中，已經(jīng)設(shè)計(jì)好了監(jiān)測(cè)邏輯，一旦實(shí)例化接口，并指明類(lèi)應(yīng)遵守的約定，那么應(yīng)用該標(biāo)準(zhǔn)的實(shí)例的類(lèi)就必須準(zhǔn)守。下面根據(jù)Interface接口標(biāo)準(zhǔn)定義了6個(gè)具體的接口實(shí)例。

// 設(shè)置接口的不同實(shí)現(xiàn)實(shí)例
var Get = new Interface("Get",[["get",0]]);
var Set = new Interface("Set",[["set",1]]);
var Saying = new Interface("Saying",[["saying",1]]);
var Base = new Interface("Base",[["get",0],["set",1]]);
var Base1 = new Interface("Base1",[["set",1],["get",0]]);
var Base2 = new Interface("Base2",[["get",0],["set",1],["saying",1]]);

(4) 在類(lèi)中定義應(yīng)該實(shí)現(xiàn)的標(biāo)準(zhǔn)，即類(lèi)應(yīng)該遵循的接口約定。

// 創(chuàng)建一個(gè)木驢類(lèi)
function Neddy(){
 this.name = '';
 Interface.implements(this,Base,Get,Set); // 讓木驢類(lèi)實(shí)現(xiàn)接口的實(shí)例,可以指定多個(gè)，也可以只有一個(gè)。
}
// 按照接口實(shí)例來(lái)定義 兩個(gè)方法get,set
Neddy.prototype.get = function(){
 return this.name;
}
Neddy.prototype.set = function(name){
 this.name = name;
}

(5) 在類(lèi)中設(shè)置了多個(gè)接口實(shí)例，我們來(lái)進(jìn)行檢測(cè)

// 檢測(cè)接口實(shí)現(xiàn)
var neddy = new Neddy();
neddy.set("Testing");
console.log(neddy.get()); // Testing

成功完成接口的應(yīng)用，這里，如果在Neddy類(lèi)中，我們讓它實(shí)現(xiàn)的接口實(shí)例和 Neddy.prototype中給類(lèi)定義的方法不統(tǒng)一，或者接口與接口之間有沖突，就會(huì)拋出異常。比如我們可以修改Neddy中的接口實(shí)現(xiàn)，再給它添加一個(gè)接口實(shí)例Base2，就會(huì)報(bào)異常，因?yàn)槲覀儧](méi)有按照接口的協(xié)議，給Neddy添加saying()方法。

上面的舉例只是用js來(lái)模擬實(shí)現(xiàn)接口功能，在實(shí)際開(kāi)發(fā)中，我們需要根據(jù)不同的需求，開(kāi)發(fā)不同的接口。

擴(kuò)展知識(shí) ：

檢測(cè)函數(shù)的參數(shù)列表一般有三種形式

• ① arguments.callee.length
• ② 函數(shù)名.length
• ③ arguments.length

其中 ① 和 ② 是一樣的，③ 視具體情況而定。
一般函數(shù)聲明式的定義有個(gè)默認(rèn)屬性name繼承自O(shè)bject ，舉例如下：

function fn(x,y){
  console.log(fn.name); // fn
  console.log(arguments.callee.name); // fn
  console.log(fn.length); // 2
  console.log(arguments.callee.length); // 2
  console.log(arguments.length); // 視具體情況而定
}
fn(1,2,3); // 分別輸出 fn fn 2 2 3

為了說(shuō)明上面接口檢測(cè)參數(shù)長(zhǎng)度 o[method].length  的問(wèn)題 ，舉例如下：

function A(){}
A.prototype.say = function (x,y,z,o) {}
var a = new A();
console.log(a['say'].length); // 4

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

網(wǎng)頁(yè)名稱(chēng)：JavaScript面向?qū)ο笾薪涌趯?shí)現(xiàn)方法詳解
網(wǎng)頁(yè)地址：http://chinadenli.net/article2/ppdpic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、用戶體驗(yàn)、網(wǎng)站導(dǎo)航、標(biāo)簽優(yōu)化、面包屑導(dǎo)航、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)