对象访问器

JavaScript 对象访问器免费看

Setter和Getter的使用

06-18侠课岛    基础入门       

前端/前端必修/JavaScript 基础知识梳理 5     0     283

对象访问器就是 SetterGetter,它们的作用就是提供另外一种方法来获取或者设置对象的属性值,并且在获取和设置的时候,可以用一定的其他操作。

Setter和Getter的使用

setter 用来设置属性值,使用 get 关键字。

getter 用来获取属性值,使用 set 关键字。

示例:

例如我们声明一个对象person,然后使用 set 关键字,为这个对象设置属性值:

var person = {
    id : 1,
    name: "summer",
    address:"",
    set addr(value){
        this.address = value;
    }
}
person.addr = "长沙"
console.log(person.address);  // 输出:长沙

然后我们还可以通过 get 关键字来获取属性的值:

var person = {
    id : 1,
    name: "summer",
    get show(){
        return this.name;  // 返回 name
    }
}

console.log(person.show);  // 输出:summer

其实 JavaScript 中的 Settergetter 平时用的比较少,其本身也并不是标准方法,只在非IE浏览器里支持。

使用实例

首先我们创建一个需要使用到的对象:

var cat = {
   color:"白色",
   _age:2,
   weight:8
}

然后我们通过访问器属性来改变和输出 cat 对象中的属性的值:

Object.defineProperty(cat, 'age', {
    get:function(){
        return this._age;
    },
    set:function(value){
        this._age = value,
        this.weight += 2
    }
})

在浏览器中执行代码:

代码中的 _age 属性前面的下划线,是一种常用的记号,表示“私有变量”。是约定俗成的开发规范,没有强制限制,类似于类名首字母大写。

我们使用 Object.defineProperty() 为全局对象 cat 定义了一个属性 age,该全局对象的所有实例都可使用该属性。

Object.defineProperty()方法

Object.defineProperty() 方法可以用于直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并返回这个对象。因此,又称为属性拦截器。

语法:

Object.defineProperty(obj, prop, descriptor)
  • obj:需要定义属性的对象。
  • prop:需要定义或者修改的属性名。
  • descriptor:需要定义或者修改的属性的描述符。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

5

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?