之前对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)学习博客http://kb.cnblogs.com/page/75072/中关于标准标准的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 方法,因此陷入死循环,造成方法栈溢出。

JavaScript ECAMScript5 新特性——get/set访问器的更多相关文章

  1. JavaScript中的Get和Set访问器

    今天要和大家分享的是JavaScript中的Get和Set访问器,和C#中的访问器非常相似. 标准的Get和Set访问器的实现   function Field(val){       this.va ...

  2. 【SharePoint学习笔记】第3章 SharePoint列表新特性以及数据访问

    第3章 SharePoint列表新特性以及数据访问   使用CAML查询语言     CAML:协作应用程序标记语言 Collaboration Application Markup Language ...

  3. JavaScript 属性类型(数据属性和访问器属性)

    数据属性 数据属性包含一个数据值的位置.在这个位置可以读取和写入值.数据属性有 4 个描述其行为的特性. [[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修 ...

  4. ES6新特性:Proxy代理器

    ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...

  5. javascript ES6 新特性之 扩展运算符 三个点 ...

    对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...

  6. JavaScript ES6 新特性详解

    JavaScript ES6 带来了新的语法和新的强大功能,使您的代码更现代,更易读 const ,  let and var 的区别: const , let 是 ES6 中用于声明变量的新关键字. ...

  7. javascript ES6 新特性之 let

    let的作用是声明变量,和var差不多. let是ES6提出的,在了解let之前,最好先熟悉var的原理. JavaScript有一个机制叫“预解析”,也可以叫“提升(Hoisting)机制”.很多刚 ...

  8. JavaScript 的新特性:类的 #private 字段

    这是什么,如何使用,为什么需要? 一边听“Noise Pollution” —— Portugal. The Man,一边阅读本文简直就是享受 JavaScript 标准的第二阶段(Stage 2)加 ...

  9. JavaScript ES6新特性介绍

    介绍 ES6:ECMScript6 首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? ECMAScript是一个国际通过的标准化脚本语言: JavaScript ...

随机推荐

  1. “我爱淘”冲刺阶段Scrum站立会议8

    完成任务: 今天最大的成功就是解决了昨天的问题,可以将xml文件的内容解析出来显示到软件中. 计划任务: 可以通过webservice将数据库中的内容解析出来,通过查询可以得到想要的内容. 遇到问题: ...

  2. 7、android的button如何平铺一张图片?

    我想要实现的效果:,但是设计师给的是这样的:. 首先我想到的是这就像windows电脑设置壁纸有什么拉伸.自适应.平铺等类型,这个应该就是传说中的平铺吧. 那么我们知道,一个普通的button,设置他 ...

  3. jsp或Action获取请求参数中文乱码

    普通情况下,中文字符会被自动转换成iso-8859-1的编码格式通过网络传输,而这种格式是没办法直接表示出我们认识的中文字符的,所以还要手动将他转换回之前的字符集. 一般在servlet或者actio ...

  4. C语音的调查

    1.你对自己的未来有什么规划?做了哪些准备? 很迷茫吧.尽力做好该做的事情.希望认真学习代码,毕竟是专业课 2.你认为什么是学习?学习有什么用?现在学习动力如何?为什么? 学习有很多啊,不论是课堂上, ...

  5. 剑指offer--面试题21--相关

    题目:设计包含min函数的栈,pop(),push(),min()的时间复杂度均为O(1) 自己所写代码如下:(写‘栈’的代码还是有些不熟练!) #include <iostream> u ...

  6. webservice wsdl 生成服务

    由于之前的示例是在当前项目下发布的server,也是在当前项目下访问的server发布的webservice.但在实际应用中,我们的服务端往往是和客户諯分离的,甚至它们是不同的项目中不同的人写的.而像 ...

  7. HDU 2672 god is a girl (字符串处理,找规律,简单)

    题目 //1,1,2,3,5,8,13,21,34,55…… //斐波纳契数列 #include<math.h> #include<stdio.h> #include<s ...

  8. idHTTP访问百度

    百度屏蔽了indy的客户端标识的 Mozilla/3.0 (compatible; Indy Library),把‘Indy Library’去掉就可以了. try IdHTTP1.Request.U ...

  9. iOS-CALayer实现简单进度条

    /** *  用CALayer定制下载进度条控件 *  1.单独创建出CALayer *  2.直接修改CALayer的frame值,执行隐式动画,实现进度条效果 *  3.用定时器(NSTimer) ...

  10. HDU 1260 Tickets(简单dp)

    Tickets Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...