欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談js中的三種繼承方式及其優(yōu)缺點(diǎn)

 更新時(shí)間:2016年08月10日 09:22:42   投稿:jingxian  
下面小編就為大家?guī)硪黄獪\談js中的三種繼承方式及其優(yōu)缺點(diǎn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧

第一種,prototype的方式:

//父類 
function person(){ 
  this.hair = 'black'; 
  this.eye = 'black'; 
  this.skin = 'yellow'; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
} 

//子類 
function man(){ 
  this.feature = ['beard','strong']; 
} 

man.prototype = new person(); 
var one = new man(); 

console.log(one.feature); //['beard','strong'] 
console.log(one.hair); //black 
console.log(one.eye); //black 
console.log(one.skin); //yellow 
console.log(one.view()); //black,black,yellow 

這種方式最為簡單,只需要讓子類的prototype屬性值賦值為被繼承的一個(gè)實(shí)例就行了,之后就可以直接使用被繼承類的方法了。

prototype 屬性是啥意思呢? prototype 即為原型,每一個(gè)對象 ( 由 function 定義出來 ) 都有一個(gè)默認(rèn)的原型屬性,該屬性是個(gè)對象類型。

并且該默認(rèn)屬性用來實(shí)現(xiàn)鏈的向上攀查。意思就是說,如果某個(gè)對象的屬性不存在,那么將通過prototype屬性所屬對象來查找這個(gè)屬性。如果 prototype 查找不到呢?

js會自動地找prototype的prototype屬性所屬對象來查找,這樣就通過prototype一直往上索引攀查,直到查找到了該屬性或者prototype最后為空 (“undefined”);

例如上例中的one.view()方法,js會先在one實(shí)例中查找是否有view()方法,因?yàn)闆]有,所以查找man.prototype屬性,而prototype的值為person的一個(gè)實(shí)例,

該實(shí)例有view()方法,于是調(diào)用成功。

第二種,apply的方式:

//父類 
function person(){ 
  this.hair = 'black'; 
  this.eye = 'black'; 
  this.skin = 'yellow'; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
} 

//子類 
function man(){ 
  // person.apply(this,new Array()); 
  person.apply(this,[]); 
  this.feature = ['beard','strong']; 
} 

var one = new man(); 

console.log(one.feature); //['beard','strong'] 
console.log(one.hair); //black 
console.log(one.eye); //black 
console.log(one.skin); //yellow 
console.log(one.view()); //black,black,yellow 

注意:如果apply參數(shù)為空,即沒有參數(shù)傳遞,則通過 new Array() 、[] 來傳遞,null 無效。

第三種,call+prototype的方式:

//父類 
function person(){ 
  this.hair = 'black'; 
  this.eye = 'black'; 
  this.skin = 'yellow'; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
} 

//子類 
function man(){ 
  // person.apply(this,new Array()); 
  person.call(this,[]); 
  this.feature = ['beard','strong']; 
} 

man.prototype = new person(); 
var one = new man(); 

console.log(one.feature); //['beard','strong'] 
console.log(one.hair); //black 
console.log(one.eye); //black 
console.log(one.skin); //yellow 
console.log(one.view()); //black,black,yellow 

call方式的實(shí)現(xiàn)機(jī)制卻要多一條 man.prototype = new person(); 為啥呢?
那是因?yàn)閏all方法只實(shí)現(xiàn)了方法的替換而沒有作對象屬性的復(fù)制操作。
google Map API 的繼承就是使用這種方式。

上面總結(jié)了三種繼承方式的實(shí)現(xiàn)。但是每種方法都有其優(yōu)缺點(diǎn)。

假如父類是這樣的:

//父類 
function person(hair,eye,skin){ 
  this.hair = hair; 
  this.eye = eye; 
  this.skin = skin; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
} 

子類應(yīng)該如何設(shè)計(jì),使子類man在創(chuàng)建對象的同時(shí)傳遞參數(shù)到父類person,prototype的繼承方式就不適用了,
必須采用apply或者call的方式了:

//apply方式 
//子類 
function man(hair,eye,skin){ 
  person.apply(this,[hair,eye,skin]); 
  this.feature = ['beard','strong']; 
} 
//call方式 
//子類 
function man(hair,eye,skin){ 
  person.call(this,hair,eye,skin); 
  this.feature = ['beard','strong']; 
} 

但是用apply方法也還是有缺點(diǎn)的,為什么?在js中,我們有個(gè)非常重要的運(yùn)算符就是”instanceof”,該運(yùn)算符用來比較某個(gè)對向是否為某種類型。

對于這個(gè)例子,one實(shí)例除了是man類型,也應(yīng)該是person類型,但是apply方式繼承之后,one卻不屬于person類型,即(one instanceof person)的值為false。

經(jīng)此種種,最好的繼承方式就是call+prototype方式了,之后你可以試一下(one instanceof BaseClass)的值是否為true。

第三種繼承方式也有缺陷:子類new對象時(shí)要傳一遍父類所需的參數(shù),而且會重現(xiàn)父類中的屬性和方法,下面這種繼承方式才是完善的:

