JS筆記—— 對(duì)象 (原型對(duì)象)

????JavaScript對(duì)象是一個(gè)很有意思的數(shù)據(jù)類(lèi)型嘱朽,由于js沒(méi)有類(lèi)的概念谜疤,js對(duì)象就承擔(dān)起JavaScript面向?qū)ο蟮闹厝巍?br> ????JavaScript 并沒(méi)有類(lèi)的概念在张,但是它有對(duì)象弛槐。
????ECMSscript將對(duì)象定義為無(wú)序?qū)傩缘募希鋵傩钥梢园局迪炀椤?duì)象或者函數(shù)驾霜。
????JavaScript的對(duì)象的屬性沒(méi)有嚴(yán)格的順序案训,每個(gè)屬性和方法都需有一個(gè)名字和對(duì)應(yīng)的值买置,看起來(lái)和JSON基本沒(méi)有區(qū)別(實(shí)際上js對(duì)象和JSON可相互轉(zhuǎn)換)。

對(duì)象基本概念

對(duì)象的創(chuàng)建非常的簡(jiǎn)單>>>

顯示申明
var obj = new Object()
obj.name = "tom"
obj.age = 21
obj.sayName = function(){return this.name}

**對(duì)象字面量**
var obj = {name:"tom",
            age:21,
            sayName:function(){return this.name}
        }

????ECMA-262第五版定義了內(nèi)部采用的特性時(shí)(attribute), 描述了屬性(property)
注:property是用來(lái)描述對(duì)象的强霎,attribute是用來(lái)描述property的元數(shù)據(jù)忿项,此處的attribute區(qū)別于HTML的attribute,HTML標(biāo)簽的attribute是標(biāo)簽本身所具有的描述數(shù)據(jù),和property描述的對(duì)象(DOM)不同轩触,也就是這兩個(gè)的描述參照并不是同一基準(zhǔn)

屬性

????為了支持JavaScript引擎工作寞酿,ECMAScript5規(guī)定了屬性的類(lèi)型:數(shù)據(jù)屬性訪問(wèn)器屬性

數(shù)據(jù)屬性

????數(shù)據(jù)屬性:數(shù)據(jù)屬性包含一個(gè)數(shù)據(jù)值的位置脱柱,在這個(gè)位置可以讀取和寫(xiě)入值伐弹。數(shù)據(jù)屬性有四個(gè)描述其行為的特性。

[[Configurable]]:是否能夠?qū)傩赃M(jìn)行其他更改榨为,包括刪除惨好,修改等
[[Enumerable]]:是否能通過(guò)for-in循環(huán)返回屬性
[[Writable]]:如字面意思,能否寫(xiě)入值(修改值)
[[Value]]:包含屬性的數(shù)據(jù)值随闺,代表屬性值得存儲(chǔ)位置

四個(gè)特性默認(rèn)值為日川,true,true,true,undefined

????修改屬性默認(rèn)特性:Object.defineProperty(obj,propertyName,attrConfig)
????該方法接收三個(gè)參數(shù):修改的對(duì)象,修改的屬性值名稱(chēng)矩乐,該屬性的特性描述符對(duì)象

例如:
var Car = {}
Object.defineProperty(Car,"price",{
    writeable:false,
    value:120000
})

注意:運(yùn)用Object.defineProperty()產(chǎn)生的屬性的特性默認(rèn)為false,false,false,undefined
所以上面的例子中Car的price屬性中龄句,configurable默認(rèn)為false,enumerable默認(rèn)為false
直接通過(guò)對(duì)象創(chuàng)建的屬性并無(wú)此限制

訪問(wèn)器屬性

訪問(wèn)器屬性就是我們?cè)谄渌Z(yǔ)言中常看到的getter和setter函數(shù)散罕,訪問(wèn)器屬性并不包含值,它也有四個(gè)特性

