JavaScript getter和setter
对象的属性是由属性名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的更多相关文章
- JavaScript getter and setter All In One
JavaScript getter and setter All In One getter & setter JavaScript Object Accessors JavaScript A ...
- [Javascript] Getter and Setter Abstractions
JavaScript provides primitive types and means of processing those. However, those are not enough. Re ...
- javascript的getter和setter(转)
显然这是一个无关IE(高级IE除外)的话题,尽管如此,有兴趣的同学还是一起来认识一下ECMAScript5标准中getter和setter的实现.在一个对象中,操作其中的属性或方法,通常运用最多的就是 ...
- JavaScript中闭包实现的私有属性的getter()和setter()方法
注意: 以下的输出都在浏览器的控制台中 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- javascript中的function命名空間與模擬getter、setter
function的命名空間 在javascript中,function也可以擁有自己的命名空間例如以下這段程式碼: 12345678 function () { return 'I am A';} A ...
- 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); ...
- javascript中的getter和setter
在ECMAScript 5中,属性值可以用一个或两个方法代替,这两个方法就是getter和setter var man = { name : 'lidg', weibo : '@lidg', get ...
- 基于 getter 和 setter 撸一个简易的MVVM
Angular 和 Vue 在对Angular的学习中,了解到AngularJS 的两个主要缺点: 对于每一次界面时间,Ajax 或者 timeout,都会进行一个脏检查,而每一次脏检查又会在内部循环 ...
- js中的访问器属性中的getter和setter函数实现数据双向绑定
嗯,之前在读js红宝书的时候,在对象那一章有介绍属性类型.第一种数据类型指的是数据属性,第二种是访问器属性.在初识vue的时候,其双向数据绑定也是基于访问器属性中的getter和setter函数原理来 ...
随机推荐
- 哪些优秀的 Windows 小工具,类似 clover 或 everything
有哪些优秀的 Windows 小工具,类似 clover 或 everything? 目前已知的有everything, listary, total commander, clover, dexpo ...
- Mybatis-Plus 实战完整学习笔记(四)------全局参数配置
一.全局配置设置 (1)全局配置Id自动生成 <!--定义mybatisplus全局配置--> <bean id="globalConfig" class=&qu ...
- 第19章:MongoDB-聚合操作--聚合管道--$limit+$skip
①$limit “$limit”:负责数据的取出个数: “$skip”:数据的跨过个数. ②范例:使用“$limit”设置取出的个数
- C#程序集问题:混合模式程序集是针对“v2.0.50727”版的运行时生成的.....
今天在把以前写的代码生成工具从原来的.NET3.5升级到.NET4.0,同时准备进一步完善,将程序集都更新后,一运行程序在一处方法调用时报出了一个异常: 混合模式程序集是针对“v2.0.50727”版 ...
- (BestCoder Round #64 (div.2))Array
BestCoder Round #64 (div.2) Array 问题描述 Vicky是个热爱数学的魔法师,拥有复制创造的能力. 一开始他拥有一个数列{1}.每过一天,他将他当天的数列复制一遍,放在 ...
- web-day12
第12章WEB12-JSP&EL&JSTL篇 今日任务 商品信息的显示 教学导航 教学目标 掌握JSP的基本的使用 掌握EL的表达式的用法 掌握JSTL的常用标签的使用 教学方法 案例 ...
- sudo执行脚本找不到环境变量和命令
简介 变量 普通用户下,设置并export一个变量,然后利用sudo执行echo命令,能得到变量的值,但是如果把echo命令写入脚本,然后再sudo执行脚本,就找不到变量,未能获取到值,如题情况如下: ...
- USTC《现代软件工程》春季学期——第一次个人作业:词频统计
截止日期 2018年3月29日23:59 要求 1. 对源文件(*.txt,*.cpp,*.h,*.cs,*.html,*.js,*.java,*.py,*.php等,文件夹内的所有文件)统计字符数. ...
- 《计算机科学基础》学习笔记_Part 1 Computer and Data
Technorati Tags: 计算机科学基础,读书笔记 Chapter 1. Introduction Ø 计算机:黑盒,Output Data=f(Input Data, Program) Ø ...
- hdu 3191 次短路的长度和个数
http://acm.hdu.edu.cn/showproblem.php?pid=3191 求次短路的长度和个数 相关分析在这里http://blog.csdn.net/u012774187/art ...