您的位置:首页> 前端教程> JS教程
文章导航

JavaScript get set 访问器属性

2018-10-30 14:38| 作者: admin| 查看: 1669| 评论: 0|来自: 蚂蚁部落

JavaScript中大致有两类属性:

(1).数据属性。

(2).访问器属性。

configurable、enumerable和writable一文已经对数据属性的特性做了详细介绍。

本文将通过代码实例对访get set问器属性做一下详细介绍。

因为访问器属性是ES5新增,所以可能不少朋友对它比较陌生。

访问器属性功能更为强大,举一个例子,比如本站成立于2016年,那么本站的年龄到2018年是两岁。

那么我们想有一个通用的功能,确定了网站成立于哪一年,自动计算出网站的年龄。

使用get与set访问器可以很轻松实现此功能。

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
let web = {
  _age:0,
  set startYear (startYear){
    if(startYear <= new Date().getFullYear()){
      this._age=new Date().getFullYear()-startYear;
    } 
  },
  get age (){
    return this._age;
  }
};
web.startYear=2015;
console.log(web.age);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/30/150341f1bgqqmi47yxuyml.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面代码在对象直接量中定义了两个访问器属性startYear和age。

_age前面加上一个下划线标识此属性是一个私有属性,不是对外公开的的一个接口,是以惯例。

当我们给startYear属性赋值年份之后,可以自动计算出网站的年龄。

一.访问器属性定义:

访问器属性由get和set方法定义。

(1).读取属性的时候调用get方法。

(2).设置属性的时候调用set方法。

代码实例如下:

[JavaScript] 纯文本查看 复制代码
let web={
    _webName:"蚂蚁部落",
    get webName(){
        return this._webName;
    },
    set webName(webName){
        this._webName=webName;
    }
}

访问器属性的两个方法都是可选的,省略get,那么无法读取该属性,省略set,那么此属性只读。

上面是在字面量中定义访问器属性,当然也可以利用Object.defineProperty方法定义。

代码实例如下:

[JavaScript] 纯文本查看 复制代码
let web={
  _webName:"蚂蚁部落"
}

Object.defineProperty(web, 'webName', {
  get: function() {
    return this._webName;
  },
  set: function(webName) {
    this._webName=webName;
  }
});

关于Object.defineProperty方法可以参阅Object.defineProperty()一章节。

二.访问器属性特性:

访问器属性具有如下四个特性:

(1).[[Configurable]]:描述属性是否可以被删除,特性是否可以被改变,或是否可以被修改为访问器属性。

(2).[[Enumerable]]:描述属性是否可以被遍历。

(3).[[Get]]:在读取属性时,调用此方法。

(4).[[Set]]:设置属性值时,调用此方法。

前两个特性本文不再介绍,可以参阅configurable、enumerable和writable一文。

与数据属性相比,访问器属性没有[[Writable]]和[[Value]]特性。

因为这两个特性的功能被[[Get]]和[[Set]]取代,它们不能同时存在,否则报错。

[JavaScript] 纯文本查看 复制代码
let web={
  _webName:"蚂蚁部落"
}
Object.defineProperty(web, 'webName', {
  get: function() {
    return this._webName;
  }
});

只有get方法,那么webName属性就是只读的,类似于数据属性的[[Writable]]特性值为false。

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部