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)前屬性是否可枚舉。