[[Configurable]]:是否能夠?qū)傩赃M(jìn)行其他更改分歇,包括刪除,修改等
[[Enumerable]]:是否能通過(guò)for-in循環(huán)返回屬性
[[Get]]:讀取數(shù)據(jù)時(shí)調(diào)用的函數(shù)笨使,默認(rèn)為undefined
[[Set]]:寫(xiě)入數(shù)據(jù)時(shí)調(diào)用的函數(shù)卿樱,默認(rèn)為undefined

例如:

var people = {
    name:"tom",
    _age:17,
    adult:false
}

Object.defineProperty(people,"age",{
    get:function(){
        return this._age
    },
    set:function(val){
        this._age = val
        if(val > 18){
            this.adult = true
        }
    }
})

定義多個(gè)屬性
要想定義一個(gè)屬性就調(diào)用一次definProperty方法會(huì)非常繁瑣,ES5就存在方法defineProperties支持多屬性定義硫椰,只是傳入的參數(shù)有些許區(qū)別
例如:

Object.defineProperties("people",{
    name:{
        writable:false,
        value:"Amy"
    },
    _age:{
        get:function(){}
        set:function(){}
    }
})

讀取屬性的特性
使用ECMAScript5的Object.getOwnPropertyDescriptor(),可以取得給定屬性的描述符
參數(shù):包含待查屬性的對(duì)象繁调,待查屬性的名稱(chēng)
例如:

var perple = {}
Object.defineProperty(perple,"name",{
    writable:false,
    value:"Jack"
})
var result = Object.getOwnPropertyDescriptor(people,"name")
console.log(result.value)
console.log(result.writable)

原型對(duì)象

????對(duì)象的創(chuàng)建往往是重復(fù)的,就好像創(chuàng)建一個(gè)學(xué)生對(duì)象并不能完成所有工作靶草,如果牽扯到班級(jí)的概念蹄胰,可能就要?jiǎng)?chuàng)建班級(jí)中所有學(xué)生的對(duì)象了,對(duì)象也有很多的重復(fù)性奕翔,比如一個(gè)班的人所在班級(jí)學(xué)校都是一樣的裕寨,是共有的,為了簡(jiǎn)化代碼派继,也就有了原型對(duì)象的概念宾袜。
注:對(duì)象創(chuàng)建中,每一個(gè)學(xué)生代表一個(gè)實(shí)例驾窟,這和其他OO(面向?qū)ο螅┱Z(yǔ)言的類(lèi)具有相似的理念庆猫。

????我們創(chuàng)建的每一個(gè)函數(shù)都有一個(gè)prototype(原型)屬性,這個(gè)屬性是一個(gè)指針绅络,指向一個(gè)對(duì)象月培,而這個(gè)對(duì)象的用途嘁字。就是可以包含那些由特定類(lèi)型的實(shí)例共享的屬性和方法。通過(guò)字面意思杉畜,prototype就是通過(guò)調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對(duì)象的原型對(duì)象纪蜒。而原型對(duì)象也有一個(gè)指針constructor指向他所代表的構(gòu)造函數(shù)。例如:Person.prototype.constructor == Person

????原型對(duì)象就像是一個(gè)班級(jí)的標(biāo)簽此叠,實(shí)例就是班級(jí)的學(xué)生纯续,不管這個(gè)班級(jí)來(lái)了多少個(gè)新學(xué)生,只要這個(gè)班級(jí)叫一年級(jí)灭袁,那么這個(gè)班級(jí)的學(xué)生就都是一年級(jí)學(xué)生杆烁。原型對(duì)象包含所有實(shí)例公共的屬性為所有實(shí)例共享。
????創(chuàng)建了自定義的構(gòu)造函數(shù)之后简卧,其原型對(duì)象默認(rèn)只會(huì)取得 constructor 屬性兔魂;至于其他方法,則都是從 Object 繼承而來(lái)的举娩。當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個(gè)新實(shí)例后析校,該實(shí)例的內(nèi)部將包含一個(gè)指針(內(nèi)部屬性),指向構(gòu)造函數(shù)的原型對(duì)象铜涉。ECMA-262 第 5 版中管這個(gè)指針叫 [[Prototype]] 智玻。雖然在腳本中沒(méi)有標(biāo)準(zhǔn)的方式訪問(wèn) [[Prototype]] ,但 Firefox芙代、Safari 和 Chrome 在每個(gè)對(duì)象上都支持一個(gè)屬性__proto__吊奢;而在其他實(shí)現(xiàn)中,這個(gè)屬性對(duì)腳本則是完全不可見(jiàn)的纹烹。不過(guò)页滚,要明確的真正重要的一點(diǎn)就是,這個(gè)連接存在于實(shí)例與構(gòu)造函數(shù)的原型對(duì)象之間铺呵,而不是存在于實(shí)例與構(gòu)造函數(shù)之間裹驰。

