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方法)和设置属性值(调 ...
随机推荐
- UGUI ScrollRect 鼠标滑动灵敏度调节
- centos8添加中文语言包
centos8添加中文语言包 系统:centos8 查看: [root@centos8]# locale -a 不支持中文包,按照centos7的方式安装:yum install kde-l10n-C ...
- 关于VIM的迁移
将Gvim7.3从我笔记本拷到公司的电脑上面时, 这问题留了好久没有去解决.语法高亮无效不管我怎么设置 syntax enable,还是遇到这个问题. 后来在偶然的情况下,将我笔记本上面的文件在拷一份 ...
- jquery 选择器 模糊匹配
根据name值匹配 1.查询前缀为aa的数据 $("div[name^='aa']"); 2.查询后缀为aa的所有div的jquery对象 $("div[name$='a ...
- keycloak~自定义rest接口
rest资源 对于我们集成keycloak来说,你可能会遇到它没有实现的功能,这时需要对kc进行扩展,资源的扩展是其中一个方面,它需要实现RealmResourceProvider和RealmReso ...
- 友华新光猫PT924G破解telnet之路
最近去找电信要了个新的千兆光猫(电信宽带300兆配100兆光猫真鸡贼),背后一看不是华为了,是友华PT924G,在http://192.168.1.1:8080/里看到了熟悉的电信界面 用teleco ...
- bugku flag在index里面
先点进去看看. 看到file,似乎在暗示着我们,php://filter/read/convert.base64-encode/resource=index.php, 这句将index.php内容用b ...
- Jenkins集成SonarQube遇到的报错
Jenkins集成Sonar过程中遇到的报错 1.jenkins中无法添加sonarqube的token凭证 因为添加的凭证类型错误,所以无法添加token,类型应该选择"Secret te ...
- python使用笔记17--异常处理
什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行. 一般情况下,在Python无法正常处理程序时就会发生一个异常. 异常是Python对象,表示一个错误. 当Pyth ...
- Serverless与Web后端天生不合?
Serverless/Faas/BaaS 等概念在这几年的技术圈中是绝对的热点词汇之一,国内外众多云厂商也纷纷推出自家的 Serverless 和函数计算产品,微信也依托腾讯云推出了基于 Server ...