JS —— 存取器属性get()和set()

上篇讲到可以用属性描述符来对属性做一些描述，以及用来描述属性的四个属性(value，configurable，enumerable，writable)。这篇讲的存取器属性就是在属性描述符中配置get()和set()方法，配置这两个方法之后，该属性就不是一个普通属性了。存取器属性最大的意义，在于可以控制属性的读取和赋值。

如果一个属性是存取器属性，则读取该属性时，会运行get方法，将get方法得到的返回值作为属性值，如果给该属性赋值，则会运行set方法。举个栗子来理解一下叭~

【例1】

const obj = {b:2
}
Object.defineProperty(obj,'a',{get() {console.log("运行了属性a的get函数")},set() {console.log("运行了属性a的set函数")}
})
obj.a = 10;
console.log(obj.a)

【结果】可以看到，在对a进行赋值时，运行了set()，在访问a时，运行了get()，且因为get函数没有返回值，所以得到的值为undefined

要想实现上面的效果，即赋的值等于读取到的值，可以借用第三参数，如下

const obj = {b:2
}
Object.defineProperty(obj,'a',{get() {console.log("运行了属性a的get函数");return obj._a;},set(val) {console.log("运行了属性a的set函数");obj._a = val;}
})
//以下代码相当于set(10)
obj.a = 10;
console.log(obj.a);

【结果】

【注】get函数不能传参，set函数可以传一个参数

【例2】小练习：输入年龄，限定年龄范围在0-200岁，且输入必须为数字类型，输出XX岁。

obj = {name: 'jwh'
}
Object.defineProperty(obj, 'age', {get() {return `${obj._age}岁`;},set(val) {if (typeof val !== "number") {throw new TypeError("年龄必须是一个数字");}if (val < 0) {val = 0;} else if (val > 200) {val = 200;}obj._age = val;}
})
obj.age = 33;
console.log(obj.age);
obj.age = -10;
console.log(obj.age);
obj.age = 222;
console.log(obj.age);
obj.age = "aaa";
console.log(obj.age);

【结果】

JS —— 存取器属性get()和set()相关推荐

JS中的setter、getter数据存取器
JS属性可分为两种类型 ① 数据属性只是简单存储了一个值 ② 存取器属性最大的特点是在设置.获取属性值的时候能够做一些其他的操作设置存取器属性的两种方式 ① 直接在对象中设置 let ...
Js中的数据属性和访问器属性
Js中的数据属性和访问器属性在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...
《js高级程序设计》6.1.1-6.1.3——数据属性、访问器属性
数据属性:该属性包含了一个数据值的位置,它包含了4个描述行为的特性: 1. [[Configurable]]:表示是否能通过delete删除属性从而重新定义属性,能否修改属性的特性,能否把属性修改为访 ...
html iframe视频自动播放的属性,iframe通用js播放器myplayer.js加自动播放参数
我的播放器调用方式,通用js播放器myplayer.js打开自动播放&后面的多余参数藐视不受影响. iframe可用于通用视频地址,.MP4去掉所有尾巴 &参数最终自动播放mypla ...
复杂结构体的存取器 [C宏——智者的利刃，愚者的恶梦]
为什么80%的码农都做不了架构师?>>> C宏--智者的利刃,愚者的恶梦! 在<C宏--智者的利刃,愚者的恶梦! >一文中,提到了一种使用宏的方式 -- " ...
数据属性和访问器属性
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>数据 ...
摄屏播放插件html5,Js视频播放器插件Video.js使用方法详解
Video.js快速入门我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js 使用免费的CDN托 ...
理解 JS 装饰器：@Decorator
Javascript 里的装饰器目前还处于 stage-2 阶段,借助 TypeScript 或者 Babel,已经有大量的优秀开源项目深度用上它了,比如:VS Code: 理解装饰器有助于帮助我们更 ...
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性
Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性一.实例演示,v-if,v-for,v-model,v-bind,v-on 方法含义 v-bin ...

JS —— 存取器属性get()和set()

JS —— 存取器属性get()和set()相关推荐

最新文章

热门文章