对象的属性是由属性名name,值key,和其他特性(可读写性 writable,可枚举性enumerable,可配置性configurable)组成的。从ES5开发,提供了getter和setter 可以将属性值的获取和设置分别绑定到方法上,称之为“存取器”。有了getter和setter我们就能够在属性值的变更和获取时实现一些操作。

简单的getter , setter

  直接在对象中创建属性的getter和setter,并进行测试。

  注意语法规则,是通过get和set关键字创建的percent属性的getter和setter函数。get函数是没有参数的,set函数会将等号右边的值作为参数。当访问percent属性时,会返回_num加%,当设置percent时,会打印日志并将值赋给_num。

使用defineProperty

  如何在已有的对象上添加getter和setter呢?   Object.defineProperty(obj, prop, descriptor) ,obj为将要操作的对象,prop是将要定义或者修改的属性名,descriptor是将要被修改或者定义的描述符。看实例

  

  defineProperty()添加或者修改属性的时候需要注意:

    1、数据描述符configurable标志着该属性能够被改变,能够被删除,默认为false

    2、数据描述符enumerable标志着该属性是否可枚举,默认为false。只有可枚举属性才会在for in中遍历,Object.keys()中返回。另外,所有的内置方法都是不可枚举的,eg:toString

    3、数据描述符value默认为undefined,writable默认为false。所以defineProperty默认新增的属性,是不可以被赋值运算符修改的。

    4、存取描述符set和get都默认为undefined

    5、set/get是不能够和value或者writable一起用的,因为当是存取器属性的时候,当设置了set标志着可写,设置了get就标志着可读,而value也是通过get函数返回的,所以不能同时使用。

Class中的 getter setter

  ES6新增class的概念,改变了构造对象的书写方式,class中同样可以设置存取器。

TypeScript中的 getter和setter

  Angular项目中使用的是ts,ts的class语法与ES6的稍有不同,通过项目中的一个小栗子记录下ts中的getter和setter。场景如下,有一个datepicker组件,可以调整时间级别为5分钟或者天。不同级别时,datepicker组件需要作出不同的调整。

  做如下处理: datepicker组件中有@input来接受级别的调整,在set中做一些操作

export class LdatepickerComponent implements OnInit {

  public _level: Level = 'minite';

  @Input()
get level (): Level {
return this._level;
} set level ( value: Level ) {
// 修改级别后 重置组件的状态
doSomething() // 发送新的时间为0
doOther() this._level = value;
}
}

  当选择不同的级别时,传入到datepicker组件的level会变化,此时的set会对组件做一些自定义的操作,实现需求。

JavaScript getter和setter的更多相关文章

  1. JavaScript getter and setter All In One

    JavaScript getter and setter All In One getter & setter JavaScript Object Accessors JavaScript A ...

  2. [Javascript] Getter and Setter Abstractions

    JavaScript provides primitive types and means of processing those. However, those are not enough. Re ...

  3. javascript的getter和setter(转)

    显然这是一个无关IE(高级IE除外)的话题,尽管如此,有兴趣的同学还是一起来认识一下ECMAScript5标准中getter和setter的实现.在一个对象中,操作其中的属性或方法,通常运用最多的就是 ...

  4. JavaScript中闭包实现的私有属性的getter()和setter()方法

    注意: 以下的输出都在浏览器的控制台中 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  5. javascript中的function命名空間與模擬getter、setter

    function的命名空間 在javascript中,function也可以擁有自己的命名空間例如以下這段程式碼: 12345678 function () { return 'I am A';} A ...

  6. javascript权威指南笔记--javascript语言核心(五)--getter和setter属性

    getter和setter属性: var p = { x:1.0, y:1.0, get r(){ return Math.sqrt(this.x*this.x + this.y * this.y); ...

  7. javascript中的getter和setter

    在ECMAScript 5中,属性值可以用一个或两个方法代替,这两个方法就是getter和setter var man = { name : 'lidg', weibo : '@lidg', get ...

  8. 基于 getter 和 setter 撸一个简易的MVVM

    Angular 和 Vue 在对Angular的学习中,了解到AngularJS 的两个主要缺点: 对于每一次界面时间,Ajax 或者 timeout,都会进行一个脏检查,而每一次脏检查又会在内部循环 ...

  9. js中的访问器属性中的getter和setter函数实现数据双向绑定

    嗯,之前在读js红宝书的时候,在对象那一章有介绍属性类型.第一种数据类型指的是数据属性,第二种是访问器属性.在初识vue的时候,其双向数据绑定也是基于访问器属性中的getter和setter函数原理来 ...

随机推荐

  1. 爬虫模块之requests模块

    一 模块的下载安装 pip install requests 二 爬虫的介绍 什么是爬虫:就是模拟浏览器发送请求:保存到本地:提取有用的数据:保存到数据库 爬虫的价值:获取有用的数据,保存到数据库 爬 ...

  2. related work

    Traditional approaches, e.g., genetic algorithm (GA) [2] and ant colony optimization (ACO) [3], can ...

  3. java 冒泡排序 二分查找 选择排序 插入排序

    下面这个程序是先定义一个整型数组,然后将其中的元素反序赋值,再用冒泡排序进行排序以后用二分查找来查找其中是否有某个数,返回值为-1时表示这个数可能小于这个数组的最小值或大小这个数组的最大值,-2表示这 ...

  4. (转)使用 vs.php 调试PHP

    转自:http://www.jb51.net/article/24618.htm   早先在asp横行的年代,php和asp一样,大都都是html中夹杂代码,说实话,这时候IDE的确用处不是很大,倒是 ...

  5. day33(sql)

    操作数据库 增: create database 数据库名 character set utf8 删 drop database 数据库名称 改 alter database 数据库名称 charac ...

  6. stm32的gpio函数介绍

    一.gpio_init函数 void GPIO_Init(GPIO_TypeDef* GPIOx, GPIO_InitTypeDef* GPIO_InitStruct) 调用时的格式一般是例如 RCC ...

  7. 标记化结构初始化语法 在结构体成员前加上小数点 如 “.open .write .close ”C99编译器 .

    今天在看串口驱动(四)的时候 有这样一个结构体初始化 我很不理解 如下: static struct s3c24xx_uart_port s3c24xx_serial_ports[NR_PORTS] ...

  8. 软工网络15团队作业4——Alpha阶段敏捷冲刺(一)

    第 1 篇 Scrum 冲刺: 各个成员在 Alpha 阶段认领的任务 成员      任务 预期任务量/小时 曾艺佳 学习模块:单词及其释义      单词发音     例句学习     添加笔记 ...

  9. java基础-day28

    第05天 MySQL 今日内容介绍 u 数据库的概述 u MySQL和SQLyog的安装和使用 u SQL语句 第1章   数据库的概述 1.1  数据库的概述 1.1.1 概述 l  什么是数据库 ...

  10. C++插件架构浅谈与初步实现

    一.插件架构初步介绍 想到写本博客,也没想到更好的名字,目前就先命这个名吧.说到插件架构,或许大部分IT从业者都听过或者某些牛人也自己实现过稳定高效的插件框架.目前有很多软件以及库都是基于插件架构,例 ...