javascript 物件導向整理

整理一下js物件導向中的封裝和繼承。

js中封裝有很多種實現方式，這裡列出常用的幾種。

直接將我們的成員寫入物件中，用函式返回。缺點：很難看出是乙個模式出來的例項。

**：

function
stu(name, score) 
}var stu1 = stu("張三", 80);
var stu2 = stu("李四", 90);
console.log(stu1.name); 
//張三

js幫我們提供了乙個使用建構函式生成物件的模式，¨所謂「建構函式」，其實就是乙個普通函式，但是內部使用了this變數。當使用new關鍵字對建構函式生成例項後，this變數則會繫結在例項物件上。

直接上**：

function
stu(name, score) 
var stu1 = new stu("張三", 80);
var stu2 = new stu("李四", 90);
console.log(stu1.name + "/" + stu2.score); //
張三  90
console.log((stu1.constructor == stu) + "/" + (stu2.constructor == stu)); //
true  true
console.log((stu1 
instanceof stu) + "/" + (stu2 instanceof stu)); //
true  true

不難看出js的建構函式生成物件和c#用class生成物件如出一轍，都是用模板定義物件成員通過new關鍵字例項化。

用c#**生成同樣的stu物件

class stu

ok，到這兒基本的物件有了。那麼現在我們需要乙個所有物件都公用的方法，而且只讓這個方法建立一次。(不隨著物件new而重複建立)　　怎麼辦呢？大家都知道在c#中我們可以用靜態成員。那麼在js中怎麼做呢？

在js中，每乙個建構函式都有乙個prototype屬性，這個物件的所有屬性和方法，都會被建構函式的例項繼承。那麼我們直接給prototype新增成員就相當於在c#中宣告靜態成員了。

**：

function
stu(name, score) 
stu.prototype.type='學生';
stu.prototype.log = function
(s) 
var stu1 = new stu("張三", 80);
var stu2 = new stu("李四", 90);
console.log(stu1.type + "/" + stu2.type); //
學生 學生
stu1.log('hello');  //
hello
console.log(stu1.log == stu2.log);  //
true

封裝就講到這兒了，下面我們來看看js中繼承又是如何實現的？

function
stu(name, score) 
function
grade() 
}var stu1 = new stu("張三", 80);
var stu2 = new stu("李四", 90);
console.log(stu1.code); 
//初中
stu1.ask(); //

先看**

**：

function
stu(name, score) 
function
grade() 
stu.prototype = new
grade();
stu.prototype.constructor = stu; //
防止繼承鏈的紊亂,手動重置宣告
var stu1 = new stu("張三", 80);
var stu2 = new stu("李四", 90);
console.log(stu.prototype.constructor); 
//自己的建構函式
console.log(stu1.code); //
初中

前面說過prototype就相當於c#中的靜態成員，所以我們就把父類的所有成員都變成自己的靜態成員來實現繼承。

通過prototype繼承有乙個缺點：所有繼承的成員都是靜態的，那麼怎麼繼承物件成員呢？

把父物件的所有屬性和方法，拷貝進子物件，實現繼承。

**：

function
stu(name, score) 
function
grade() {}
grade.prototype.code = "初中";
}//函式封裝
function
extend(c, p) 
}extend(stu, grade);
var stu1 = new stu("張三", 80);
var stu2 = new stu("李四", 90);
stu1.code='高中';
console.log(stu1.code); 
//高中
console.log(stu2.code); //
初中console.log(stu.prototype.constructor);
console.log(grade.prototype.constructor)

js物件導向的整理就寫到這了，這個東西也不是一成不變的，使用的時候根據自己的需求做改動。有句話說的很好，合適的才是最好的。

JavaScript物件導向

方法一建構函式法 function cat cat.prototype.showname function var cat new cat cat.name tom cat.showname tom 它用建構函式模擬類在其內部用this關鍵字指代例項物件。類的屬性和方法，還可以定義在建構函式的...

javaScript物件導向

code 類lecture構造器使用兩個字串函式，name和teacher function lecture name,teacher 類lecture的方法，生成乙個顯示該課程資訊的字串 lecture.prototype.display function 類schedule的構造器使用乙個l...

Javascript 物件導向

什麼是物件everything is object 萬物皆物件物件到底是什麼，我們可以從兩次層次來理解。1 物件是單個事物的抽象。一本書一輛汽車乙個人都可以是物件，乙個資料庫一張網頁乙個與遠端伺服器的連線也可以是物件。當實物被抽象成物件，實物之間的關係就變成了物件之間的關係，從而就可以模擬...

javascript 物件導向整理

JavaScript物件導向

javaScript物件導向

Javascript 物件導向

相關推薦