综上说述那是一个毫不相关IE(高端IE除却)的话题,固然如此,有意思味的同室照旧三只来认知一下ECMAScript5正规中getter和setter的落到实处。在三个目的中,操作在那之中的属性或方法,日常采取最多的正是读(引用)和写了,例如说o.get,那就是叁个读的操作,而o.set

1则是贰个写的操作。事实上在除ie外最新主流浏览器的兑现中,任何贰个对象的键值都得以被getter和setter方法所代替,这被称呼“存取器属性”。

肯定,getter担负查询值,它不带其余参数,setter则负担安装键值,值是以参数的款型传递,在她的函数体中,一切的return都是船到江心补漏迟的。和常常属性区别的是,存款和储蓄器属性在只注明了get或set时,对于读和写是两岸不得兼得的,当它只持有了getter方法,那么它只是只读,一样的,当它独有setter方法,那么您读到的永恒都是undefined。如何表明对象存款和储蓄器属性呢?
最急速的路线正是利用指标字面量的语法来写了,请看下述一段代码:

复制代码 代码如下:

var oo = {
    name : ‘贤心’,
    get sex(){
        return ‘man’;
    }
};
//分明那是不一样意的,因为贤心并不指望外部去改换他是男人的谜底,所以对于sex只设置了只读功用
oo.sex = ‘woman’;
console.log(oo.sex); //结果如故是man

有趣的是,这颠覆了我们过去的了然,正是在点子定义时从没用function关键字。事实上这里的get或set,你能够知晓为两种不相同处境下的function:包容的二只(写),安全的单方面(读),当一种一体化被解开为分化的形态,意味着大家可能不再要求在表现形式上根据古板,所以大家并从未选择冒号将键和值分开。那么,继续上边的事例。你将如何在仓储器属性的底蕴上变得读写兼备呢,大概上面包车型大巴一段会给你带来答案:

复制代码 代码如下:

var oo = {
    name : ‘贤心’,
    get sex(){
        if(this.sexx){
            return this.sexx;
        }else{
            return ‘man’;
        }
    }, set sex(val){
        this.sexx = val;
    }
};
//噢,他那样包容,以至于大家更动她的性别,他也经受
oo.sex = ‘woman’;
console.log(oo.sex); //结果woman

想必你会认为那是大惊小怪的,因为大家完全能够忽略get和set,直接让sex方法具备三种权限。
但之所以我们将get和set单独拿出来,是为了进一步清楚地精晓ECMAScript5对javascript对象键值操作中,八个更为稳重的申明。
当然,在IE污染的中夏族民共和国,新型的主流手艺总是展现水火不容,在其实的花色支出中,恐怕你恒久不会用到get和set,但哪个人又能保险以往不会吧……

作者:anbutu
来源:
关键字: JavaScript   Mozilla __defineGetter__ __defineSetter__

Getter是一种得到多少个个性的值的法子,Setter是一种设置二个属性的值的点子。可感觉任何预订义的为主目的或顾客自定义对象定义getter和setter方法,进而为依存的指标加多新的性质。

你恐怕感兴趣的稿子:

  • 关于__defineGetter__
    和__defineSetter__的说明
  • 达成了一个PHP5的getter/setter基类的代码
  • JavaScript之Getters和Setters
    平台协理等详细介绍
  • javascript中的__defineGetter__和__defineSetter__介绍
  • JavaScript中setter和getter方法介绍
  • jQuery 3.0 的 setter和getter
    情势详解
  • 使用node+vue.js实现SPA应用
  • 依附Vue.js的报表分页组件
  • Vue.js天天必学之组件与组件间的通讯
  • 商酌因Vue.js引发关于getter和setter的思虑

Getter是一种获得二个属性的值的不二诀窍,Setter是一种设置三个性能的值的方式。可认为别的预订义的主导指标或客户自定义对象定义getter和setter方法,进而为依存的对象增多新的品质。
有三种办法来定义Getter或Setter方法:

有三种方法来定义Getter或Setter方法:

在对象开头化时定义 
在对象定义后透过Object的__defineGetter__、__defineSetter__方法来扩充定义 
在应用对象初步化进度来定义Getter和Setter方法时独一要做的事情正是在getter方法前边加上“get”,在setter方法前边加上“set”。
再有少数要稳重的正是getter方法未有参数,setter方法必须有贰个参数,也便是要设置的性子的新值。
例如:

