国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

javascript繼承機制實例詳解

2019-11-20 13:54:17
字體:
來源:轉載
供稿:網友

本文實例講述了javascript繼承機制。分享給大家供大家參考。具體分析如下:

初學javascript一般很難理解Javascript語言的繼承機制它沒有"子類"和"父類"的概念,也沒有"類"(class)和"實例"(instance)的區分,全靠一種很奇特的"原型鏈"(prototype chain)模式,來實現繼承。

我花了很多時間,學習這個部分,還做了很多筆記。但是都屬于強行記憶,無法從根本上理解。

一、如何創建一個類

假設有給叫Person的類如下:

復制代碼 代碼如下:
var Person = function(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function() {
    return this.name;
}

如上:Person代表地球上所有的人,每個人都有這兩個基本屬性:name和age;現在我們要實現一個學生類,然后我們知道了; 學生也是一個人,及學生也有name和age等屬性;現在的問題是怎么能把這個關系給搭起來?
先來看看純面向對象的語言是如何做到的(如:Actionscrpt3)
復制代碼 代碼如下:
class Students extend Person {}; //很簡單,一行代碼;更確切的說是一個單詞--extend

二、換成js如何能做到

在講解js的繼承機制實現之前,先了解一下js的原型鏈:

復制代碼 代碼如下:
var person = new Person('Poised-flw', 21);
person.getName(); // "Poised-flw"

就上面的getName()方法來說,是如何執行的?首先會在Person這個函數里面找是否有getName()這個方法,發現沒有;然后就轉到 Person.prototype中尋找,發現有!然后就調用,若沒有呢?繼續按照相同的方法一直沿著prototype尋找下去,直到找到方法或者 達到原型鏈的頂端為止!

舉例來說,現在有一個叫做DOG的構造函數,表示狗對象的原型。

復制代碼 代碼如下:
  function DOG(name){
    this.name = name;
  }

對這個構造函數使用new,就會生成一個狗對象的實例。
復制代碼 代碼如下:
  var dogA = new DOG('大毛');
  alert(dogA.name); // 大毛

注意構造函數中的this關鍵字,它就代表了新創建的實例對象。

三、new運算符的缺點

用構造函數生成實例對象,有一個缺點,那就是無法共享屬性和方法。
比如,在DOG對象的構造函數中,設置一個實例對象的共有屬性species。

復制代碼 代碼如下:
  function DOG(name){
    this.name = name;
    this.species = '犬科';
  }

然后,生成兩個實例對象:
復制代碼 代碼如下:
  var dogA = new DOG('大毛');
  var dogB = new DOG('二毛');

這兩個對象的species屬性是獨立的,修改其中一個,不會影響到另一個。
復制代碼 代碼如下:
  dogA.species = '貓科';
  alert(dogB.species); // 顯示"犬科",不受dogA的影響

每一個實例對象,都有自己的屬性和方法的副本。這不僅無法做到數據共享,也是極大的資源浪費。

所以:繼承的思想: 通過js特有的原型鏈來實現繼承機制!

四、基于原型鏈的繼承

1.直接繼承實現

復制代碼 代碼如下:
var Students = function(name, age, sid) {
    Person.call(this, name, age);
    this.sid = sid;
}
Students.prototype = new Person(); //把Person放到Students的原型鏈上實現繼承機制
Students.prototype.constructor = Students;
Students.prototype.getResults = function() {
    // 得到學生的成績
}

一定不要少了Students.prototype.constructor = Students這一行!,定義一個構造函數的時候,它默認的prototype是一個Object實例,然后prototype的constructor屬性自動被設置成該函數本身 !!!若手工將prototype設置為另一個對象的時候,則新對象自然不會具有原對象的contructor值,故需要重新設置其constructor屬性。如:
復制代碼 代碼如下:
var Test = function() {
    this.time = "now";
}
console.log(Test.prototype); // Object {} 一個空對象
console.log(Test.prototype.constructor); // function() {this.time = "now";},及函數本身
// 若手工改變Test的prototype屬性
Test.prototype = {
    someFunc: function() {
        console.log('hello world!');
    }
};
console.log(Test.prototype.constructor); // function Object() { [native code] }
// 然后你會發現完全指錯了,故手動更改prototype屬性的時候需要更改它的constructor指向;

經過上面的測試就知道為什么要修改constructor值了。

2.封裝繼承的函數extend

復制代碼 代碼如下:
function extend(subClass, superClass) {
    var F = function() {};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
}

其實這個函數的功能只是對上面繼承過程的一個封裝,不同的有:
只繼承了superClass的prototype屬性,并沒有繼承superClass構造函數中的屬性;
這樣做的優點在于:減少去new一個構造函數的開銷!
當然隨之的問題是不能單一的通過這個函數就能讓subClass繼承superClass的所有屬性
改進:
復制代碼 代碼如下:
// 在Students構造函數中繼續添加一行代碼:
Person.call(this, name, age);

五、小結

利用js的原型鏈原理,我們可以很容易的實現js的繼承機制,盡管不是非常的嚴格,但是我的目的達到了: 重復的代碼盡量出現一次!

希望本文所述對大家的javascript程序設計有所幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 梓潼县| 两当县| 柳江县| 静宁县| 三门县| 许昌县| 吕梁市| 顺平县| 昭平县| 鸡西市| 衡水市| 富裕县| 河间市| 堆龙德庆县| 张家口市| 杭州市| 蒲江县| 乌拉特后旗| 邢台市| 大新县| 枣强县| 赤壁市| 鸡西市| 新昌县| 青州市| 南木林县| 南阳市| 南丰县| 通山县| 泗阳县| 额尔古纳市| 夏邑县| 渝中区| 开原市| 承德县| 桐柏县| 五指山市| 晴隆县| 台北县| 米泉市| 唐山市|