js進(jìn)階篇:對(duì)象和原型

1.js中沒(méi)有太明確的類的概念,每個(gè)function函數(shù)都可以看做是一個(gè)類,類中可以通過(guò)prototype屬性來(lái)添加這個(gè)
類中的方法和字段。
2.一般情況把對(duì)象賦值或者添加到一個(gè)函數(shù)的prototype屬性中彻犁,函數(shù)的prototype
對(duì)對(duì)象的值做出更改柬赐,對(duì)象本身也是會(huì)發(fā)生變化的绰姻,可以使用一種臨時(shí)函數(shù)來(lái)打破這種關(guān)系鏈枉侧。
臨時(shí)函數(shù)new F();

代碼示例:
var obj = {x:0,y:1};
var F = function(){};
F.prototype = obj;
var f = new F();
console.log(f); 

//實(shí)例化之后 obj這個(gè)對(duì)象會(huì)掛在到f對(duì)象的原型中
f.x = "zs"; //這個(gè)時(shí)候其實(shí)是為f這個(gè)對(duì)象添加了一個(gè)自身屬性。所有并沒(méi)有對(duì)原型屬性進(jìn)行覆蓋更改.
console.log(obj); //{x:0,y:1}; 所以這里的obj對(duì)象不會(huì)有任何變化,也就是說(shuō)這里只是繼承了它的原型屬性狂芋。
如果瀏覽器支持ES5可以通過(guò) Object.create()榨馁;這個(gè)方法來(lái)直接使用,和臨時(shí)構(gòu)造器的函數(shù)等價(jià)

代碼示例:
var f = Object.create({x:2,y:3}); 

3.一個(gè)函數(shù)使用prototype添加方法屬性帜矾,和不使用prototype的區(qū)別:

function person(){}
person.name = function(){console.log("name")};  //相當(dāng)于使用了靜態(tài)方法  
person.prototype.age = function(){};     //通過(guò)new

由于使用了靜態(tài)方法:調(diào)用的時(shí)候直接 person.name();即可 如果new了之后會(huì)出錯(cuò)
age屬于對(duì)象的方式翼虫,需要new之后使用。
4.使用 hasOwnProperty 方法可以判斷屬性是否存在(用來(lái)檢測(cè)是否含有自身屬性)屡萤。
5.for...in 遍歷對(duì)象時(shí)珍剑,只會(huì)遍歷可枚舉屬性。
6.自身屬性和原型屬性

代碼示例:
function func()
{
    this.name = "";    //自身屬性
}
func.prototype.hello = "";   //原型屬性

所謂自身屬性通過(guò)構(gòu)造器定義的屬性死陆,原型屬性會(huì)掛載到prototype上招拙。
通過(guò) 關(guān)鍵字 new之后會(huì)將屬性掛載到這個(gè)func中,然后就可以通過(guò)for in關(guān)鍵字查找措译。

var f = new func();
for(var p in f)
{
   if(f.hasOwnProperty(b))  //判斷是自身屬性
      console.log(p);       //判斷之后這里只會(huì)打印name這個(gè)屬性
}

這里我們也是可以這樣理解的:f.prototype == f.proto; //true

對(duì)象查詢屬性的方式别凤,會(huì)首先在自身屬性中去查找,如果查找不到的話會(huì)通過(guò)proto到對(duì)象的原型中去查找领虹,如果
通過(guò)原型依然沒(méi)有找到规哪,會(huì)去原型對(duì)象的原型中再去查找,一直到找到或者屬性為null的時(shí)候?yàn)橹顾ァ_@里也可以得出
一個(gè)結(jié)論:js的原型鏈的本質(zhì)在于proto這個(gè)神秘的鏈接

7.對(duì)象可以通過(guò) delete 刪除指定對(duì)象的屬性诉稍,當(dāng)刪除一個(gè)不存在的屬性時(shí)也同樣會(huì)返回true,用來(lái)刪除變量和其他,可配置屬性是無(wú)效的

示例:var a = "liu ying";
     delete a; //返回一個(gè)  false,嚴(yán)格模式下這樣做的話會(huì)直接報(bào)錯(cuò)

