1. 闭包语法糖
function fn ( ) {
let num = 10
return {
set num ( value) {
console. log ( "num被修改了" ) ;
num = value
} ,
get num ( ) {
console. log ( "num被访问了" ) ;
return num
}
}
}
let obj = fn ( )
obj. num
obj. num = 20
2. class/get/set
class Fn {
#num = 10
set num ( value) {
console. log ( "num被修改了" ) ;
this . #num = value
}
get num ( ) {
console. log ( "num被访问了" ) ;
return this . #num
}
}
let obj = new Fn ( )
obj. num
obj. num = 20
3. 属性拦截器
let obj = {
name: "小红"
}
let temp = obj. name
Object. defineProperty ( obj, "name" , {
set ( value) {
console. log ( "你修改了该属性" ) ;
temp = value
} ,
get ( ) {
console. log ( "你访问了该属性" ) ;
return temp
}
} )
obj. name
obj. name = "小黄"
let obj = {
name: "小红" ,
age: 18 ,
a: {
b: {
c: 111
}
}
}
function defineReactive ( obj, data) {
let value = obj[ data]
Object. defineProperty ( obj, data, {
set ( newValue) {
console. log ( "你修改了该属性" ) ;
value = newValue
} ,
get ( ) {
console. log ( "你访问了该属性" ) ;
return value
}
} )
}
defineReactive ( obj, "name" )
obj. name
obj. name = "小黄"
defineReactive ( obj. a. b, "c" )
obj. a. b. c
obj. a. b. c = 20
4. 对象代理拦截器
vue3就是采用 Proxy 代理对象对数据进行劫持的 vue2和vue3的这两种方式要等以后vue文章里面会讲到
let obj = {
name: "小红" ,
age: 18 ,
a: {
b: 10
}
}
let proxy = new Proxy ( obj, {
get ( obj, prop) {
console. log ( "访问了该属性:" , prop) ;
return prop
} ,
set ( obj, prop, value) {
if ( obj[ prop] ) {
console. log ( "修改了该属性:" , prop, " 修改后的值为:" , value) ;
obj[ prop] = value
} else {
console. log ( "添加了该属性:" , prop, " 添加的值为:" , value) ;
obj[ prop] = value
}
} ,
deleteProperty ( obj, prop) {
console. log ( "删除了该属性:" , prop) ;
return true
} ,
} )
proxy. name
proxy. sex = "男"
proxy. sex = "女"
delete proxy. sex
proxy. a. b