摘要:之面向?qū)ο罂偨Y(jié)前言在中是沒有類的概念的,所以它的對象與基于類的語言中的對象不同。一理解對象張三上面通過構(gòu)造函數(shù)創(chuàng)建了一個對象,并為它添加了三個屬性。
JavaScript之面向?qū)ο罂偨Y(jié) 前言:在ECMAScript中是沒有類的概念的,所以它的對象與基于類的語言中的對象不同。ECMA-262把對象總結(jié)為:“無序?qū)傩缘募?,其屬性包含基本值、對象或者函?shù)”。 一、理解對象
var person = new Object(); person.name = "張三"; person.age = 15; person.say = function(){ alert("hello"); }
上面通過Object構(gòu)造函數(shù)創(chuàng)建了一個對象,并為它添加了三個屬性。
ECMA對象的屬性有兩種:數(shù)據(jù)屬性和訪問器屬性。
var person = { name: "聶赫留朵夫", // 數(shù)據(jù)屬性 age: 25 } Object.defineProperty(person, "year", { // 訪問器屬性 get: function(){ return 1922; }, set: function(value){ this.age = 25 + value; } })數(shù)據(jù)屬性:包含一個數(shù)據(jù)值的位置,可以再這個位置寫入和讀取值
數(shù)據(jù)屬性有4個描述其行為的特性:
[[Configurable]]:表示能否通過delete刪除屬性從而重新定義屬性,默認(rèn)為true
[[Enumerable]]:表示能否通過for-in循環(huán)返回屬性,默認(rèn)為true
[[Writeable]]:表示能否修改屬性,默認(rèn)為true
[[Value]]:包含這個屬性的數(shù)據(jù)值,默認(rèn)值為undefined
ps:要修改默認(rèn)的特性,必須使用Object.defineProperty訪問器屬性:包含一對兒getter和setter函數(shù),不包含數(shù)據(jù)值
訪問器屬性也有4個特性:
[[Configurable]]:表示能否通過delete刪除屬性從而重新定義屬性,默認(rèn)為true
[[Enumerable]]:表示能否通過for-in循環(huán)返回屬性,默認(rèn)為true
[[Get]]:讀取屬性時調(diào)用的函數(shù),默認(rèn)值為undefined
[[Set]]:寫入屬性時調(diào)用的函數(shù),默認(rèn)值為undefined
訪問器屬性不能直接定義,必須通過Object.defineProperty來定義讀取屬性的特性,通過Object.getOwnPropertyDescriptor方法 二、創(chuàng)建對象
1、通過字面量或者Object構(gòu)造函數(shù)
var person = { name: "尤瓦爾?赫拉利" } var car = new Object(); car.name = "法拉利"
優(yōu)點(diǎn):不清楚
缺點(diǎn):使用同一個接口,會產(chǎn)生大量的代碼
2、工廠模式
function createPerson(name, age){ var o = new Object(); o.name = name; o.age = age; return o; } var p1 = createPerson("方鴻漸", 14); var p2 = createPerson("墨帶", 20);
優(yōu)點(diǎn):解決了創(chuàng)建多個相似對象的問題
缺點(diǎn):很明顯,你不知道創(chuàng)建的對象的類型是什么
3、構(gòu)造函數(shù)模式
function Person(name, age){ this.name = name; this.age = age; } var person = new Person("智人", 25);
創(chuàng)建實(shí)例,必須要通過new關(guān)鍵字,new調(diào)用經(jīng)歷的步驟:
創(chuàng)建一個新的對象
將構(gòu)造函數(shù)的this指向新的對象
執(zhí)行構(gòu)造函數(shù)中的代碼
返回新對象
優(yōu)點(diǎn):可以將每個實(shí)例都標(biāo)識為一種特定的類型
缺點(diǎn):每個方法都要在實(shí)例上重新創(chuàng)建一遍
4、原型模式
function Person(){} Person.prototype.name = "凱撒大帝"; Person.prototype.age = 500; var p1 = new Person(); console.log(p1.name); // 凱撒大帝 var p2 = new Person();
特點(diǎn):所有的屬性都是被很多實(shí)例共享的,但這個也是一個缺點(diǎn)。這個共享對于函數(shù)來說挺好,對于基本類型來說也還可以(實(shí)例上添加的同名屬性可以覆蓋原型上的),但是對于引用類型來說就是比較突出的問題了(修改一個,其余的也會被修改)。另外,這個模式省略了為構(gòu)造函數(shù)傳參的方便。
5、構(gòu)造函數(shù)模式和原型模式組合使用
function Person(name, age){ this.name = name; this.age = age; } Person.prototype.getName = function(){ alert(this.name); } var p = new Person("貝多芬", 200);
這種是比較通用的一種方式,結(jié)合了構(gòu)造函數(shù)模式和原型模式的優(yōu)點(diǎn),但是這種方式可能對于寫OO語言的人來說,有點(diǎn)兒不友好,畢竟這種寫法有點(diǎn)兒獨(dú)特。
6、動態(tài)原型模式
function Person(name, age){ this.name = name; this.age = age; if (typeOf this.sayName !== "function") { Person.prototype.sayName = function(){ alert(this.name); } } }
這種模式的好處是把所有的屬性全部都封裝到一個函數(shù)里面,但是會對函數(shù)做一個檢測,沒有的情況下才會去創(chuàng)建
7、寄生構(gòu)造函數(shù)模式
function Person(name, age){ var o = new Object(); o.name = name; o.age = age; o.printName = function(){ console.log(this.name); } return o; } var p = new Person("貝多芬", 55);
這個模式的一個適用場景是改寫原生的對象
8、使用es6
class Person { constructor(name){ this.name = name; } printName(){ console.log(this.name); } } const p = new Person("巴菲特")
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/93882.html
摘要:很多情況下,通常一個人類,即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù),對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍(lán)圖或原型。在中,對象通過對類的實(shí)體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實(shí)例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:很多情況下,通常一個人類,即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù),對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍(lán)圖或原型。在中,對象通過對類的實(shí)體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實(shí)例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:很多情況下,通常一個人類,即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù),對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍(lán)圖或原型。在中,對象通過對類的實(shí)體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實(shí)例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:設(shè)計(jì)模式是以面向?qū)ο缶幊虨榛A(chǔ)的,的面向?qū)ο缶幊毯蛡鹘y(tǒng)的的面向?qū)ο缶幊逃行┎顒e,這讓我一開始接觸的時候感到十分痛苦,但是這只能靠自己慢慢積累慢慢思考。想繼續(xù)了解設(shè)計(jì)模式必須要先搞懂面向?qū)ο缶幊?,否則只會讓你自己更痛苦。 JavaScript 中的構(gòu)造函數(shù) 學(xué)習(xí)總結(jié)。知識只有分享才有存在的意義。 是時候替換你的 for 循環(huán)大法了~ 《小分享》JavaScript中數(shù)組的那些迭代方法~ ...
摘要:對象是公布其接口。節(jié)選自百度百科我對于封裝的理解,可能還有一個步驟就是抽離,首先你要清楚在一個對代碼中你應(yīng)該抽離那些屬性方法,有了這些為基礎(chǔ)才能更好的做好封裝。節(jié)選自百度百科因?yàn)槭菦]有重載的概念的所以要自己編寫邏輯完成重載。 1. 前言 2. 封裝 3. 繼承 4. 多態(tài) 5. 總結(jié) 1. 前言 了解過面向?qū)ο蟮耐瑢W(xué)應(yīng)該都知道,面向?qū)ο笕齻€基本特征是:封裝、繼承、多態(tài),但是對于這三...
閱讀 2027·2021-11-19 11:37
閱讀 715·2021-11-11 16:54
閱讀 1161·2021-11-02 14:44
閱讀 3049·2021-09-02 15:40
閱讀 2368·2019-08-30 15:44
閱讀 951·2019-08-29 11:17
閱讀 1059·2019-08-26 14:06
閱讀 1552·2019-08-26 13:47