Object.defineProperty 中 get set 用法
就是两个函数，只要搞清楚get、set的执行时机就可以了。执行时机如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id="h1"></h1>
<p id="content"></p>
</body>
<script>
var o = {};
Object.defineProperty(o,'name',{
get : function() {
alert('get');
return 'kkk';
},
set : function (val) {
alert('set');
alert('val --- '+ val); //'Jack'
// o.name = 'qqq'; // 在这里设置o.name会进入死循环,因为o.name一旦发生变化，就会触发set
return 'ppp';
}
}); // （取值）：读取 o 的属性 name 的值，会调用get方法
var b = o.name;
console.log(b); // 'kkk' // （赋值）：修改 o 的属性 name 的值，会调用set方法
// set可以接收一个参数，这个参数就是重新设置的o.name('Jack)
o.name = 'Jack';
console.log(o.name); // 'kkk',还是 get 函数中的返回值，set 函数中的返回值没有改变 o.name
</script>
</html>
Object.defineProperty 中 get set 用法的更多相关文章
- Object.defineProperty 中的 writable 和 configurable 和 enumerable 的理解
在现在比较新的框架中, 比如 reactjs, vuejs中用得很多的一个属性便是 Object.defineOProperty 此属性的文档在网上一搜, 其中的几个属性, 包括 存取描述符(有set ...
- 深入理解 Object.defineProperty 及实现数据双向绑定
Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...
- vue中Object.defineProperty用法
function def (obj, key, val, enumerable) { Object.defineProperty(obj, key, { value: val, enumerable: ...
- Object.defineProperty()方法的用法详解
Object.defineProperty()函数是给对象设置属性的. Object.defineProperty(object, propertyname, descriptor); 一共有三个参数 ...
- Object.defineProperty()更改对象中的函数
这个方法可以修改javascript中的对象的属性值,但是例子只讲了如何修改对象中的属性值,却没有讲如何修改对象里面的方法,所以这里补充下: 例子代码如下: <!DOCTYPE html> ...
- js中的Object.defineProperty()和defineProperties()详解
ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性.ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述 ...
- 理解Object.defineProperty函数中的get与set
defineProperty是什么: 该函数可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.通俗理解就是: 给对象添加一个新的属性,或者针对对象里的某些属性,可以给这 ...
- JS apply的巧妙用法以及扩展到Object.defineProperty的使用
Math.max 实现得到数组中最大的一项 var array = [1,2,3,4,5]; var max = Math.max.apply(null, array); console.log(ma ...
- vue双向数据绑定的原理-object.defineProperty() 用法
有关双向数据绑定的原理 关于数据双向绑定的理解:利用了 Object.defineProperty() 这个方法重新给对象定义了新属性,在操作新属性分别为为获取属性值(调用get方法)和设置属性值(调 ...
随机推荐
- Excel选择区域一次性替换小于200的数值
1.ctrl+F,点击"选项",在出来的扩展框选择"格式"后小三角,选择"从单元格选择格式": 2.选择要进行替换小于200的区域: . 3 ...
- 基于 CentOS 8 搭建 openLDAP 服务器
转载请注明原文地址:基于 CentOS 8 搭建 openLDAP 服务器 环境 OS: CentOS 8.4.2105 PHP: 7.4.21 注意 CentOS 7 中可能默认提供了 openLD ...
- MySQL数据库企业集群项目实战(阶段三)
MySQL数据库企业集群项目实战(阶段三) 作者 刘畅 时间 2020-10-25 目录 1 架构拓扑图 1 1.1 方案一 1 1.2 方案二 2 ...
- 13、win10系统远程桌面oracle修正问题
1.A电脑(Windows 10)远程连接B电脑(Widows Server 2016), 出现错误: 出现身份验证错误.要求的函数不受支持 远程计算机:xx.xx.xx.xx 这可能是由于CredS ...
- 精尽Spring Boot源码分析 - 日志系统
该系列文章是笔者在学习 Spring Boot 过程中总结下来的,里面涉及到相关源码,可能对读者不太友好,请结合我的源码注释 Spring Boot 源码分析 GitHub 地址 进行阅读 Sprin ...
- 浅析富文本编辑器框架Slate.js
浅析富文本编辑器框架Slate.js 本文不是关于Slate.js使用入门的文章,如果还不了解该框架,建议先阅读下官方的文档:Slate官网文档 关于Slate的一些特性 不同于其他编辑器类的库,Sl ...
- sql通用行列转换
-- 行转列 select 姓名, SUM(case 课程 when '语文' then 分数 else 0 end) as 语文, SUM(case 课程 when '数学' then 分数 els ...
- 「CF527E」 Data Center Drama
「CF527E」 Data Center Drama 传送门 显然一个环肯定满足题目条件. 然后我就开始想:先整一棵 \(\texttt{DFS}\) 树,然后非树边从深度深的节点向深度浅的节点连边, ...
- k8s之deployment详解
Deployment介绍 为了更好地解决服务编排的问题,k8s在V1.2版本开始,引入了deployment控制器,值得一提的是,这种控制器并不直接管理pod, 而是通过管理replicaset来间接 ...
- AI 预测蛋白质结构「GitHub 热点速览 v.21.29」
作者:HelloGitHub-小鱼干 虽然 AI 领域藏龙卧虎,但是本周预测蛋白质结构的 alphafold 一开源出来就刷爆了朋友圈,虽然项目与我无关,但是看着科技进步能探寻到生命机理,吃瓜群众也有 ...