js建構子、索引數組和屬性的實作方式和使用_javascript技巧

<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>

存在的問題
1.由於所有的實例都是複製了同一個方法所定義的實體，所以效率(內存效率與執行效率低下),可透過原型繼承解決
2.無法對屬性值進行存取控制(private ,Public)可透過閉包解決
屬性存取的運算物件不是變數而是物件的參考
僅讀取數值的整數部分的處理
Math[this

關聯數組
在js中必須透過物件才能實現關聯數組
基本操作 透過鍵取值，元素的設定,元素的刪除

<script>
var map={x:3,y:4};
p(map.x);
delete map.x; //true
p(map.x); //undefined 对不存在的元素进行访问结果是undefined ,由于可以显示地将值设置为undefined ，因此无法通过将值与undefined比较来判断值是否存在 ，可以通过for in进行枚举
a='undefined';
p(a);//undefined
p(typeof map.x==a); //true
</script>

作為關聯數組應該注意的點

<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]); //会枚举出通过原型继承来的属性
}
//x:1 y:2 z:5
delete obj.x;//true
p(obj.x); //undefined
p(obj.z); //5
//通过原型继承来的属性 无法被delete删除
delete obj.z; //true
p(obj.z);//5
//在将对象作为关联数组使用时,通常都会使用字面量来创建，即使视图通过使用空的对象字面量来创建一个没有元素的关联数组，也仍会从Object类中继承原型的属性
p('toString' in obj); //true
var obj1={};
p('toString' in obj1);//true
//通过 for in枚举
p(obj1.length); //undefined
for(var k in obj1){
 p(obj1[k]);
}
//没有元素 被枚举出来 这是由于enumerable属性的缘故
//通过hasOwnProperty来判断 是本身的属性还是通过 参与原型继承而来的属性
var map={};
p(map.hasOwnProperty('toString')); //false
map['toString']=1;
p(map.hasOwnProperty('toString')); //true
delete map['toString'] ;
p(map.hasOwnProperty('toString'));//false
</script>

屬性的屬性

物件的屬性 也是有些屬性的
如下表總結了在ECMAScript第五版定義了的屬性 ，屬性值被定為值屬性
表格1

属性的属性名	含义
writable	可以改写属性的值
enumerable	可以通过for in枚举出
configurable	可以改变属性的属性,可以删除属性
get	可以指定属性值的getter函数
set	可以指定属性值的setter函数

屬性的屬性名稱

意義

writable

可以改寫屬性的值

enumerable

可以透過for in列舉

configurable

方法名	属性新增	属性删除	属性值变更	确认方法
preventExtensions	x	o	o	Object.isExtensible
seal	x	x	o	Object.isSealed
freeze	x	x	x	Object.isFrozen

可以改變屬性的屬性,可以刪除屬性

get

可以指定屬性值的getter函數

<script>
var obj={x:2,y:3};
Object.preventExtensions(obj);
//无法新增属性
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设置为假
var obj={x:2,y:3};
Object.seal(obj);
//无法新增 也无法删除
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设置为假
var obj={x:2,y:3};
Object.freeze(obj);
//无法新增 也无法删除，也无法改变属性值
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>

set

可以指定屬性值的setter函數

不可變物件 即生成之後狀態不能再改變的對象，字串物件就是典型的不可變對象 靈活運用不可變物件可以提高程式的健全性，例如在將傳遞給方法參數時，存在方法對物件內容的改寫等 js中可透過以下方式實作不可變物件 1.將屬性(狀態隱藏藏) ,不提供變更操作(閉包實現) 2.靈活運用ECMAScript第五版提供的函數 3.靈活運用writable,configurable屬性以及setter和getter ECMAScript第五版中用來支援物件不可變的函數 請參閱下表格

方法名	屬性新增	屬性刪除	屬性值變更	確認方法
preventExtensions	x	o	o	Object.isExtensible
seal	x	x	o	Object.isSealed
freeze	x	x	x	Object.isFrozen

Object.preventExtensions範例 需要注意 1.對於以上三種方法一旦更改就無法還原 2.如果想讓原型繼承中的被繼承的方法也不可改變,需要對其進行顯示操作