javascript 物件導向封裝與繼承

2021-07-15 22:58:27 字數 3014 閱讀 2288

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

1.封裝

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

1.1 原始模式生成物件

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

**:複製**

**如下:

function stu(name, score) }

var stu1 = stu("張三", 80);

var stu2 = stu("李四", 90);

console.log(stu1.name); // 張三

1.2 生成構造模式物件

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中怎麼做呢?

1.3 prototype模式

在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中繼承又是如何實現的?

2.繼承

2.1 建構函式繫結

複製**

**如下:

function stu(name, score)

function grade() }

var stu1 = new stu("張三", 80);

var stu2 = new stu("李四", 90);

console.log(stu1.code); // 初中

2.2 通過prototype繼承

先看**

**:複製**

**如下:

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繼承有乙個缺點:所有繼承的成員都是靜態的,那麼怎麼繼承物件成員呢?

2.3 拷貝繼承

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

**:複製**

**如下:

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 物件導向(二)封裝

寫個小例子 第一步 做乙個 手機的類 var mobilephone function 第二步 考慮這個類,裡需要那些類的私有屬性,這裡我想定義的是例項出來手機的數量 var mobilephone function 第三步 建立乙個建構函式,即例項時候,對產生的新象的乙個初始化,例如屬性,方法的初...

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...