Vue 07 js方法Object.defineProperty
1 描述
该方法允许精确地添加或修改对象的属性。可以对已有的属性进行获取及修改,也可以添加新的属性并进行操作。
2 方法参数
Object.defineProperty(操作的对象,添加的属性的名称,属性描述对象)
3 属性描述对象说明
里面可以添加属性和函数
3.1 属性
3.1.1 说明
1)value:添加的属性的值,默认undifiend
2)enumerable:该属性是否可以被遍历,默认false
3)writable:该属性是否可以编辑,默认false
4)configurable:该属性是否可以被删除:默认false
3.1.2 示例
1)代码
<script> let a = {
name:'张三',
gender:'男'
}
Object.defineProperty(a,'age',{
value:18,
enumerable:true, //该属性是否可以被枚举(遍历),默认false
writable:true, //该属性是否能被编辑,默认false
configurable:true //该属性是否能被删除,默认false
}) for(let key in a){
console.log(a[key])
} </script>
2)运行结果
3.2 函数
3.2.1 getter函数
当访问该属性时,会调用此函数。执行时不传入任何参数。该函数的返回值会被用作属性的值。也就是说拿属性的值就是拿该方法的返回值
3.2.2 setter函数
setter 函数,当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的this
对象。
3.2.3 示例1
当如下编码时,a对象中age会在初始化的时候把number的值赋给它
之后,对number或者age属性修改都不会影响到对方
let number = 18
let a = {
name:'张三',
gender:'男',
age:number
}
3.2.2 示例2
当如下编码时,a对象中age会在初始化的时候把number的值赋给它
之后,对number或者age属性修改也都不会影响到对方
<script> let number = 18
let a = {
name:'张三',
gender:'男',
} Object.defineProperty(a,'age',{
value:number,
enumerable:true, //该属性是否可以被枚举(遍历),默认false
writable:true, //该属性是否能被编辑,默认false
configurable:true //该属性是否能被删除,默认false
})
</script>
3.2.4 示例3
如下编码,使用getter函数。
发现,每次去获取age的值,都是调用getter函数,获取到的是getter的返回值
在这里,getter返回的是number,所以修改number后,获取age,age也会同步变化
但是,修改age的值,number不会变化,且再去获取age的值,获取到的还是number,而不是修改后的age值。看似改了age的值,却又没改
<script> let number = 18
let a = {
name:'张三',
gender:'男',
} Object.defineProperty(a,'age',{
get(){
return number
}
})
</script>
3.2.5 示例4
使用setter和getter函数
在修改age的值的时候,调用setter函数,setter函数,接收到了修改的值
在这里,在setter函数里面,把接收到的值赋值给number,所以修改age的值,number的值就变化了,同时,getter函数返回的也是number,获取age,获取到的是number,也一样改变了
<script> let number = 18
let a = {
name:'张三',
gender:'男',
} Object.defineProperty(a,'age',{
get(){
console.log('get方法调用')
return number
}, set(value){
console.log('set方法调用')
number = value
}
})
</script>
3.2.6 示例
下面同意使用setter和getter函数。
setter函数,并没有把接收到的值给number,而是给了一个固定值666
getter函数,不是返回的number,而是返回固定值123
所以,我们修改number值,获取到了age却还是123
修改age属性,不论修改的值是什么,number的值总是666,获取age值还是123
<script> let number = 18
let a = {
name:'张三',
gender:'男',
} Object.defineProperty(a,'age',{
get(){
console.log('get方法调用')
return 123
},
set(value){
number = 666
}
}) </script>
Vue 07 js方法Object.defineProperty的更多相关文章
- js中Object.defineProperty()和defineProperties()
在介绍js中Object.defineProperty()和defineProperties()之前,我们了解下js中对象两种属性的类型:数据属性和访问器属性. 数据属性 数据属性包含一个数据的位置, ...
- js中Object.defineProperty()方法的解释
菜菜: “老大,那个, Object.defineProperty 是什么鬼?” 假设我们有个对象 user ; 我们要给它增加一个属性 name , 我们会这么做 1 2 3 var user = ...
- 「Vue」JS方法学习
1.构造函数 大写开头的,能被NEW一个新实例,实例即执行回调函数 异步返回数据.then指定回调函数的时候,成功的回调函数必须传,失败的回调可以不传 var fs = require('fs') f ...
- vue 全局 js 方法
1.新增 getCurrentDataType.js 文件 import cookieUtils from '@/config/cookieUtils' function getCurrentData ...
- js中的Object.defineProperty()和defineProperties()详解
ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性.ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述 ...
- vue之Object.defineProperty()
了解Object.defineProerty()方法 关于Object.defineProperty()方法的解释,理解Object.defineProperty的作用 这篇文章做了很详细的概述 关于 ...
- JS apply的巧妙用法以及扩展到Object.defineProperty的使用
Math.max 实现得到数组中最大的一项 var array = [1,2,3,4,5]; var max = Math.max.apply(null, array); console.log(ma ...
- ES5 Object.defineProperty 方法
先看一个例子: var o = {}; o.a = 1; // 等待于: Object.defineProperty(o, 'a', { value: 1, writable: true, confi ...
- Object.defineProperty实现数据绑定
1.Object.defineProperty方法 Object.defineProperty(obj, prop, descriptor); (1)参数: obj:目标对象 prop:需要定义的属 ...
- Vue el与data的两种写法 && Object.defineProperty方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
随机推荐
- JAVA 用分苹果来理解本题
思路 其实这是一道非常经典的分苹果问题:有m个一样的苹果和n个一样的盘子,把苹果放盘子里,每个盘子允许0-m个苹果,求问有多少种分法? 与本题的共通之点在于,输入的正整数可以看成m个苹果,拆分出的加数 ...
- 【Java并发002】使用级别:线程同步与线程通信
一.前言 本文介绍Java多线程技术,分为五个部分:多线程的两种实现方式--继承Thread类和实现Runnable接口:线程同步应用:三人吃苹果:线程同步+线程通信应用之一:生产者-消费者问题:线程 ...
- [ERROR] mariadbd: The table 'INNODB_BUFFER_PAGE' is full
问题描述:将information_schema导出sql文件到新库中恢复,sql中的表都是临时表,存储引擎都是memory,在导入的过程中实际大量会占用临时表. 报错信息:ERROR 1114 (H ...
- <七>深入理解new和delete的原理
new ,delete 运算符 int *p =new int; delete p; 看一下汇编代码 可以看到new 和delete 运算符其实也是 operator运算符重载函数的调用 malloc ...
- Devexpress 图表显示数据标签
dev的图标功能非常强大其中有一些设置可以更好的展现出数据 设置Series的标签 series.LabelsVisibility = DevExpress.Utils.DefaultBoolean. ...
- 第1章-Spring的模块与应用场景
目录 一.Spring模块 1. 核心模块 2. AOP模块 3. 消息模块 4. 数据访问模块 5. Web模块 6. 测试模块 二.集成功能 1. 目标原则 2. 支持组件 三.应用场景 1. 典 ...
- integer 拆箱装箱以及范围
//装箱是将一个原始数据类型赋值给相应封装类的变量.而拆箱则是将一个封装类的变量赋值给相应原始数据类型的变量. int i1 = 1; int i2 = 1; Integer integer1 = n ...
- oracle第二步创建表空间、用户、授权
Windows+r→键入sqlplus,输入已安装好的oracle数据库超级管理员账号密码登录.显示: 成功. 创建表空间: 创建用户并默认表空间: 授权该创建用户对数据库的操作: 代码: SQL&g ...
- 这可能是最全的SpringBoot3新版本变化了!
11月24号,Spring Boot 3.0 发布了第一个正式的 GA 版本,一起看看新版本到底有哪些变化. 2.7版本升级指南 官方提供了一个从 2.7 版本升级到 3.0 的指南:https:// ...
- 【每日一题】【栈】2022年2月2日-NC40 两个链表生成相加链表
描述 假设链表中每一个节点的值都在 0 - 9 之间,那么链表整体就可以代表一个整数. 给定两个这种链表,请生成代表两个整数相加值的结果链表. 答案:栈 import java.util.*; /* ...