1.在对象最早化时定义
2.在对象定义后经过Object的__defineGetter__、__defineSetter__方法来增加定义

复制代码 代码如下:

在行使对象伊始化进度来定义Getter和Setter方法时独一要做的业务正是在getter方法后边加上“get”,在setter方法后边加上“set”。

o = {    
    value:9,    
    get b() {return this.value;},    
    set setter(x) {this.value = x;}    
}    

还大概有某个要注意的正是getter方法未有参数,setter方法必需有五个参数,也正是要安装的习性的新值。

在目的定义后给目标加多getter或setter方法要通过八个奇特的主意__defineGetter__和__defineSetter__。那三个函数必要首先个是getter或setter的名号,以string给出,第二个参数是当做getter或setter的函数。
举个例子我们给Date对象增添二个year属性:

例如:

复制代码 代码如下:

复制代码 代码如下:

Date.prototype.__defineGetter__(‘year’, function() {return this.getFullYear();});    
Date.prototype.__defineSetter__(‘year’, function(y) {this.setFullYear(y)});    

   o = { 
        value:9, 
        get b() {return this.value;}, 
        set setter(x) {this.value = x;} 
    } 

var now = new Date;    
alert(now.year);    
now.year = 2006;    
alert(now);    

在指标定义后给目的增多getter或setter方法要通过八个独特的艺术__defineGetter__和__defineSetter__。那七个函数供给首先个是getter或setter的名称,以string给出,第2个参数是作为getter或setter的函数。

关于选取哪类样式重要在于个人的编制程序风格,采用第一种方式结构紧密,更易于理解。不过一旦你想在目的定义现在再加多Getter或Setter,也许那一个目的的原型不是你写的恐怕内置对象,那么只好采用第两种方式了。
上边是一个为Mozilla浏览器加多innerText属性的落到实处:

比如说大家给Date对象加多一个year属性:

复制代码 代码如下:

复制代码 代码如下:

HTMLElement.prototype.__defineGetter__     
(    
   “innerText”,function()    
   //define a getter method to get the value of innerText,     
   //so you can read it now!     
   {    
      var textRange = this.ownerDocument.createRange();    
      //Using range to retrieve the content of the object    
      textRange.selectNodeContents(this);    
      //only get the content of the object node    
      return textRange.toString();    
      // give innerText the value of the node content    
   }    
); 

Date.prototype.__defineGetter__(‘year’, function() {return
this.getFullYear();}); 
    Date.prototype.__defineSetter__(‘year’, function(y)
{this.setFullYear(y)}); 
     
    var now = new Date; 
    alert(now.year); 
    now.year = 2006; 
    alert(now);

你恐怕感兴趣的小说:

  • 兑现了贰个PHP5的getter/setter基类的代码
  • JavaScript之Getters和Setters
    平台帮衬等详细介绍
  • javascript中的__defineGetter__和__defineSetter__介绍
  • ECMAScript5中的对象存取器属性:getter和setter介绍
  • JavaScript中setter和getter方法介绍
  • jQuery 3.0 的 setter和getter
    方式详解
  • 使用node+vue.js实现SPA应用
  • 基于Vue.js的表格分页组件
  • Vue.js天天必学之组件与组件间的通讯
  • 钻探因Vue.js引发关于getter和setter的思念

关于接纳哪类样式首要在于个人的编制程序风格,采纳第一种情势结构紧密,更易于精晓。不过借让你想在目的定义未来再加多Getter或Setter,可能那个指标的原型不是你写的或是内置对象,那么只可以采纳第三种艺术了。

下边是贰个为Mozilla浏览器加多innerText属性的贯彻:

复制代码 代码如下:

 HTMLElement.prototype.__defineGetter__  
    ( 
       “innerText”,function() 
       //define a getter method to get the value of innerText,  
       //so you can read it now!  
       { 
          var textRange = this.ownerDocument.createRange(); 
          //Using range to retrieve the content of the object 
          textRange.selectNodeContents(this); 
          //only get the content of the object node 
          return textRange.toString(); 
          // give innerText the value of the node content 
       }

你可能感兴趣的稿子:

  • JavaScript中setter和getter方法介绍
  • JavaScript之Getters和Setters
    平台扶助等详细介绍
  • 评论因Vue.js引发关于getter和setter的驰念
  • Javascript中的getter和setter初识
  • JavaScript的setter与getter方法
  • 浅谈JS对象加多getter与setter的5种方法
  • js中getter和setter用法实例剖析

相关文章