JS物件導向

2022-03-07 14:50:29 字數 4119 閱讀 5949

一,理解物件

var person =

};person.sayname(); //訪問物件裡的方法

1.1,屬性型別

資料屬性包含乙個資料值的位置,在這個位置可以讀取和寫入值,資料屬性有4個描述其行為的特性。

1,configurable:表示能否通過delete刪除屬性,從而重新定義屬性。

2,enumerable :表示能否通過for-in迴圈返回屬性

3,writable:表示能否修改屬性的值。

4,包含這個屬性的資料值。

例如:設定name屬性為唯讀

var person ={};

object.defineproperty(person,"name",);

alert(person.name);

person.name = "greg";

alert(person.name);

2,把configurable設定為false,表示不可配置的屬性。

var person ={};

object.defineproperty(person,"name",);

alert(person.name);

//nicholas

delete

person.name

alert(person.name);

//nicholas

二,建立物件

2.1  工廠模式

這種模式抽象了建立具體物件的過程,考慮到ecmascript中無法建立類,開發人員就發明了一種函式,用函式來封裝以特定介面建立物件的細節,如下面例子所示 function

createperson(name,age,job);

return o;

}var person1 = createperson("nicholas",29,"software engineer");

person1.sayname();

var person2 = createperson("greg",27,"doctor");

alert(person2.name);

弊端:工廠模式雖然解決了建立多個相似物件的問題,但卻沒有解決物件識別的問題(即怎樣知道乙個物件的型別)

2.2 建構函式模式

ecmascript中的建構函式可用來建立特定型別的物件,像object和array這樣的原生建構函式,在執行時會自動出現在執行環境中,此外也可以建立自定義的建構函式

從而定義自定義物件型別的屬性和方法,例如:

function

person(name,age,job)

} var person1 = new person("nicholas",29,"software engineer");

//呼叫 person1.sayname();

var person2 = new person("greg",27,"doctor");

在這個例子中,person()函式取代了createperson()函式。person()中的**與createperson()存在以下不同之處:

1,沒有顯式地建立物件;

2,直接將屬性和方法賦給了this物件;

3,沒有return語句。

2.3 原型模式

我們建立的每個函式都有乙個prototype(原型)屬性,這個屬性是乙個指標,指向乙個物件,而這個物件的用途是包含可以由特定型別的所有例項共享的屬性和方法。按照字面意思來理解,那麼prototype就是通過呼叫建構函式而建立的那個物件例項的原型物件。使用原型物件的好處是可以讓所有物件例項共享它所包含的屬性和方法,換句話說,不必再建構函式中定義物件例項的資訊,而是可以將這些資訊直接新增到原型物件中  function

person(){}

person.prototype.name = 'nicholas';

person.prototype.age = 29;

person.prototype.job = "software engineer";

person.prototype.sayname = function

();

var person1 = new

person();

var person2 = new person();

person1.sayname();

//nicholas

person2.sayname();    // nicholas

在此,我們將sayname()方法和所有屬性直接新增到了person的prototype屬性中,建構函式變成了空函式,即使如此,也仍然可以通過呼叫建構函式來建立新物件,而且新物件還會具有相同的屬性和方法。但與建構函式模式不同的是,新物件的這些屬性和方法是由所有例項共享的。換句話說,person1和person2訪問的都是同一組屬性和同乙個sayname()函式。

但是如果方法比較多的話,大多數人會採用一種更簡潔的方法,直接使用乙個物件字面形式替換原型物件,如下:

person.prototype = ,

tostring :function()}

這種方式非常流行,因為你不用多次鍵入person.prototype,但是有乙個***:

使用字面量形式改寫了原型物件改變了建構函式的屬性,因此他指向object而不是person。這是因為原型物件具有乙個constructor屬性,這是其他物件例項所沒有的。當乙個函式被建立時,它的prototype屬性也被建立,且該原型物件的constructor屬性指向該函式。當使用物件字面量形式改寫原型物件時,其constructor屬性將被置為泛用物件object.為了避免這一點,需要在改寫原型物件的時候手動重置constructor,如下:

沒有改變前:

function

person(name)

var p1 = new person('john');

alert(p1 instanceof person); //true    instanceof 用於判斷乙個變數是否某個物件的例項

alert(p1.constructor === person); //true

alert(p1.constructor === object); //false

改變後:

function

person(name)

person.prototype =,

tostring:

function

() };

var p1 = new person('john');

p1.sayname(); //說明p1的例項化必須放在

person.prototype的後面,否則找不到

sayname()方法報錯,

//

alert(p1 instanceof person); //true

//alert(p1.constructor === person); //false

alert(p1.constructor === object); //true

當使用物件字面量形式改寫原型物件時,其constructor屬性將被置為泛用物件object,為了避免這一點,需要在改寫原型物件的時候手動重置constructor如下:

function

person(name)

person.prototype =,

tostring:

function

() };

var p1 = new person('john');

p1.sayname();

//alert(p1 instanceof person); //true

alert(p1.constructor === person); //

true

//alert(p1.constructor === object); //false

js物件導向

物件導向是相對於面向過程而提出的程式設計思想 核心在於通過這種方法的設計出來的程式不再是機械的按照設定的步驟去執行,而是按照需要的步驟去執行。舉個例子 乙個人要吃飯,如果用的面向過程的話就必須執行吃飯前的一切行為,而物件導向則可以跳過之前的環節!建構函式 所謂的工廠方式 用來構造抽象物件,通過呼叫建...

js物件導向

js物件導向 一 什麼是物件 物件可以看成乙個屬性的集合。對像一般有屬性和方法構成,方法的實質是函式,而屬性的實質是變數。二 什麼是物件導向 物件導向可以理解為不需要去了解對像的內部結構,就可以使用它。像我們的date 對像的方法可以獲取和設定時間,但我們並不了解其內部原理。三 物件導向 抽風機 抽...

JS物件導向

一 js物件導向 js是一門指令碼語言,不是物件導向的語言,它沒有類的概念,有物件的概念。物件導向程式設計 oop 和面向過程程式設計 opp 的區別 面向過程以 事件為中心,將完成整個事件拆分成若干個步驟,按照步驟依次執行。物件導向以 事物為中心,完成某個需求需要哪些事物參與,側重點在於每個事物的...