js 實現面向對象

  • 時間:2018-06-17 21:02 作者:學習編程 來源:學習編程 閱讀:188
  • 掃一掃,手機訪問
摘要:js是一個,嗯...能說半面向對象的語言吧,沒有直接的支持,但能實現先來一個簡單點的function Person(name){this.name = name;this.getName = function(){return this.name;};}這樣就實現定義一個Person類,能直接new

js是一個,嗯...能說半面向對象的語言吧,沒有直接的支持,但能實現

先來一個簡單點的

function Person(name){

this.name = name;

this.getName = function(){

return this.name;

};

}

這樣就實現定義一個Person類,能直接new:

var p = new Person('lls'); // 創立對象

p.getName(); // 調使用對象的方法

但是這樣寫,有一個問題,那就是每次創立對象,都會分配內存保存其中所有的屬性,包括方法, 其中的變量的確需要每一個對象都創立一個新的,但是方法所有的都相同,這樣做就有點白費內存了, 那么有什么好點的辦法可以夠處理一下呢?

下面引入一個新的概念, 原型: 在js中,每個類都有一個原型, 而原型只有一份,所有創立的對象共享一份原型

prototype: 每個類的這個屬性為類的原型

Array.prototype.sum = function(){};

執行了以上的代碼后, 所有的數組都會有 sum 方法


有了以上前提,即可以處理類方法的問題了,如下所示

function Person(name){

this.name = name;

}

Person.prototype.getName = function(){

return this.name;

};

這樣,一個對象就定義成功了


但是, 面對對象得有繼承吧,不可以只可以定義類而不可以實現繼承,那么在js中又如何實現繼承呢

思路如下:

  • 在構造函數中調使用父類的構造方法, 這樣父類的屬性就已經拿到了
  • 獲取父類的原型, 拿到父類的方法
  • 定義自己的屬性和方法

思路有了,下面使用代碼實現

function Worker(name, job){

Person.call(this, name); // 調使用父類構造方法, 其中this是Worker對象

this.job = job; // 定義自己的屬性

}

Worker.prototype = Person.prototype; // 獲取父類的原型

Worker.prototype.getJob = function(){ // 定義自己的方法

return this.job;

};

但是這樣,又有一個問題,那就是 Worker 的原型一變, 父類的原型也變了, 由于直接賦值拿到的是原型的引使用,即指針,那么就要講原型整體復制過來才行, 用for循環實現:

for(var i in Person.prototype){

Worker.prototype[i] = Person.prototype[i];

}


同時能用 數組等實現對方法的分類管理, 如下:

var a={};

a.abc = {// 定義方法

aa: function(){},

bb: function(){}

};

a.bcd={

aa: function(){};

bb: function(){};

};

a.abc.aa(); // 調使用方法

a.bcd.aa();

如此,基本實現繼承功可以,更多功可以還有待我學習

  • 全部評論(0)
最新發布的資訊信息
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
【系統環境|軟件環境】更新版ThreeJS 3D粒子波浪動畫(2019-12-04 14:26)
【系統環境|軟件環境】前臺開發WebStorm常用快捷鍵,火速收藏!(2019-12-04 14:25)
【系統環境|軟件環境】微博H5登錄和發微博組件(2019-12-04 14:25)
【系統環境|軟件環境】5分鐘談前臺面試,小伙伴都驚呆了(2019-12-04 14:23)
手機二維碼手機訪問領取大禮包
返回頂部
澳洲幸运10精准人工计划