object.definepProperty使用方法,vue2双向绑定原理

首先要介绍的是definepProperty的三个参数

javascript 复制代码
object.definepProperty(对象名,属性名,属性值)

再者要介绍的就是属性值了,

javascript 复制代码
object.definepProperty(person,age,{value:18})

此时我们会遇到如下几个问题

一、第一,我们添加的这个属性名,不可被枚举

javascript 复制代码
object.definepProperty(person,age,{value:18})

object.keys(person)

for(var item in person){
    console.log(item)
}

解决方法:

我们为其添加可枚举属性。enumerable:true,默认值是false

javascript 复制代码
Object.defineProperty(obj, 'age', {
  value: "18",
  enumerable: true
});

二、第二,我们添加的这个属性名,不可被修改

javascript 复制代码
object.definepProperty(person,age,{
value:18
enumerable:true
})

person.age =20

解决方法:添加writeable:true(可以被修改)属性,默认值false(不可被修改)

javascript 复制代码
object.definepProperty(person,age,{
value:18,
enumerable:true, //控制属性是否可以枚举,默认值是false
writeable:true // 控制属性是否可以被修改,默认值是false
})

person.age =20

三、第三,我们添加的这个属性名,不可被删除

javascript 复制代码
object.definepProperty(person,age,{
value:18,
enumerable:true, //控制属性是否可以枚举,默认值是false
writeable:true // 控制属性是否可以被修改,默认值是false
})

delete person.age 
//或者
delete person['age']

解决方法:添加configurable:true(可以被删除),默认值false(不可被删除)

javascript 复制代码
Object.defineProperty(person.age,{
value:18,
enumerable:true, //控制属性是否可以被枚举,默认值false
writerable:true,  // 控制属性是否可以被修改,默认值false
configrable:true //控制属性是否可以被删除,默认值false
})

四、get(gtter)和set(setter)用法

1.当要将另一个变量的值number赋值给age时候,当改变number的值的时候,对象中age的值并没有发生改变

javascript 复制代码
number=10

person={
age:number
}
// {age:10}

number =12

//{age:10}

解决,此时我们就要用到get()函数来实现,get的返回值,就是age的值

get():当有人读取person的age属性时,就会调用get()方法,此时number现在的值就会赋值给age

javascript 复制代码
object.definepProperty(person,age,{
    get(){
        return number
    }
})

2.当有人给age赋值时候,但是age的值没有改变,这是因为age的值是number

javascript 复制代码
var number =10

person={
    age:number
}
person.age =20
// {age:10}

解决方法:使用set()函数,获取到age改变的值,然后赋值给number

set():当有人改变age 的时候,获取到改变的值,赋值给number,此时我们再次获取age时候,就会调用get()把number的值赋值给age

javascript 复制代码
object.definepProperty(person,age,{
    // 当有人获取age时候,就会调用get()
    get(){
        return number
    },
    //当有人改变age的时候,就会调用set()
    set(value){
    number = value
}
})
相关推荐
vipbic12 分钟前
用 Turborepo 打造 Strapi 插件开发的极速全栈体验
前端·javascript
天涯学馆13 分钟前
为什么 JavaScript 可以单线程却能处理异步?
前端·javascript
集智飞行22 分钟前
c++函数传参的几种推荐方式
开发语言·c++
Henry_Lau61728 分钟前
主流IDE常用快捷键对照
前端·css·ide
陶甜也33 分钟前
使用Blender进行现代建筑3D建模:前端开发者的跨界探索
前端·3d·blender
鼾声鼾语42 分钟前
matlab的ros2发布的消息,局域网内其他设备收不到情况吗?但是matlab可以订阅其他局域网的ros2发布的消息(问题总结)
开发语言·人工智能·深度学习·算法·matlab·isaaclab
麦麦鸡腿堡1 小时前
Java_类的加载
java·开发语言
我命由我123451 小时前
VSCode - Prettier 配置格式化的单行长度
开发语言·前端·ide·vscode·前端框架·编辑器·学习方法
HashTang1 小时前
【AI 编程实战】第 4 篇:一次完美 vs 五轮对话 - UnoCSS 配置的正确姿势
前端·uni-app·ai编程
JIngJaneIL1 小时前
基于java + vue校园快递物流管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js