8.Object.create()的使用
該方法接收兩個(gè)參數(shù),第一個(gè)參數(shù)是一個(gè)對(duì)象猾蒂,第二個(gè)為可選參數(shù)均唉。通過(guò)對(duì)象的屬性進(jìn)一步描述是晨。傳入一個(gè)對(duì)象后
返回值會(huì)繼承傳入對(duì)象的屬性肚菠,通過(guò)對(duì)該返回值做修改,傳入的遠(yuǎn)對(duì)象值不會(huì)隨著變化罩缴。

代碼示例://
var a = {name:"liu ying",age:23};  
var b = create.Object(a);
b.name = "hello";  //對(duì)返回值做修改
console.log(a);    //{name:"liu ying",age:23}   這個(gè)時(shí)候a對(duì)象的值的屬性依然不會(huì)變化蚊逢。
所以從這個(gè)屬性可以看出,打破了原有的引用關(guān)系鏈箫章。

9.內(nèi)置構(gòu)造函數(shù)的原型是只讀的烙荷,Object.prototype = "liu ying",比如這樣設(shè)置,不會(huì)報(bào)錯(cuò)檬寂,但是賦值是沒(méi)有
生效的终抽。
10.hasOwnProperty可以用來(lái)檢測(cè)當(dāng)前的屬性是否是對(duì)象的自身屬性,如果是繼承的屬性將會(huì)返回false
11.constructor屬性:所有的對(duì)象都會(huì)從他的原型上去繼承一個(gè)constructor屬性,函數(shù)其實(shí)也是屬于一種特殊的對(duì)象。

代碼示例:
var a = function(){};
var b = new a();
b.constructor == Object;   //這里是返回一個(gè)true;
但是有些js的內(nèi)置對(duì)象,不通過(guò)實(shí)例化的方法也可直接比較昼伴,也會(huì)返回true匾旭。
比如:
document.constructor == Document;
document.form3.constructor == Form;

12.proto屬性:該屬性是一個(gè)訪問(wèn)器,(一個(gè)getter函數(shù)和一個(gè)setter函數(shù)),它公開(kāi)訪問(wèn)它的對(duì)象的內(nèi)部prototype屬性(對(duì)象或null)圃郊。
proto的使用是有爭(zhēng)議的价涝,盡量不要使用
13.Object.defineproperty()屬性
該屬性具備三個(gè)參數(shù),第一個(gè)為目標(biāo)對(duì)象,第二個(gè)為目標(biāo)對(duì)象的key值,第三個(gè)參數(shù)為對(duì)象配置參數(shù).詳細(xì)說(shuō)明一下第三個(gè)參數(shù)
第三個(gè)參數(shù)和設(shè)置一般對(duì)象一樣持舆,可以設(shè)置是否可枚舉(enumerable),是否可配置(configrable),是否可寫(writable);
這里默認(rèn)都是false.
如果設(shè)置不可枚舉色瘩,for.. in 的話是無(wú)法遍歷出來(lái)內(nèi)置的不可枚舉屬性的。通過(guò)Object.defineproperty可以創(chuàng)建對(duì)象
屬性:

代碼示例
var o = {x:0,y:1};
Object.defineproperty(o,"z",{
    configrable:true,
    enumerable:true,
    writable:true,
    value:5
});
console.log(o);    //{x:0,y:1,z:5}

除了添加可配置的屬性逸寓,還有一個(gè)特別強(qiáng)大的功能居兆,就是get和set方法,配置get和set方法以后可以檢測(cè)當(dāng)前屬性的變化
如果屬性值變化的話,會(huì)自動(dòng)觸發(fā)set方法.

代碼示例:
var o = {x:0,y:1};
Object.defineproperty(o,"x",{
    configrable:true,
    enumerable:true,
    writable:true,
    get:function()
    {
        return this.x;
    },
    set:function(newVal)
    {
        this.x = newVal;
    }
});
//這里的get和set如果我手動(dòng)修改了o.x的值的話竹伸,set方法就會(huì)自動(dòng)觸發(fā)史辙,然后get方法返回值。
o.x = 2;   //這個(gè)時(shí)候set方法就會(huì)觸發(fā)

