- 为了更细粒度的控制对象的属性，可为对象属性配置getter和setter，已达到对属性合法性的进一步检测
//内部构造函数创建对象
const date=new Date() //最常用的
console.log(date.valueOf()) //时间戳 用来刷新
console.log(Date.now())
const num=Number(1)
console.log(num.valueOf())
const reg=new RegExp(/\d+/)
console.log(reg.test('11'))
const fun=new Function('name','age',`
this.name=name
this.age=age
this.show=function(){
console.log(this.name +'=='+this.age)
}
`)
const func=new fun('xiaomu',28)
console.log(func.valueOf())
func.show()
- 使用访问器为对象扩展新的属性，以满足业务需求，可以封装复杂的业务逻辑，提供统一简洁的接口
`use strict`
const blogs = {
list: [
{ title: 'vue', count: 200 },
{ title: 'react', count: 100 },
{ title: 'js', count: 11 }
],
get total() { //通过get关键字扩展新属性 属性名为total
return this.list.reduce((res, item) => res + item.count, 0)
}
}
console.log(blogs.total)
- 使用访问器可以批量为属性赋值，可同时处理多个属性，提供更快捷的属性读写方式
`use strict`
//批量为属性赋值，提供更快捷的方式
const user={
fistName:'xiaomu',
lastname:'guizhi',
get name(){
return `${this.fistName} ${this.lastname}`
},
set name(val){
[this.fistName,this.lastname]=val.split(' ')
}
}
console.log(user.name)
user.name='xxxxxxx YYYY'
console.log(user.fistName)
console.log(user.lastname)
- 使用访问器可配置上下文请求的token值，以更优雅的方式实现token的存储
//Token处理
const request = {
get token() {
const token = localStorage.getItem('TOKEN')
if (!token) {
alert('请登录')
}
return token
},
set token(val) {
localStorage.setItem('TOKEN', val)
},
}
request.token = '1110110'
console.log(request.token)
- 当对象中同时存在和访问器同名属性是，访问器的优先级高于同名属性（严格模式下不能定义同名属性），建议将同名属性移到Symbol标记属性中
`use strict`
//访问器优先级
const DATA=Symbol('data')
const user={
[DATA]:{name:'xiamu'},
get name(){
return this[DATA].name
},
set name(val){
this[DATA].name=val
}
}
console.log(user.name)
user.name='xiamu guizhi'
console.log(user.name)
console.log(user[Symbol('data')])
- 使用Object.definePropertyies()在构造函数中使用访问器
`use strict`
//Object.definePropertyies()在一个对象上定义新的属性，并返回对象
function User(name, age) {
const item = { name, age }
Object.defineProperties(this,
{
name: {
get() {
console.log('get')
return item.name
},
set(val) {
console.log('set')
if (!val) {
throw new Error('用户名不能为空')
}
}
},
age: {
get() {
return item.age
},
set(val) {
if (typeof val !== 'number') {
throw new Error('年龄必须为数字！')
}
item.val = val
}
}
}
)
}
const user1=new User('xx',12)
console.log(user1.name)
delete user1.age
console.log(user1.age)
- ES6中的类（class）其实只是一堆访问器的语法糖而已
`use strict`
class User {
constructor(name, age) {
this.data = { name, age }
}
set name(val) {
if (!val) {
throw new Error('用户名不能为空！')
}
this.data.name = val
}
get name() {
return this.data.name
}
set age(val) {
if (!val) {
throw new Error('age不能为空！')
}
this.data.age = val
}
get age() {
return this.data.age
}
}
const user1 = new User('xx')
console.log(user1.name, user1.age)
数据监听的实现
/遍历对象 通过definePropertype重新走get set 方法，进而可以达到 在设置变量 获取变量的时候起到监听作用
const person = {
name: 'xx',
age: 11,
address: '熊本'
}
//响应式
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
return val
},
set:function(newVal) {
console.log('在操作我哦')
val = newVal
}
})
}
Object.keys(person).forEach(item=>{
defineReactive(person,item,person[item])
})
console.log("person color:" + person.name);