欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

JavaScript中繼承的用法

這篇文章主要講解了JavaScript中繼承的用法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

成都創(chuàng)新互聯(lián)公司成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元大邑縣做網(wǎng)站,已為上家服務(wù),為大邑縣各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

正統(tǒng)的面相對象的語言都會提供extend之類的方法用于出來類的繼承，但Javascript并不提供extend方法，在Javascript中使用繼承需要用點技巧。

Javascript中的實例的屬性和行為是由構(gòu)造函數(shù)和原型兩部分組成的，我們定義兩個類：Person和zhangsan，它們在內(nèi)存中的表現(xiàn)如下圖1：
JavaScript中繼承的用法
如果想讓Zhangsan繼承Person，那么我們需要把Person構(gòu)造函數(shù)和原型中的屬性和行為全部傳給Zhangsan的構(gòu)造函數(shù)和原型，如下圖2所示：
JavaScript中繼承的用法

Are you Ok？了解了繼承的思路后，那么我們一步步完成Person和Zhangsan的繼承功能。首先，我們需要定義Person類，如下代碼：
[代碼1]

// 定義Person類
function Person (name){
  this.name = name;
  this.type = "人";
}
Person.prototype={
  say : function(){
    console.info("我是一個"+ this.type +"，我的名字叫" + this.name);
  }
}  
//定義Zhangsan類
function Zhangsan (name){
}
Zhangsan.prototype={
  
}

Zhangsan雖然有自己特有的屬性和行為，但它大部分屬性和行為和Person相同，需要繼承自Person類。如前所述，JavaScript中繼承是要分別繼承構(gòu)造函數(shù)和原型中的屬性和行為的。我們先讓Zhangsan繼承Person的構(gòu)造函數(shù)中的行為和屬性，如下代碼：
[代碼2]

// 定義Person類
function Person (name){
  this.name = name;
  this.type = "黃";
}
Person.prototype={
  say : function(){
    console.info("我是一個"+ this.type +"種人，我的名字叫" + this.name);
  }
}  
//定義Zhangsan類
function Zhangsan (name){
  this.name = name;
  this.type = "黃";
}
Zhangsan.prototype={
}
//實例化Zhangsan對象
var zs = new Zhangsan("張三");
console.info(zs.type);  // 黃

運行正常，但我們怎么沒看到繼承的“味道”呢？我們在Zhangsan的構(gòu)造函數(shù)中將Person的屬性和行為復(fù)制了一份，與其說是繼承不如說是“真巧，這兩個類的構(gòu)造函數(shù)除了函數(shù)名不同，其他地方都長得一樣”。她的缺點很明顯：如果Person類的構(gòu)造函數(shù)有任何變動，我們也需要手動的同步修改Zhangsan類的構(gòu)造函數(shù)，同樣一份代碼，我們復(fù)制了一份寫在了程序中 的不同地方，這違法了DRY原則，降低了代碼的可維護性。

好了，讓我們來改進它：
[代碼3]

// 定義Person類
function Person (name){
  this.name = name;
  this.type = "黃";
}
Person.prototype={
  say : function(){
    console.info("我是一個"+ this.type +"種人，我的名字叫" + this.name);
  }
}  
// 定義Zhangsan類
function Zhangsan (name){
  Person(name);
}
Zhangsan.prototype={
}
// 實例化Zhangsan對象
var zs = new Zhangsan("張三");
console.info(zs.type);    // undefined

我們在Zhangsan的構(gòu)造函數(shù)里調(diào)用Person()函數(shù)，希望它內(nèi)部的ths.xxx可以在Zhangsan類的構(gòu)造函數(shù)里執(zhí)行一遍，但奇怪的是，出現(xiàn)“console.info(zs.type);”時，輸出的是undefined，這是怎么回事呢？

這和Person的調(diào)用方式有關(guān)。在JavaScript中，function有兩種不同的調(diào)用方法：

  1. 作為函數(shù)存在，直接用“()”調(diào)用，例如“function test(){}; test();”test被用作函數(shù)，直接被“()”符號調(diào)用。

  2. 作為類的構(gòu)造函數(shù)存在，使用new調(diào)用，例如“function test(){}; new test();”test作為類的構(gòu)造函數(shù)，通過new進行test類的實例化。這兩種方法的調(diào)用，function內(nèi)部的this指向會有所不同---作為函數(shù)的function，其this指向的是window，而作為構(gòu)造函數(shù)的function，其this指向的實例對象。

