JavaScript的Object.defineProperty( )方法

Object.defineProperty方法可以在一个对象上定义一个新的属性,或者修改该对象原有的属性,并返回该对象。

基础的语法格式如下:

1 var data = {}//定义一个对象
 2 Object.defineProperty(data,'name',{
 3     configurable:false,//设置对象的属性是否可以被修改/删除(默认为false)
 4     enumerable:false,//设置对象的该属性是否可以枚举(默认为false)
 5     value:111,//设置对象该属性的值(数值,对象,函数等)默认为undefined
 6     writable:false,//设置对象该属性的值是否可以修改(默认为false)
 7     //get函数,函数的返回值被用作属性的值
 8     //set函数,属性值被修改时,调用此函数。
 9
10
11       })

可以利用该属性,实现vue的双向绑定:

1 <input type="text" id="text" placeholder="请输入你的名字" />
2 <p id="textshow"></p>
1 var obj = {}
 2 Object.defineProperty(obj,'name',{
 3       set(val){
 4       $('#text').val(val);//设置或返回表单字段的值
 5       $('#textshow').text(val);//设置或返回元素的文本内容
 6        },
 7       get(){}
 8 })
 9 $('#text').keyup(function(event){
10     obj.name = event.target.value;
11 })
12 console.log(obj)

实现效果如图所示:

当在控制台设置属性的值,dom页面也会做出改变

实现效果如图所示:

当对象需要设置多个属性时,可以使用Object.defineProperties

语法格式为:

1 var obj = {};
 2 Object.defineProperties(obj, {
 3   'property1': {
 4     value: true,
 5     writable: true
 6   },
 7   'property2': {
 8     value: 'Hello',
 9     writable: false
10   }
11   // etc. etc.
12 });

好的,第一篇随笔结束,完结,撒花!

(0)

相关推荐

  • JavaScript 对象所有API解析【2021版】

    前端技术优选 今天以下文章来源于若川视野 ,作者若川视野 若川视野建议工作5年内的前端人关注.我是若川,<学习源码整体架构系列>作者,知乎.掘金等平台的文章累计超过百万阅读.致力于前端开发 ...

  • JavaScript 对象的创建和操作

    <script>         // 对象是属性的无序集合,每个属性都是一个名/值对. 属性名称是一个字符串.         // 对象种类         // 内置对象(nativ ...

  • Vue响应式系统如何操作运用?本文详解

    前言 之前学习 vue 的时候,一直没刨根问底过.在看到网上这类文章比较多,参差不齐的质量有时候看的一头雾水.当然也有不错的文章,但是终究是别人的理解.于是写一篇关于自己的理解记录下来,亲身实践才能收 ...

  • 如何重写object虚方法

    在 C# 中 Object 是所有类的基类,所有的结构和类都直接或间接的派生自它.前面这段话可以说所有的 C# 开发人员都知道,但是我相信其中有一部分程序员并不清楚甚至不知道我们常用的 ToStrin ...

  • JavaScript字符串 - 函数及方法

    字符串的函数 首先我们先来看一下这些字符串函数 big() 用大号字体显示字符串 blink() 显示闪动字符串(IE下无效) bold() 使用粗体显示字符串 fixed() 以打字机文本显示字符串 ...

  • JavaScript数组的一些方法、数学对象、定时器

    <script>         // sort()方法会按照字符串的先后顺序对数组的每一个数组项目的字符顺序来进行排序的         // 如果数组的某个项目不是字符串, 那么会先把 ...

  • JavaScript网页截屏方法,你get到了嘛?

    之前我曾写过如何将canvas图形转换成图片和下载canvas图像的方法,这些都是在为这个插件做技术准备. 技术路线很清晰,将网页的某个区域的内容生成图像,保持到canvas里,然后将canvas内容 ...

  • JavaScript常用标签和方法汇总

    HTML DOM Document 对象 Document 对象属性和方法 HTML文档中可以使用以下属性和方法: 属性 / 方法描述 document.activeElement返回当前获取焦点元素 ...

  • selenium+python自动化101-execute_script 方法获取 JavaScript 返回值

    前言 之前经常使用 execute_script() 方法执行 JavaScript 的来解决页面上一些 selenium 无法操作的元素,但是一直无法获取执行的返回值. 最近翻文档,发现 execu ...

  • JavaScript删除对象的某个属性的方法

    WEB前端开发社区 5天前 1.delete  delete是删除对象的属性没有任何剩菜,剩下的唯一真正的方法,但它的工作比其"替代"设置慢100倍 object[key] = u ...

  • 5种使JavaScript代码库更干净的方法

    WEB前端开发社区 3天前 JavaScript无处不在,从PC端到移动设备端,甚至是后端,都在使用JavaScript. 在本文中,我将尝试一些可用来使代码看起来更简洁的实践方案. 1.使用默认参数 ...

  • 泛型与普通方法、Object方法效率比较

    泛型与普通方法.Object方法效率比较 简介: 方法的执行效率比较,首先考虑的就是执行方法时所耗费的时长,时长越短,效率越好,耗时越长,效率越差.下面就从执行耗时方法考量三种方法的效率. 实现方法: ...