EcmaScript5簡介
首先得先搞清楚ECMAScript是神馬,我們知道JavaScript或者說LiveScript最開始是Netscape搞出來的,後來微軟也跟進搞出了Jscript,ScriptEase也有自己的CENvi,這樣就有了三個版本的瀏覽器Script各行其是,大家懂這個混亂的,於是乎標準化的問題被提上議程。 1997年以JavaScript1.1為藍本的建議被提交到歐洲電腦製造商協會( E uropean C omputer M anufacturers A ssociation),最後大家載歌載舞搞出了ECMA-262——一種名為ECMAScript的新腳本語言標準。第二年,ISO/IEC(國際標準化組織與國際電工委員會)也採用ECMAScript為標準,此後天下太平,各大瀏覽器廠商以ECMAScript作為各自實現JavaScript的基礎,當然只是基礎,沒完全按照來,否則我們也不會有那麼多瀏覽器相容性問題。
ECMAScript5是什麼呢?顧名思義跟iPhone5一樣是這個奇怪東東的第五個版本,我們現在常用的時ECMAScript3,相比前兩個版本這個版本算是一門正真的程式語言而不是玩具了,變得很流行。
正文:
之前對get/set的理解一直有誤,覺得get set 是物件屬性方法。看了別人的部落格也有很多疑問,今天系統的做了很多測試終於搞清楚了。 (自己透過看書和寫demo測驗的,如有不對歡迎大家批評指正)
get/set存取器不是物件的屬性,而是屬性的特性。大家一定要分清楚。特性只有內部才用,因此在javaScript中無法直接存取他們。為了表示特性是內部值用兩隊中括號括起來表示如[[Value]]。
1.先簡單介紹一下屬性的這些特性(這裡是簡單的背書)
(1)資料屬性-包含一個資料值的位置。這個位置可以讀入和寫入值。
資料屬性有描述其行為的四個特性:
[[Configurable]]:是否可設定
[[Enumerable]]:是否可枚舉
[[Writable]]:是否可讀
[[Value]]: 屬性值
(2)存取器屬性屬性-不包含資料值,包含一個getter和setter函數(這兩個函數不是必須的)
訪問器屬性也有描述其行為的四個特性:
[[Configurable]]:是否可設定
[[Enumerable]]:是否可枚舉
[[Get]]:在讀取屬性時呼叫的函數,預設是undefined
[[Set]]:寫入屬性時所呼叫的函數,預設是undefined
2.這裡著重介紹[[Get]]/[[Set]]就是我們所說的get/set訪問器
先說一個書上說的 get/set存取器行為特點:get/set存取器可以不用定義,不定義也可以讀寫屬性值。也可以只定義一個。只定義get,則被描述的屬性只可讀,不可寫。只定義set,則被描述的屬性只可寫,不可讀。
(1)我們原本的get set方法是這樣的:
function Foo(val){ var value=val; this.getValue=function(){ return value; }; this.setValue=function (val){ value=val; }; } var obj=new Foo("hello"); alert(obj.getValue());//"hello" obj.setValue("hi"); alert(obj.getValue());//"hi"
以上程式碼只是利用閉包作用域實作的get set 方法,注意是方法即實例物件的屬性方法,不是屬性特性。如果不定義,將無法存取value值
function Foo(val){ var value=val; /* this.getValue=function(){ return value; }; this.setValue=function (val){ value=val; }; */ } var obj=new Foo("hello"); alert( obj.value);//undefined
以下範例也是物件的屬性方法,不是屬性特性。
var obj={ name:"john", get:function (){ return this.age; }//只定义了get ,没有定义set,但是仍然可以读,写,name属性,即使这里是age //这里这样定义的方法不会影响属性的get,set 特性。只是普通的对象属性 }; alert(obj.name);//john 可读 obj.name="jack";//可写 alert(obj.name);//jack
(2)作為存取器屬性的特性的get/set存取器。
再說一次不是物件的屬性,他們 決定屬性能否、怎麼讀寫。如果不設定也行,就和平時的讀寫一樣(屬性可讀可
寫,讀寫存取的都是屬性本身的值)
要改變屬性的get /set 特性,有兩種方式:
a.就是用Object.defineProperty()
var object={ _name:"Daisy" }; Object.defineProperty(object,"name",{//这里的方法名name,就表示定义了一个name属性(因此才能通过object.name访问),只定义了getter访问器,没有定义[[value]]值 get:function (){//只定义了get 特性,因此只能读不能写 return this._name; } }); alert(object.name);//"Daisy" object.name="jack";//只定义了getter访问器,因此写入失效 alert(object.name);//"Daisy"
注意Object.defineProperty(object,pro,{})中的屬性名稱一定要和object.pro存取的屬性對應
b.就是用用 get set 關鍵字:
var object={ _name:"Daisy", get name(){//这里的方法名name ,就表示定义了一个name属性(因此才能通过object.name访问),只定义了getter访问器,没有定义[[value]]值 return this._name; }//get,set方法只是属性的特性 ,不是对象方法,决定属性能否、怎么读写 }; alert(object.name);// Daisy这里去掉下划线 方法就是Daisy ;加上就是undefined object.name="jack";//只定义了getter访问器,因此只能读不能写 alert(object.name);//Daisy
以上两种方法等效。注意的是以上两种方法object对象当中都将有有两个属性:_name(有初始值) name(无初始值),通过浏览器控制台可以看到
那么这个name属性实在什么时候定义的呢?我们知道Object.defineProperty(object,pro,{})可以给对象定义一个新属性pro,既然get pro(){}/set pro(){}和Object.defineProperty(object,pro,{})等效,则也会定义一个新属性pro .这就是为什么object里面有两个属性的原因。
(3)在此篇文章中网络之美 JavaScript中Get和Set访问器的实现代码关于标准标准的Get和Set访问器的实现:引发的思考
我自己也写了一个一样的例子
function Foo(val){ this.value=val;//定义了value属性 并没有定义_value } Foo.prototype={ set value(val){//注意方法名和属性名相同,在prototype里定义了value属性 this._value=val; }, get value(){//方法名和属性名相同,在prototype里面定义了value属性和它的get 特性 return this._value; } }; //访问器返回和设置的都是_name,这里并没有定义_name属性为什么也可以读可以写???? var obj=new Foo("hello"); alert(obj.value);//"hello" obj.value="yehoo"; alert(obj.value);//"yehoo"
为了解决以上这个疑问,做了很多测试,我们一一来看:
先看这个例子,在prototype里面只定义get 特性,在obj.value读value属性时,在实例里面寻找没有,然后在原型里面找到,调用的是原型的get方法,只能读不能写
function Foo(val){ this._value=val;//这里 的属性是带下划线的,初始化实例对象的_value属性,_value属性可读可写 } Foo.prototype={ // set value(val){//注意方法名和属性名相同,在prototype里定义了value属性 // this._value=val; // }, get value(){//方法名和属性名相同,在prototype里面定义了value属性和它的get 特性 return this._value; } }; var obj=new Foo("hello"); alert(obj.value);//hello 访问的是prototype里面的value 属性 obj.value="yehoo";//只定义了name 属性的get 特性,因此只能读不能写,写入失效 alert(obj.value);//hello
如果构造函数里面this._value 去掉下划线,在prototype里面定义的value属性,定义了get 特性。依然可以控制value属性的读写 。也就是说obj.value访问属性时,会调用get方法,先在对象本身寻找,如果没有,再到prototype寻找,如果都没有才算没有定义,默认的既可读又可写
function Foo(val){ this.value=val;//在原型里面只定义了value的get特性,因此这里写入失效 } Foo.prototype={ // set value(val){//注意方法名和属性名相同,在prototype里定义了value属性的set特性 // this._value=val; //}, //value:"hah",//即使手动写入value值,由于get方法返回的是this._value,因此也不能正确读取value:"hah" //只要声明了get pro (){}和set pro (){}属性就都能读能写,但是如果函数定义错误,依然不能按要求访问到正确的属性值 get value(){//方法名和属性名相同,在prototype里面定义了value属性和它的get 特性 return this._value; } }; var obj=new Foo("hello");//"hello"没有写入成功 alert(obj.value);//undefined obj.value="yehoo";//只定义了get 特性,因此只能读不能写,写入失效 alert(obj.value);//undefined
为了证明上面例子是可读不可写的:手动写入_value:"hah",就可以读取value 但不能写入。
function Foo(val){ this.value=val;//在原型里面只定义了value的get特性,因此这里写入失效 } Foo.prototype={ // set value(val){//注意方法名和属性名相同,在prototype里定义了value属性的set特性 // this._value=val; //}, _value:"hah",//即使手动写入value值,由于get方法返回的是this._value,因此也不能正确读取value:"hah" //只要声明了get pro (){}和set pro (){}属性就都能读能写,但是如果函数定义错误,依然不能按要求访问到正确的属性值 get value(){//方法名和属性名相同,在prototype里面定义了value属性和它的get 特性 return this._value; } }; var obj=new Foo("hello");//"hello"没有写入成功 alert(obj.value);//"hah" obj.value="yehoo";//只定义了get 特性,因此只能读不能写,写入失效 alert(obj.value);//"hah"
如果手动写入的是value:"hah",那么可以争取读取value的值吗?由于get方法返回的this._value并没有定义,obj.value读取value值调用get value(){}方法失效,但是value仍然不能写入。
function Foo(val){ this.value=val;//在原型里面只定义了value的get特性,因此这里写入失效 } Foo.prototype={ // set value(val){//注意方法名和属性名相同,在prototype里定义了value属性的set特性 // this._value=val; //}, value:"hah",//即使手动写入value值,由于get方法返回的是this._value,因此也不能正确读取value:"hah" //只要声明了get pro (){}和set pro (){}属性就都能读能写,但是如果函数定义错误,依然不能按要求访问到正确的属性值 get value(){//方法名和属性名相同,在prototype里面定义了value属性和它的get 特性 return this._value; } }; var obj=new Foo("hello");//"hello"没有写入成功 alert(obj.value);//undefined 读取失效 因为只要obj.value就会调用get ,而get返回的是this._value,没有这个值,因此undefined obj.value="yehoo";//只定义了get 特性,因此只能读不能写,写入失效 alert(obj.value);//undefined
再看这个例子,get set 都定义了,但是返回没有定义的this._value。可以发现value既可读又可写。去掉原型里面的get set方法,依然可读可写
function Foo(val){ this.value=val; } Foo.prototype={ set value(val){ this._value=val; }, get value(){ return this._value; } }; var obj=new Foo("hello"); alert(obj.value);//hello obj.value="yehoo"; alert(obj.value);//yehoo function Foo(val){ this.value=val; } //和平时的操作是一样的了,就是回到了不定义get /set访问器特性的默认状态 var obj=new Foo("hello"); alert(obj.value);//hello obj.value="yehoo"; alert(obj.value);//yehoo
总结
只声明了get pro(){}属性 可读不可写;
只声明 set pro(){}属性可写不可读。
如果都不声明,属性可读可写;
如果都声明就按照,get set 定义的方法,读写;
如果都声明了,但是定义的读写方法不能正确读写,get/set失效。变成默认的可读可写
在prototype里面定义的value属性,定义了get 特性。依然可以控制value属性的读写 。也就是说obj.value访问属性时,会调用get方法,先在对象本身寻找,如果没有,再到prototype寻找,如果都没有才算没有定义,默认的既可读又可写。
补充:
不管是用get pro(){}/set pro (){} 还是用Object.defineProperty(object,pro,{ get:function (){ return this._name; } });
pro不能和 return this. 后面的属性一样,不然会报下面的错误:(具体我也不知道为什么,好像是自身调用引起的栈溢出)
经大神指正,明白为什么这里报错:在get value(){}方法里返回 this.value,就会又去调用value的get 方法,因此陷入死循环,造成方法栈溢出。