14.Object.freeze()屬性可以凍結(jié)一個(gè)對(duì)象佩伤,使該對(duì)象為只讀聊倔。如果一個(gè)對(duì)象的屬性也為對(duì)象,則凍結(jié)無(wú)效生巡,如果
需要徹底的凍結(jié)的話就要使用遞歸來(lái)層層使用 freeze()屬性來(lái)設(shè)置耙蔑。
15.Object.getOwnPropertyDescriptor();該方法帶兩個(gè)參數(shù):對(duì)象和key,通過(guò)key查找該對(duì)象的自身屬性孤荣,然后會(huì)返回
當(dāng)前對(duì)象的一些信息(value,是否枚舉甸陌,是否可寫)等等.
16.getOwnPropertyNames(),接收一個(gè)參數(shù),需要是一個(gè)對(duì)象類型,根據(jù)傳入的數(shù)據(jù)返回一個(gè)數(shù)組(當(dāng)前的對(duì)象的key值);和Object.keys相比
個(gè)人覺(jué)得還是有一點(diǎn)相似之處的,不同的是該屬性包括不可枚舉的屬性名也會(huì)一起返回盐股。
17.Object.getPrototypeOf() 接收一個(gè)對(duì)象钱豁,能夠返回該對(duì)象的原型。

代碼示例:
var Vue = function(){};
Vue.prototype.hello = function(){};
var vue = new Vue();
//這里把vue這個(gè)對(duì)象傳入 
var v = Object.getPrototypeOf(vue);
console.log(v);  //{hello:function(){}}  

18.Object.is()屬性疯汁,接收兩個(gè)值牲尺,判斷兩個(gè)值是否完全相等,返回一個(gè)布爾值幌蚊。
19.Object.isFrozen() 方法判斷一個(gè)對(duì)象是否被凍結(jié)(frozen)谤碳。 這里的凍結(jié)指的是所有的配置屬性都是凍結(jié)狀態(tài),才會(huì)返回true
20.obj.propertyIsEnumerable(prop);可以判斷該對(duì)象的當(dāng)前屬性是否可枚舉。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末溢豆,一起剝皮案震驚了整個(gè)濱河市蜒简,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌漩仙,老刑警劉巖搓茬,帶你破解...
    沈念sama閱讀 216,591評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件犹赖,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡卷仑,警方通過(guò)查閱死者的電腦和手機(jī)冷尉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)系枪,“玉大人雀哨,你說(shuō)我怎么就攤上這事∷揭” “怎么了雾棺?”我有些...
    開(kāi)封第一講書人閱讀 162,823評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)衬浑。 經(jīng)常有香客問(wèn)我捌浩,道長(zhǎng),這世上最難降的妖魔是什么工秩? 我笑而不...
    開(kāi)封第一講書人閱讀 58,204評(píng)論 1 292
  • 正文 為了忘掉前任尸饺,我火速辦了婚禮,結(jié)果婚禮上助币,老公的妹妹穿的比我還像新娘浪听。我一直安慰自己,他們只是感情好眉菱,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布迹栓。 她就那樣靜靜地躺著,像睡著了一般俭缓。 火紅的嫁衣襯著肌膚如雪克伊。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 51,190評(píng)論 1 299
  • 那天华坦,我揣著相機(jī)與錄音愿吹,去河邊找鬼。 笑死惜姐,一個(gè)胖子當(dāng)著我的面吹牛犁跪,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播载弄,決...
    沈念sama閱讀 40,078評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼耘拇,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼撵颊!你這毒婦竟也來(lái)了宇攻?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 38,923評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤倡勇,失蹤者是張志新(化名)和其女友劉穎逞刷,沒(méi)想到半個(gè)月后嘉涌,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,334評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡夸浅,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評(píng)論 2 333
  • 正文 我和宋清朗相戀三年仑最,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片帆喇。...
    茶點(diǎn)故事閱讀 39,727評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡警医,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出坯钦,到底是詐尸還是另有隱情预皇,我是刑警寧澤,帶...
    沈念sama閱讀 35,428評(píng)論 5 343
  • 正文 年R本政府宣布婉刀,位于F島的核電站吟温,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏突颊。R本人自食惡果不足惜鲁豪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望律秃。 院中可真熱鬧爬橡,春花似錦、人聲如沸棒动。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,672評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)迁客。三九已至郭宝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間掷漱,已是汗流浹背粘室。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,826評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留卜范,地道東北人衔统。 一個(gè)月前我還...
    沈念sama閱讀 47,734評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像海雪,于是被迫代替她去往敵國(guó)和親锦爵。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容