1. 程式人生 > >js實現繼承的各種方法及缺點

js實現繼承的各種方法及缺點

本篇文章主要介紹了js中繼承的幾種用法總結。

1.建構函式實現繼承

程式碼:
  function Parent(username){
    this.username = username;
    this.hello = function(){
      alert(this.username);
    }
  }
  Parent.prototype.bye = function(){
      alert(this.username+": Goodbye!");
    };
  function Child(username,password){
    this.father = Parent;
    this.father(username);//最關鍵的一行
    delete this.father;
//以上3行等價於Parent.call(this,username)或Parent.call(this,[username])
    this.password = password;
    this.world = function(){
      alert(this.password);
    }
  }
  var parent = new Parent("zhangsan");
  var child = new Child("lisi","123456");
  parent.hello();//zhangsan
  child.hello();//lisi
  child.world();//123456
  parent.bye(); //zhangsan :Goodbye
  child.bye();// Error: child.bye is not a function

缺點:由於方法在建構函式內建立,不能做到函式複用而降低效率,並且不能繼承父類的prototype定義的屬性與方法。

2.原型鏈方式:子類通過prototype將所有在父類中通過prototype追加的屬性和方法都追加到Child,從而實現了繼承

程式碼:

function Parent(){
     this.elements=["ul","li","p"];
  }
  Parent.prototype.hello = "hello";
  Parent.prototype.sayHello = function(){
    alert(this.hello);
  }
 
  function Child(){
  }
  Child.prototype = new Parent();//這行的作用是:將Parent中將所有通過prototype追加的屬性和方法都追加到Child,從而實現了繼承
  Child.prototype.world = "world";
  Child.prototype.sayWorld = function(){
    alert(this.world);
  }
  var c = new Child();
  c.sayHello();//hello
  c.sayWorld();//world
  alert(c.elements);//ul,li,p
  c.elements.push("div");
  c.hello="div";
  var c2 = new Child();
  c2.sayHello();//hello
  alert(c2.elements);//ul,li,p,div
缺點:由於prototype是各個子類的例項共享的,故對某一個子類prototype中的屬性進行修改,也會體現在所有子類上(如以上程式碼,Child.prototype 繼承了Parent的例項,故Child.prototype.elements為所有Child的例項共享),另外本方法還有一個缺點是不能想超類的建構函式傳引數。
3.組合繼承:結合以上兩種方式,用prototype繼承超類的prototype的屬性、方法,用建構函式繼承超類的例項的屬性、方法。
程式碼:
 function Parent(username){
    this.elements =["li","ul","p"];
    this.username = username;
    this.hello = function(){
      alert(this.username);
    }
  }
  Parent.prototype.hello = "hello";
  Parent.prototype.bye = function(){
      alert(this.username+": Goodbye!");
    };
  function Child(username,password){
    Parent.call(this,[username]);
    this.password = password;
    this.word = function(){
      alert(this.password);
    }
  }
  Child.prototype=new Parent();
  var parent = new Parent("zhangsan");
  var child = new Child("lisi","123456");
  parent.hello();//zhangsan
  child.hello();//lisi
  child.word();//123456
  child.elements.push("div");
  var child2 = new Child("wangwu","111111");
  alert(child2.elements);//ul,li,p


缺點:與建構函式模式相比,函式複用問題未解決。
4.寄生式繼承:寄生式繼承是建立一個僅用於封裝繼承過程的函式,該函式在內部以某種方式來增強物件,最後再返回物件。
 var person = {name : "Nicholas", friends :["shelby","Court","Van"],
sayGoodbye :function(){alert("Goodbye");}};
  function createSon(original){  
   var clone = original;//通過呼叫函式建立一個新物件  
   clone.sayHi =function(){ //以某種方式來增強這個物件  
      alert("hi");
   };  
   return clone;//返回這個物件  
  }
var son = createSon(person);  
son.sayHi();//"hi"  
son.sayGoodbye();


缺點:與建構函式模式類似,不能做到函式複用而降低效率。

5.寄生組合式繼承:本質上,就是使用寄生式繼承來繼承超型別的prototype,然後再將結果指定給子型別的prototype。

程式碼:

function inheritPrototype(subType, superType) {
    var prototype = superType.prototype; 
    prototype.constructor = subType; 
    subType.prototype = prototype; 
}
    function Parent(name) {
        this.name = name;
        this.elements=["ul","li","p"];
    }


    Parent.prototype.sayName = function() {
        alert(this.name);
    }


    function Child(name, age) {
        Parent.call(this, name);
        this.age = age;
    }


    inheritPrototype(Child, Parent);
    Child.prototype.sayAge = function() {
        alert(this.age);
    }
     var parent = new Parent("zhangsan");
  var child = new Child("lisi","12");
  parent.sayName ();//zhangsan
  child.sayName ();//lisi
  child.sayAge();//12
  child.elements.push("div");
  var child2 = new Child("wangwu","22");
  child2.sayAge();//22
  alert(child2.elements);//li,ul,p


相關推薦

js實現繼承各種方法缺點