function Person(name){   
  this.name = name; 
} 

Person.prototype.getName = function() { 
  return this.name; 
} 

function Chinese(name, nation) { 
  Person.call(this, name); 
  this.nation = nation; 
} 

//繼承方法 
function inherit(subClass, superClass) { 
  function F() {} 
  F.prototype = superClass.prototype; 
  subClass.prototype = new F(); 
  subClass.prototype.constructor = subClass.constructor; 
} 

inherit(Chinese, Person); 

Chinese.prototype.getNation = function() { 
  return this.nation; 
}; 

var p = new Person('shijun'); 
var c = new Chinese("liyatang", "China"); 

console.log(p); // Person {name: "shijun", getName: function} 
console.log(c); // Chinese {name: "liyatang", nation: "China", constructor: function, getNation: function, getName: function} 


console.log(p.constructor); // function Person(name){} 
console.log(c.constructor); // function Chinese(){} 

console.log(c instanceof Chinese); // true 
console.log(c instanceof Person); // true 

以上這篇淺談js中的三種繼承方式及其優(yōu)缺點(diǎn)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • TypeScript中d.ts類型聲明文件的實(shí)現(xiàn)

    TypeScript中d.ts類型聲明文件的實(shí)現(xiàn)

    .d.ts 文件是 TypeScript 的類型聲明文件,它們的主要作用是為 JavaScript 庫提供類型支持,本文主要介紹了TypeScript中d.ts類型聲明文件的實(shí)現(xiàn),感興趣的可以了解一下
    2023-10-10
  • TypeScript中type和interface的區(qū)別及注意事項(xiàng)

    TypeScript中type和interface的區(qū)別及注意事項(xiàng)

    type的類型別用可以用戶其他的類型,比如聯(lián)合類型、元祖類型、基本類型,interface不行,下面這篇文章主要給大家介紹了關(guān)于TypeScript中type和interface的區(qū)別及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • js兼容火狐顯示上傳圖片預(yù)覽效果的方法

    js兼容火狐顯示上傳圖片預(yù)覽效果的方法

    這篇文章主要介紹了js兼容火狐顯示上傳圖片預(yù)覽效果的方法,涉及js調(diào)用FileReader實(shí)現(xiàn)圖片預(yù)覽功能的技巧,需要的朋友可以參考下
    2015-05-05
  • JavaScript ES6中export、import與export default的用法和區(qū)別

    JavaScript ES6中export、import與export default的用法和區(qū)別

    這篇文章主要給大家介紹了JavaScript ES6中export、import與export default的用法和區(qū)別,文中介紹的非常詳細(xì),相信對大家學(xué)習(xí)ES6會有一定的幫助,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-03-03
  • zepto.js中tap事件阻止冒泡的實(shí)現(xiàn)方法

    zepto.js中tap事件阻止冒泡的實(shí)現(xiàn)方法

    這篇文章主要介紹了zepto.js中tap事件阻止冒泡的實(shí)現(xiàn)方法,實(shí)例分析了由冒泡產(chǎn)生的click延遲解決方法,需要的朋友可以參考下
    2015-02-02
  • 奇偶行高亮顯示及鼠標(biāo)劃過高亮顯示類

    奇偶行高亮顯示及鼠標(biāo)劃過高亮顯示類

    奇或偶數(shù)行高亮顯示及鼠標(biāo)莫過高亮顯示,一個(gè)經(jīng)常用到的效果,也能谷歌到大把的這種效果JS,但好像還沒有一個(gè)封裝成類直接用的.想象自己當(dāng)初谷歌這個(gè)類時(shí),還真沒少折騰時(shí)間.
    2010-07-07
  • uni-app做微信小程序的分包處理方法

    uni-app做微信小程序的分包處理方法

    分包指的是把一個(gè)完整的小程序項(xiàng)目,按照不同的需求劃分為不同的子包,在構(gòu)建時(shí)打包成不同的分包,用戶在瀏覽時(shí)按需加載,這篇文章主要介紹了uni-app做微信小程序的分包處理,需要的朋友可以參考下
    2023-02-02
  • 自己實(shí)現(xiàn)ajax封裝示例分享

    自己實(shí)現(xiàn)ajax封裝示例分享

    這篇文章主要介紹了自己實(shí)現(xiàn)ajax封裝示例,需要的朋友可以參考下
    2014-04-04
  • 你必須了解的JavaScript中的屬性描述對象詳解(下)

    你必須了解的JavaScript中的屬性描述對象詳解(下)

    JavaScript提供了一個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu),用來描述對象的屬性,控制它的行為,比如該屬性是否可寫、可遍歷等等。這個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)稱為“屬性描述對象”。本文主要帶大家了解一下JavaScript中你必須了解的屬性描述對象,需要的可以參考一下
    2022-12-12
  • innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等區(qū)別

    innertext , insertadjacentelement , insertadjacenthtml , ins

    innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等區(qū)別...
    2007-06-06

最新評論