function Person(){}
    Person.prototype.name="Nicholis"
    Person.prototype.age=29
    Person.prototype.job="Software Engineer"
    Person.prototype.sayName=function(){
        console.log(this.name)
}

var person1 = new Person()
person1 .sayName() // Nicholis
var person2 = new Person()
person2 .sayName() // Nicholis
console.log(person1 .sayName == person2 .sayName) // true

對(duì)象實(shí)例關(guān)系圖

需要注意的幾點(diǎn):

  1. 構(gòu)造函數(shù)的prototype指針指向該特定類(lèi)型對(duì)象(Person)的原型對(duì)象,同時(shí)該對(duì)象的constructor指正指向該構(gòu)造函數(shù)片挂。
  2. 實(shí)例的[[prototype]]并非構(gòu)造函數(shù)的prototype指針幻林,在主流瀏覽器中的實(shí)際實(shí)現(xiàn)是_proto_指針,指向構(gòu)造函數(shù)的原型對(duì)象音念。
  3. 實(shí)例與構(gòu)造函數(shù)并無(wú)直接關(guān)系

原型對(duì)象屬性和實(shí)例屬性

原型對(duì)象屬性說(shuō)不定也有和實(shí)例屬性沖突的時(shí)候沪饺,比如運(yùn)動(dòng)會(huì)的時(shí)候大多數(shù)人在開(kāi)幕式的任務(wù)就是走隊(duì)列喊口號(hào),但是領(lǐng)頭的人喊的口號(hào)和班里其他人很有可能不同闷愤。
領(lǐng)頭:一年三班
同學(xué):團(tuán)結(jié)一心
領(lǐng)頭一年三班
同學(xué):共創(chuàng)佳績(jī)

在JS中整葡,發(fā)生了沖突該如何選擇,和現(xiàn)實(shí)中也是相差無(wú)幾的肝谭。

function Class13(){}
Class13.prototype.sentence= "永爭(zhēng)第一";
Class13.prototype.say = function(){
    alert(this.sentence);
};
var student = new Class13(); // 大多數(shù)同學(xué)
var leader= new Class13();  // 領(lǐng)頭人
leader.sentence= "一年三班";
alert(leader.say ()); //"一年三班" —— 來(lái)自實(shí)例
alert(student .say ()); //"永爭(zhēng)第一" ——原型

????以上代碼不難看出掘宪,student實(shí)例沒(méi)創(chuàng)建實(shí)例屬性,便輸出了原型對(duì)象屬性攘烛,而設(shè)置了實(shí)例屬性的leader輸出的是實(shí)例屬性魏滚,領(lǐng)頭人在作為同學(xué)的基礎(chǔ)上口號(hào)是“永爭(zhēng)第一”,但是新的任務(wù)讓他產(chǎn)生了新的屬性坟漱,屏蔽了之前的設(shè)置鼠次。
????當(dāng)為對(duì)象實(shí)例添加一個(gè)屬性時(shí),這個(gè)屬性就會(huì)屏蔽原型對(duì)象中保存的同名屬性芋齿;換句話說(shuō)腥寇,添加這個(gè)屬性只會(huì)阻止我們?cè)L問(wèn)原型中的那個(gè)屬性,但不會(huì)修改那個(gè)屬性觅捆。即使將這個(gè)屬性設(shè)置為 null 赦役,也只會(huì)在實(shí)例中設(shè)置這個(gè)屬性,而不會(huì)恢復(fù)其指向原型的連接栅炒。