上面代碼中，Zhangsan類構(gòu)造函數(shù)中的Person是通過函數(shù)方式調(diào)用的，它內(nèi)部的this指向的是window對象，起效果等同于如下代碼：
[代碼4]

// 定義Person類
function Person (name){
  this.name = name;
  this.type = "黃";
}
Person.prototype={
  say : function(){
    console.info("我是一個"+ this.type +"種人，我的名字叫" + this.name);
  }
}  
// 定義Zhangsan類
function Zhangsan (name){
  window.name = name;
  window.type = "黃";
}
Zhangsan.prototype={
}
// 實例化Zhangsan對象
var zs = new Zhangsan("張三");
console.info(zs.type);  // undefined
console.info(type);    // 黃 (window.type可以省略寫成type)

如果想達到[代碼3]的效果，讓Person內(nèi)部this指向Zhangsan類的實例，可以通過call或apply方法實現(xiàn)，如下：
[代碼5]

// 定義Person類
function Person (name){
  this.name = name;
  this.type = "黃";
}
Person.prototype={
  say : function(){
    console.info("我是一個"+ this.type +"種人，我的名字叫" + this.name);
  }
}  
// 定義Zhangsan類
function Zhangsan (name){
  Person.call(this,name);
}
Zhangsan.prototype={
}
// 實例化Zhangsan對象
var zs = new Zhangsan("張三");
console.info(zs.type);    // 黃

構(gòu)造函數(shù)的屬性和行為已經(jīng)成功實現(xiàn)了繼承，接下來我們要實現(xiàn)原型中的屬性和行為的繼承。既然Zhangsan類需要和Person類原型中同樣的屬性和行為，那么能否將Person類的原型直接傳給Zhangsan類的原型，如下代碼：
[代碼6]

// 定義Person類
function Person (name){
  this.name = name;
  this.type = "黃";
}
Person.prototype={
  say : function(){
    console.info("我是一個"+ this.type +"種人，我的名字叫" + this.name);
  }
}  
// 定義Zhangsan類
function Zhangsan (name){
  Person.call(this,name);
}
Zhangsan.prototype = Person.prototype;
// 實例化Zhangsan對象
var zs = new Zhangsan("張三");
// 我是一個黃種人，我的名字叫張三
zs.say();

通過Person類的原型傳給Zhangsan類的原型，Zhangsan類成功獲得了say行為，但事情并不像想象中的那么簡單，如果我們要給Zhangsan類添加run行為呢？如下代碼：
[代碼7：添加run行為]

// 定義Person類
function Person (name){
  this.name = name;
  this.type = "黃";
}
Person.prototype={
  say : function(){
    console.info("我是一個"+ this.type +"種人，我的名字叫" + this.name);
  }
}  
// 定義Zhangsan類
function Zhangsan (name){
  Person.call(this,name);
}
Zhangsan.prototype = Person.prototype;
Zhangsan.prototype.run = function(){
  console.info("我100米短跑只要10秒！");
}
// 實例化Zhangsan對象
var zs = new Zhangsan("張三");
zs.say();  // 我是一個黃種人，我的名字叫張三
zs.run();  //我100米短跑只要10秒！
var zs2 = new Person("張三2");
zs2.run();  //我100米短跑只要10秒！

我們只想給Zhangsan類添加run行為，為什么Person類也獲得了run行為了呢？這涉及傳值和傳址的兩個問題----在JavaScript中，賦值語句會用傳值和傳地址兩種不同的方式進行賦值，如果是數(shù)值型、不爾型、字符型等基本數(shù)據(jù)類型，在進行賦值時會將數(shù)據(jù)直接賦值一份，將賦值的那一份數(shù)據(jù)進行賦值，也就是通常所說的傳值；如果是數(shù)組、hash對象等復(fù)雜數(shù)據(jù)類型，在進行賦值時會直接用內(nèi)存地址賦值，而不是將數(shù)據(jù)賦值一份，這就是傳址賦值，就是傳數(shù)據(jù)的映射地址。
[代碼8：傳值與傳址]

