js構(gòu)造函數(shù)、索引數(shù)組和屬性的實(shí)現(xiàn)方式和使用
<script>
function p(){
var len=arguments.length;
for(var i=0;i<len;i++){
document.write(arguments[i]+"<br/>");
}
}
function Myclass(x,y){
this.x=x;
this.y=y;
this.show=function(){
return this.x+this.y;
}
}
var m1=new Myclass(1,2);
var m2=new Myclass(3,4);
p(m1.show(),m2.show());
</script>
存在的問(wèn)題
1.由于所有的實(shí)例都是復(fù)制了同一個(gè)方法所定義的實(shí)體,所以效率(內(nèi)存效率與執(zhí)行效率低下),可通過(guò)原型繼承解決
2.無(wú)法對(duì)屬性值進(jìn)行訪問(wèn)控制(private ,Public)可通過(guò)閉包解決
屬性訪問(wèn)的運(yùn)算對(duì)象不是變量而是對(duì)象的引用
僅讀取數(shù)值的整數(shù)部分的處理
Math[this<0?'celling':'floor'](this);
關(guān)聯(lián)數(shù)組
在js中必須通過(guò)對(duì)象才能實(shí)現(xiàn)關(guān)聯(lián)數(shù)組
基本操作 通過(guò)鍵取值,元素的設(shè)定,元素的刪除
<script>
var map={x:3,y:4};
p(map.x);
delete map.x; //true
p(map.x); //undefined 對(duì)不存在的元素進(jìn)行訪問(wèn)結(jié)果是undefined ,由于可以顯示地將值設(shè)置為undefined ,因此無(wú)法通過(guò)將值與undefined比較來(lái)判斷值是否存在 ,可以通過(guò)for in進(jìn)行枚舉
a='undefined';
p(a);//undefined
p(typeof map.x==a); //true
</script>
作為關(guān)聯(lián)數(shù)組應(yīng)該注意的點(diǎn)
<script>
function Myclass(x,y){
this.x=x;
this.y=y;
}
Myclass.prototype.z=5;
var obj=new Myclass(1,2);
for(var key in obj){
p(key+":"+obj[key]); //會(huì)枚舉出通過(guò)原型繼承來(lái)的屬性
}
//x:1 y:2 z:5
delete obj.x;//true
p(obj.x); //undefined
p(obj.z); //5
//通過(guò)原型繼承來(lái)的屬性 無(wú)法被delete刪除
delete obj.z; //true
p(obj.z);//5
//在將對(duì)象作為關(guān)聯(lián)數(shù)組使用時(shí),通常都會(huì)使用字面量來(lái)創(chuàng)建,即使視圖通過(guò)使用空的對(duì)象字面量來(lái)創(chuàng)建一個(gè)沒(méi)有元素的關(guān)聯(lián)數(shù)組,也仍會(huì)從Object類中繼承原型的屬性
p('toString' in obj); //true
var obj1={};
p('toString' in obj1);//true
//通過(guò) for in枚舉
p(obj1.length); //undefined
for(var k in obj1){
p(obj1[k]);
}
//沒(méi)有元素 被枚舉出來(lái) 這是由于enumerable屬性的緣故
//通過(guò)hasOwnProperty來(lái)判斷 是本身的屬性還是通過(guò) 參與原型繼承而來(lái)的屬性
var map={};
p(map.hasOwnProperty('toString')); //false
map['toString']=1;
p(map.hasOwnProperty('toString')); //true
delete map['toString'] ;
p(map.hasOwnProperty('toString'));//false
</script>
屬性的屬性
對(duì)象的屬性 也是有些屬性的
如下表總結(jié)了在ECMAScript第五版定義了的屬性 ,屬性值被定為為值屬性
表格1
|
屬性的屬性名 |
含義 |
|
writable |
可以改寫(xiě)屬性的值 |
|
enumerable |
可以通過(guò)for in枚舉出 |
|
configurable |
可以改變屬性的屬性,可以刪除屬性 |
|
get |
可以指定屬性值的getter函數(shù) |
|
set |
可以指定屬性值的setter函數(shù) |
不可變對(duì)象
即生成之后狀態(tài)不能再被改變的對(duì)象,字符串對(duì)象就是典型的不可變對(duì)象
靈活運(yùn)用不可變對(duì)象可以提高程序的健壯性,比如在將傳遞給方法參數(shù)時(shí),存在方法對(duì)對(duì)象內(nèi)容的改寫(xiě)等
js中可通過(guò)以下方式實(shí)現(xiàn)不可變對(duì)象
1.將屬性(狀態(tài)隱藏藏) ,不提供變更操作(閉包實(shí)現(xiàn))
2.靈活運(yùn)用ECMAScript第五版提供的函數(shù)
3.靈活運(yùn)用writable,configurable屬性以及setter和getter
ECMAScript第五版中用于支持對(duì)象不可變的函數(shù) 見(jiàn)下表格
|
方法名 |
屬性新增 |
屬性刪除 |
屬性值變更 |
確認(rèn)方法 |
|
preventExtensions |
x |
o |
o |
Object.isExtensible |
|
seal |
x |
x |
o |
Object.isSealed |
|
freeze |
x |
x |
x |
Object.isFrozen |
Object.preventExtensions例子
<script>
var obj={x:2,y:3};
Object.preventExtensions(obj);
//無(wú)法新增屬性
obj.z=4;
p(Object.keys(obj));//x,y
//可以刪除屬性
delete obj.y;
p(Object.keys(obj)); //x
//可以更改屬性值
obj.x=20;
p(obj.x); //20
//Object.seal例子 將屬性的configurable設(shè)置為假
var obj={x:2,y:3};
Object.seal(obj);
//無(wú)法新增 也無(wú)法刪除
obj.z=3;
p(Object.keys(obj)); //x,y
delete obj.x; //false
p(Object.keys(obj));//x,y
//可以改變 屬性值
obj.x=20;
p(obj.x);//20
//Object.freeze例子 將屬性的writable設(shè)置為假
var obj={x:2,y:3};
Object.freeze(obj);
//無(wú)法新增 也無(wú)法刪除,也無(wú)法改變屬性值
obj.z=3;
p(Object.keys(obj)); //x,y
delete obj.x;
p(Object.keys(obj));//x,y
//可以改變 屬性值
obj.x=20;
p(obj.x);//20
</script>
需要注意
1.對(duì)于以上三種方法一旦更改就無(wú)法還原
2.如果想讓原型繼承中的被繼承的方法也不可改變,需要對(duì)其進(jìn)行顯示操作
相關(guān)文章
jquery結(jié)合CSS使用validate實(shí)現(xiàn)漂亮的驗(yàn)證
這篇文章主要介紹了jquery結(jié)合CSS使用validate實(shí)現(xiàn)漂亮的驗(yàn)證,需要的朋友可以參考下2015-01-01
bootstrap confirmation按鈕提示組件使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap confirmation按鈕提示組件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
深入理解JavaScript的事件執(zhí)行機(jī)制
本文主要介紹了JavaScript的事件執(zhí)行機(jī)制,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
基于打包工具Webpack進(jìn)行項(xiàng)目開(kāi)發(fā)實(shí)例
這篇文章主要介紹了基于打包工具Webpack進(jìn)行項(xiàng)目開(kāi)發(fā)實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
js實(shí)現(xiàn)開(kāi)關(guān)燈效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)開(kāi)關(guān)燈效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10
javascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法
下面小編就為大家?guī)?lái)一篇javascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
JS生成登錄驗(yàn)證碼的實(shí)現(xiàn)示例
本文主要介紹了JS生成登錄驗(yàn)證碼的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
javascript Array.remove() 數(shù)組刪除
下面的代碼主要是實(shí)現(xiàn)了,刪除數(shù)組中指定的值。2009-08-08