更簡(jiǎn)單的原型語(yǔ)法

每一次都要書(shū)寫(xiě)xxx.prototype著實(shí)讓人心煩掂摔,還好我們有更簡(jiǎn)便的方法——字面量

function Person(){}
Person.prototype = {
    name : "Nicholas",
    age : 29,
    job: "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};

但是用字面量的方法hi重寫(xiě)整個(gè)原型對(duì)象,導(dǎo)致的直接后果就是constructor指針不再是默認(rèn)指向構(gòu)造函數(shù)赢赊,而是Object
解決辦法一:在字面量中定義constructor

function Person(){}
Person.prototype = {
    constructor : Person,
    name : "Nicholas",
    age : 29,
    job: "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};

問(wèn)題:constructor默認(rèn)數(shù)據(jù)屬性enumerable會(huì)設(shè)置為true

解決辦法二:通過(guò)Object.defineProperty()重新定義constructor

Object.defineProperty(Person.prototype, "constructor", {
    enumerable: false,
    value: Person
});

原型對(duì)象的問(wèn)題

  1. 省略了為構(gòu)造函數(shù)傳遞初始化參數(shù)這一環(huán)節(jié)乙漓,結(jié)果所有實(shí)例在默認(rèn)情況下都將取得相同的屬性值。
  2. 原型對(duì)象包含引用類(lèi)型值的屬性释移,會(huì)使得實(shí)例對(duì)該屬性的操作產(chǎn)生連鎖反應(yīng)叭披。
function Person(){
}
Person.prototype = {
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    friends : ["Shelby", "Court"],
    sayName : function () {
        alert(this.name);
    }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true

以上代碼反映了引用類(lèi)型在原型對(duì)象中的問(wèn)題:當(dāng)實(shí)例直接對(duì)引用類(lèi)型進(jìn)行方法操作時(shí),將不會(huì)為實(shí)例創(chuàng)建同名實(shí)例屬性玩讳,而是尋址涩蜘,找到friends數(shù)組的地址,再進(jìn)行push操作熏纯,這就導(dǎo)致了實(shí)例改變了原型對(duì)象的值皱坛,使得其他實(shí)例也會(huì)取得改變后的friends。


單純的將引用類(lèi)型進(jìn)行賦值操作豆巨,那就不會(huì)有以上問(wèn)題剩辟,因?yàn)檫@個(gè)過(guò)程中并沒(méi)有尋址這個(gè)環(huán)節(jié),而直接進(jìn)行了實(shí)例屬性申明和賦值往扔。如下:

var person1 = new Person();
var person2 = new Person();
person1.friends=["hello"];
console.log(person1.friends); //"hello"
console.log(person2.friends); //"Shelby,Court,Van"
console.log(person1.friends === person2.friends); //false
未命名文件.png

相關(guān)方法

isPrototypeOf()
用途:判斷實(shí)例與目標(biāo)是否含有原型對(duì)象關(guān)系贩猎,即判斷對(duì)象是否是某實(shí)例的原型對(duì)象

alert(Person.prototype.isPrototypeOf(person1)); //true
alert(Person.prototype.isPrototypeOf(person2)); //true

Object.getPrototypeOf()
用途:獲取實(shí)例的原型對(duì)象

alert(Object.getPrototypeOf(person1) == Person.prototype); //true
alert(Object.getPrototypeOf(person1).name); //"Nicholas"

hasOwnProperty()
用途: 檢測(cè)一個(gè)屬性是存在于實(shí)例中。

function Person(){}
Person.prototype.name = "Tom";
var person1 = new Person();
var person2 = new Person();
person2.name = "Amy"
alert(person1.hasOwnProperty("name")); //false
alert(person2.hasOwnProperty("name")); //true
alert(person2.hasOwnProperty("nam")); //false

注:該方法結(jié)合操作符 in 可判斷屬性來(lái)自實(shí)例還是原型
in操作符會(huì)判斷給定屬性是否能通過(guò)對(duì)象訪問(wèn)萍膛,如果能吭服,返回true,不能蝗罗,返回false
結(jié)合hasOwnProperty()就很好判斷屬性來(lái)源了

function hasPrototypeProperty(object, name){
    return !object.hasOwnProperty(name) && (name in object);
}
alert(hasPrototypeProperty(person1, "name")); //true
alert(hasPrototypeProperty(person2, "name")); //false

Object.keys()
用途:要取得對(duì)象上所有可枚舉的實(shí)例屬性艇棕。接收一個(gè)對(duì)象作為參數(shù)蝌戒,返回一個(gè)包含所有可枚舉屬性的字符串?dāng)?shù)組。

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};
var keys = Object.keys(Person.prototype);
alert(keys); //"name,age,job,sayName"
var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var p1keys = Object.keys(p1);
alert(p1keys); //"name,age"

