前言:
set和get能用ES5写,只要将get与set通过原型链的方式,即公有方式去写,参考我的ES5与ES6的class基础语法(如何声明一个类),本文采用ES6语法去写。
一、get与set介绍
1.getter是获取属性值,setter是设置属性值,getter不带任何参数,setter设置键值,值以参数的形式传递,在setter函数体中,一切的return都是无效的,当只有setter函数时,那这个属性是只写的,当只有getter函数时,那这个属性是只读的,同时有setter、getter函数,这个属性可读可写。
2.方式,就是在函数前面添加get 就是getter获取属性值,在带参函数体前加set就是setter设置属性值
代码奉上:
代码1:
class Animal{
constructor(type){
this.type = type
}
get age () {
return 4
}
set age (val) {
// this.realAge是个自定义属性
this.realAge = val
}
}
let dog = new Animal('cat')
console.log(dog.age) // 4
dog.age = 5
console.log(dog.realAge) // 5
说明:
1.return 4与age没有半毛钱关系,用户只能通过age去设置和读取数据,这样子也是对内部数据进行保护的机制,如下面一个【代码2】。
2.this.realAge是自定义属性
代码2:
let _age = 10
class Animal{
constructor(type){
this.type = type
}
get age () {
return _age
}
set age (val) {
// 可以加上条件才能修改内容的阻止
if(val > 10){
_age = val
}
}
}
let dog = new Animal('cat')
console.log(dog.age) // 10
dog.age = 9
console.log(dog.age) // 10
dog.age = 12
console.log(dog.age) // 12
说明:
1.如果添加了条件,如果只有符合条件才能去修改值
2.成功设置值后,通过将val赋值给_age,然后通过get将值返回, 但是用户无法直接获得_age,必需得通过age这个出入口才行,保证数据的安全性。
console.log(dog._age) // underfind
一个案例:
见如下代码
class CustomHTMLElement1 {
constructor (element) {
this.element = element
}
get html () {
return this.element.innerHTML
}
set html (value) {
this.element.innerHTML = value
}
}
let Omain = document.getElementById('main')
let oId = new CustomHTMLElement1(Omain)
oId.html = 'aaaaa'
说明:
1.他是通过选择器,将所给的区域变成新的东西!
2.可以把代码复制到慕课网首页的console中玩玩,哈哈哈,放心玩不坏!