本篇文章主要介紹了js中繼承的幾種用法總結。 1.建構函式實現繼承 程式碼: function Parent(username){ this.username = username; this.hello = function(){ aler

Js實現繼承方法

fine new eat mce sco clas 高級 裏的 xiaomi 原型的作用:1.將公共部分放入原型中,這樣構造出的多個實例對象的公共部分只會占用一個公共空間,實現數據共享和節省內存空間 2.通過原型實現繼承:構造函數模擬 "類"這個面向對象的

原生JS實現AJAX、JSONPDOM載入完成事件,並提供對應方法

JS原生AJAX ajax:一種請求資料的方式,不需要重新整理整個頁面; ajax的技術核心是 XMLHttpRequest 物件; ajax 請求過程:建立 XMLHttpRequest 物件、連線伺服器、傳送請求、接收響應資料; 下面簡單封裝一個函式,之後稍作解釋

js實現繼承方法

[TOC] ## 借用建構函式 這種技術的基本思想很簡單,就是在子型別建構函式的內部呼叫超型別的建構函式。另外,函式只不過是在特定環境中執行程式碼的物件,因此通過使用apply()和call()方法也可以在新建立的物件上執行建構函式。 ``` js function Box(name){ this.nam

JS實現繼承的幾種方式(轉)

多繼承 logs 影響 .cn sta 初始化 定義 附錄 style 轉自:幻天芒的博客 前言 JS作為面向對象的弱類型語言,繼承也是其非常強大的特性之一。那麽如何在JS中實現繼承呢?讓我們拭目以待。 JS繼承的實現方式 既然要實現繼承,那麽首先我們得有一個父類,

JS實現繼承的幾種方式

簡單 成員 類構造 缺陷 屬性 con html 但是 內存 JS實現繼承的幾種方式 前言 JS作為面向對象的弱類型語言,繼承也是其非常強大的特性之一。那麽如何在JS中實現繼承呢?讓我們拭目以待。 JS繼承的實現方式 既然要實現繼承,那麽首先我們得有一個父類,代碼如

js實現繼承

this super() 實現 urn 使用 log -s 創建 復用 js作為一種弱類型語言,繼承也是其較大的功能之一 首先定義一個父類 // 定義一個教師類 function Teacher (name) { // 屬性 this.name = name |

JS實現繼承的方式

一、原型繼承 要實現繼承,首先需要一個父類。 定義一個動物類: 核心: 將父類的例項作為子類的原型 function Animal(name){ this.name=name ||"animal"; //屬性 this.ea

原生js替換jQuery各種方法-中文版

You Don't Need jQuery 前端發展很快,現代瀏覽器原生 API 已經足夠好用。我們並不需要為了操作 DOM、Event 等再學習一下 jQuery 的 API。同時由於 React、Angular、Vue 等框架的流行,直接操作 DOM

Jquery、Js實現網頁列印,列印樣式的自定義

<!DOCTYPE html> <html lang="en" style="height: 100%"> <head> <meta charset="UTF-8"> <title>Title</title> &

瞎分類之JS——js實現div大小設定Cannot set property 'cssText' of undefined問題處理

今天趁著奇怪的時間開始總結最近看到的,學習到的,一些問題。僅僅是解決了問題,以我現在淺薄瞭解,只負責解決問題,希望以後會自我欣賞的時候再看看,內容是否需要修改。萬一哪位有經驗的看到了,可以及時指點,在這裡先謝了。js完成div的大小設定背景是接手的程式碼用js生成各種div,

JS實現繼承 JavaScript

定義一個父類: // 定義一個動物類 function Animal (name) { // 屬性 this.name = name || ‘Animal’; // 例項方法 this.sleep = function(){ console.log(this.name + ‘正在睡覺!’); } }

JavaScript面向物件(三)——繼承與閉包、JS實現繼承的三種方式

  前  言 JRedu 在之前的兩篇部落格中,我們詳細探討了JavaScript OOP中的各種知識點(JS OOP基礎與JS 中This指向詳解 、 成員屬性、靜態屬性、原型屬性與JS原型鏈)。今天我們來繼續探討剩餘的內容吧。  我們都知道,面向物件的三大特徵——封裝、繼承、多型。 封裝無非就是屬性和

原生JS實現AJAX、JSONPDOM載入完成事件

JS原生Ajax ajax:一種請求資料的方式,不需要重新整理整個頁面; ajax的技術核心是 XMLHttpRequest 物件; ajax 請求過程:建立 XMLHttpRequest 物件、連線伺服器、傳送請求、接收響應資料; 下面簡單封裝一

使用jquery.form.js實現檔案上傳進度條前端程式碼

1、背景 ajax的表單提交只能提交data資料到後臺,沒法實現file檔案的上傳還有展示進度功能,這裡用到form.js的外掛來實現,搭配css樣式簡單易上手,而且高大上,推薦使用。 2、靜態頁搭建 html程式碼如下 <div clas

js實現上拉載入下拉重新整理效果

微信小程式開發時,上拉載入和下拉重新整理效果讓人眼前一亮,挺棒的。不過小程式裡只需要在js檔案用onPullDownRefresh命名的方法就可以實現了,忒方便。在微信開發或者手機端網頁開發呢。 1.藉助外掛 dropload mui 後者是做前臺/手機端app的一個框架

JS實現PHP ksort方法

參考程式碼: http://phpjs.org/functions/ksort/ https://github.com/kvz/phpjs/blob/master/functions/array/ksort.js function ksort(inputArr, sort_

js----js實現繼承的方式及其優缺點

-a 價格 才會 nts argument 小明 方法 父類 delete js實現繼承的方式 1.繼承方式一 -------------- 通過改變父類的執行環境(不常用) 2.call()繼承------------只能繼承原型的屬性和方法 3.ap

JS實現動態瀑布流放大切換圖片效果(js案例)

整理了一下當時學js寫的一些案例,再次體驗了一把用原生JS實現動態瀑布流效果的樂趣,現在把它整理出來,需要的小夥伴可以參考一下。 該案例主要是用HTML+CSS控制樣式,通過JS實現全域性瀑布流以及點選圖片放大、上下切換效果。HTML佈局寫的很簡單,圖片載入主要是在JS中通過訪問自定義的JSON字串來實現。

js實現繼承的不同方式以及其缺點

但是 scrip UC .proto 就是 圖片 問題 inf 引用 1.利用call和apply,借助構造函數 fucntion P(){ this.name = "P"; } fucntion C1(){ P.call(this); }