Object.getOwnPropertyNames()
用途:得到所有實(shí)例屬性沼琉,無(wú)論它是否可枚舉北苟。

ar keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys); //"constructor,name,age,job,sayName"
// constructor 不可枚舉
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市打瘪,隨后出現(xiàn)的幾起案子友鼻,更是在濱河造成了極大的恐慌,老刑警劉巖闺骚,帶你破解...
    沈念sama閱讀 206,602評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件彩扔,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡僻爽,警方通過(guò)查閱死者的電腦和手機(jī)虫碉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)胸梆,“玉大人蔗衡,你說(shuō)我怎么就攤上這事∪槿疲” “怎么了绞惦?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,878評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)洋措。 經(jīng)常有香客問(wèn)我济蝉,道長(zhǎng),這世上最難降的妖魔是什么菠发? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,306評(píng)論 1 279
  • 正文 為了忘掉前任王滤,我火速辦了婚禮,結(jié)果婚禮上滓鸠,老公的妹妹穿的比我還像新娘雁乡。我一直安慰自己,他們只是感情好糜俗,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評(píng)論 5 373
  • 文/花漫 我一把揭開(kāi)白布踱稍。 她就那樣靜靜地躺著,像睡著了一般悠抹。 火紅的嫁衣襯著肌膚如雪珠月。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,071評(píng)論 1 285
  • 那天楔敌,我揣著相機(jī)與錄音啤挎,去河邊找鬼。 笑死卵凑,一個(gè)胖子當(dāng)著我的面吹牛庆聘,可吹牛的內(nèi)容都是我干的胜臊。 我是一名探鬼主播,決...
    沈念sama閱讀 38,382評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼伙判,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼象对!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起澳腹,我...
    開(kāi)封第一講書(shū)人閱讀 37,006評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎杨何,沒(méi)想到半個(gè)月后酱塔,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,512評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡危虱,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評(píng)論 2 325
  • 正文 我和宋清朗相戀三年羊娃,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片埃跷。...
    茶點(diǎn)故事閱讀 38,094評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蕊玷,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出弥雹,到底是詐尸還是另有隱情垃帅,我是刑警寧澤,帶...
    沈念sama閱讀 33,732評(píng)論 4 323
  • 正文 年R本政府宣布剪勿,位于F島的核電站贸诚,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏厕吉。R本人自食惡果不足惜酱固,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望头朱。 院中可真熱鬧运悲,春花似錦、人聲如沸项钮。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,286評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)烁巫。三九已至鳖敷,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間程拭,已是汗流浹背定踱。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,512評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留恃鞋,地道東北人崖媚。 一個(gè)月前我還...
    沈念sama閱讀 45,536評(píng)論 2 354
  • 正文 我出身青樓亦歉,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親畅哑。 傳聞我的和親對(duì)象是個(gè)殘疾皇子肴楷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評(píng)論 2 345