JS偽繼承prototype實現(xiàn)方法示例

更新時間：2018年06月20日 08:38:43 作者：輘酆

這篇文章主要介紹了JS偽繼承prototype實現(xiàn)方法,結合實例形式對比分析了基于prototype實現(xiàn)模擬繼承的相關操作技巧,需要的朋友可以參考下

本文實例講述了JS偽繼承prototype實現(xiàn)方法。分享給大家供大家參考，具體如下：

眾所周知JS中沒有類的概念，但是要想實現(xiàn)類的功能可以同過function模擬。如：

第一種繼承（屬性繼承）

  //該函數(shù)相當于是一個構造器，也是一個偽類
  function Fn(){
    this.a = 4;
    this.b = 5;
    this.log = function(){
      console.log(this.a,this.b);
    }
  }
  function Fn1(){
    Fn.call(this);//調用父類的構造函數(shù)
  }
  Fn1.prototype = Fn.prototype;
  var fn = new Fn();
  var fn1 = new Fn1();
  //由此可見Fn1 是fn1的子類。
  fn1 instanceof Fn; // true
  fn instanceof Fn1; // true
  fn.a = 5;
  //由此可見Fn1 繼承了 Fn得所有屬性和方法
  //而是是復制了一份Fn的屬性和方法，并不是對象的引用。
  console.log(fn.a); // 5
  console.log(fn1.a); // 4
  this.log(); // 4 5

總結： 這種繼承，是重新拷貝一份放入內存中，他們的值互相獨立，修改一個不會改變另一個。

第二種繼承原型繼承(prototype)

  function Fn(){}
  Fn.prototype.data = {
    name: 'zhangsan'
  }
  Fn.prototype.getName = function(){
    return this.data.name;
  }
  function Fn1(){}
  //原型鏈繼承
  Fn1.prototype = Fn.prototype;
  var fn = new Fn();
  var fn1 = new Fn1();
  //所用Fn1 繼承了 Fn
  fn1 instanceof Fn;//true
  console.log(fn1.getName()); // zhangsan
  console.log(fn.getName()); // zhangsan
  //修改了fn的name屬性值
  fn.data.name = 'lisi';
  // 由此我們可看出 原型鏈繼承 是 引用繼承
  //不會重新拷貝一份變量。就像對象的引用一樣。
  console.log(fn.getName()); // lisi
  console.log(fn1.getName()); // lisi

兩種類的寫法造成示例的區(qū)別

  //第一種
  function Fn(){
    this.a = 4;
    this.b = 5;
    this.log = function(){
      console.log(this.a,this.b);
    }
  }
  var fn1 = new Fn();
  var fn2 = new Fn();
  fn1.a = 1;
  //由此可以看出兩個對象互不影響
  //說明每個對象里都存在一份a和b
  fn1.log(); // 1 5
  fn2.log(); // 4 5
  //第二種
  function Fn(){}
  fn.prototype.name = 'zhangsan';
  fn.prototype.data = {
    a: 4,
    b: 5
  }
  fn.prototype.log = function(){
    console.log(this.data.a,this.data.b);
  }
  var fn1 = new Fn();
  var fn2 = new Fn();
  fn1.a = 1;
  //由此可見就算是不同的示例他們他們所指向的值是同一個。
  fn1.log();//1 5
  fn2.log();//1 5
  fn2.name = 'lisi';
  //這里fn1.name并沒有被修改
  console.log(fn1.name); //zhangan
  console.log(fn2.name); // lisi

總結

類中直接this. 出來的屬性和方法都會直接復制一份給子類或者實例對象。個子類或實例對象之間互不影響。

使用prototype增加的屬性和方法，對象類型的只有一份，值類型的這會被復制。

收獲

由于函數(shù)都是通用的，所以比較上面兩種方法，第二種明顯比第一種性能要好的多，因為避免了沒有必要的復制，肯定會比較節(jié)省內存。所以以后寫類的時候，盡量使用第二種方式。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

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

您可能感興趣的文章:

關于微信小程序自定義tabbar問題詳析
微信小程序是一種全新的連接用戶與服務的方式,它可以在微信內被便捷地獲取和傳播,同時具有出色的使用體驗,下面這篇文章主要給大家介紹了關于微信小程序自定義tabbar問題的相關資料,需要的朋友可以參考下
2022-04-04
HTML+JS實現(xiàn)3D倒計時爆炸特效
這篇文章主要為大家詳細介紹了如何結合HTML與JS實現(xiàn)3D倒計時爆炸特效,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考下
2024-01-01
js前端如何寫一個精確的倒計時代碼
關于寫倒計時大家可能都都比較熟悉，使用 setTimeout 或 setInterval 就可以搞定。幾秒鐘或者幾分鐘的倒計時這樣寫沒有問題，但是如果是長時間的倒計時，這樣寫就會不準確
2019-10-10
原生JS實現(xiàn)數(shù)碼表特效
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)數(shù)碼表特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
JS實現(xiàn)Fisheye效果動感放大菜單代碼
這篇文章主要介紹了JS實現(xiàn)Fisheye效果動感放大菜單代碼,涉及JavaScript事假監(jiān)聽機制及定時函數(shù)等相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
淺談如何循序漸進的學好JS
如何才能學好JS？在這里給大家總結一些學習Js的經(jīng)驗，希望能對你們有所幫助。
2021-05-05
ES6中非常實用的新特性介紹
ECMAScript 6離我們越來越近了，作為它最重要的方言，Javascript也即將迎來語法上的重大變革，InfoQ特開設“深入淺出ES6”專欄，來看一下ES6將給我們帶來哪些新內容
2016-03-03
OkHttp踩坑隨筆為何 response.body().string() 只能調用一次
想必大家都用過或接觸過 OkHttp，我最近在使用 Okhttp 時，就踩到一個坑，在這兒分享出來，以后大家遇到類似問題時就可以繞過去
2018-01-01
JavaScript前端優(yōu)化策略深入詳解
在前端開發(fā)中，優(yōu)化頁面性能是非常重要的一個方面，頁面性能優(yōu)化可以提升網(wǎng)站的用戶體驗，加速頁面的加載速度，提高用戶的滿意度，本文講解了前端通用的優(yōu)化策略，需要詳細了解可以參考下
2023-05-05
怎么選擇Javascript框架(Javascript Framework)
如果你正面臨這樣的問題，希望下面的幾個建議對你在選擇javascript框架上會有所幫助
2013-11-11