var a=10;    // 基本數(shù)據(jù)類型
var b=a;    // 將變量a保存的值賦值一份，傳給變量b，b和a各保存一份數(shù)據(jù)
var c=[1,2,3];  // 復(fù)雜數(shù)據(jù)類型
var d=c;    // 將變量c指向的數(shù)據(jù)內(nèi)存地址傳給變量d，c和d指向同一份數(shù)據(jù)
b++;
d.push(4);
console.info(a);  // 10
console.info(b);  // 11    變量b保存的數(shù)據(jù)更改不會影響到變量a
console.info(c);  // 1,2,3,4  變量c和d指向同一份數(shù)據(jù)，數(shù)據(jù)更改會相互影響
console.info(d);  // 1,2,3,4

在原生JavaScript中，選擇傳值還是傳地址是根據(jù)數(shù)據(jù)類型來自動判斷的，但傳地址有時候會給我們帶來意想不到的麻煩，所以我們需要對復(fù)雜數(shù)據(jù)類型的賦值進行控制，讓復(fù)雜數(shù)據(jù)類型也可以進行傳值。

最簡單的做法是遍歷數(shù)組或者Hash對象，將數(shù)組或者Hash對象這種復(fù)雜的數(shù)據(jù)拆分成一個個簡單數(shù)據(jù)，然后分別賦值，如下面代碼：
[代碼9：對復(fù)雜數(shù)據(jù)類型進行傳值]

var a = [1, 2, 3] ,b = {name:'張三',sex:'男',tel:'1383838438'};
var c = [] ,d = {};
for(var p in a){
  c[p] = a[p]; 
}
for(var p in b){
  d[p] = b[p];
}
c.push('4');
d.email = 'ibing@outlook.com';
console.info(a);      // [1, 2, 3]
console.info(c);      // [1, 2, 3, "4"]
console.info(b.email);    // undefined
console.info(d.email);    // ibing@outlook.com

值得一提的是，對于數(shù)組的傳值還可以使用數(shù)組類的slice或者concat方法實現(xiàn)，如下面代碼：
[代碼10：數(shù)組傳值的簡單方法]

var a = [1, 2, 3];
var b = a.slice(), c = a.concat();
b.pop();
c.push(4);
console.info(a);    // [1, 2, 3]
console.info(b);    // [1, 2]
console.info(c);    // [1, 2, 3, 4]

prototype本質(zhì)上也是一個hash對象，所以直接用它賦值時會進行傳址，這也是為什么[代碼7：添加潤行為]中，zs2居然會run的原因。我們可以用for in來遍歷prototype，從而實現(xiàn)prototype的傳值。但因為prototype和function（用做類的function）的關(guān)系，我們還有另外一種方法實現(xiàn)prototype的傳值----new SomeFunction()，如下面代碼：
[代碼11]

// 定義Person類
function Person (name){
  this.name = name;
  this.type = "黃";
}
Person.prototype={
  say : function(){
    console.info("我是一個"+ this.type +"種人，我的名字叫" + this.name);
  }
}  
// 定義Zhangsan類
function Zhangsan (name){
  Person.call(this,name);
}
Zhangsan.prototype = new Person();
Zhangsan.prototype.constructor = Person;
Zhangsan.prototype.run = function(){
  console.info("我100米短跑只要10秒！");
}
  
// 實例化Zhangsan對象
var zs = new Zhangsan("張三");
zs.say();  // 我是一個黃種人，我的名字叫張三
zs.run();  // 我100米短跑只要10秒！
var zs2 = new Person("張三2");
zs2.run();  // TypeError: zs2.run is not a function

您是否注意到上面這句Zhangsan.prototype.constructor = Person;，這是因為Zhangsan.prototype = new Person();時，Zhangsan.prototype.constructor指向了Person，我們需要將它糾正，重新指向Zhangsan。

看完上述內(nèi)容，是不是對JavaScript中繼承的用法有進一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標(biāo)題：JavaScript中繼承的用法
網(wǎng)頁地址：http://chinadenli.net/article34/pgpese.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、移動網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、Google、定制開發(fā)、標(biāo)簽優(yōu)化

廣告

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

成都定制網(wǎng)站建設(shè)