关于js的Object.defineProperty方法的使用
2019-03-19 14:00
274 查看
一、关于Object.defineProperty
Object.defineProperty()是直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象,一共有三个参数。
Object.defineProperty(object, propertyname, descriptor);
- object:必须,要在其上添加或修改属性的对象。
- propertyname:必需。 一个包含属性名称的字符串。
- descriptor:属性描述符。 它可以针对数据属性或访问器属性。
descriptor:有以下参数值
- value: 属性的值,默认为 undefined。 writable: 该属性是否可写,如果设置成
false,则任何对该属性改写的操作都无效(但不会报错,但是在严格模式下会报错。),对于像前面例子中直接在对象上定义的属性,这个属性该特性默认值为为
true。 - configurable:总开关,一旦为false,就不能再设置他的(value,writable,configurable)
- enumerable:定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举。
- get: 对定义的属性取值的时候会触发get 对应的函数,并且返回结果,默认返回undefined。
- set: 对定义的属性赋值的时候会触发set 对应的函数
二、 使用Object.defineProperty实现简单的双向数据绑定mvvm
双向数据绑定的原理是:
mvvm 分为model(模型) view(视图) viewModel(视图模型)
- model 用来存储数据
- view 用来展示数据
- ViewModel 关联数据,和model实现双向绑定。
将对象的属性绑定到view,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值在view上也会得到更新。同样的道理,当我们有一个输入框或者textarea的时候,我们输入一个新值的时候,也会在该对象的name属性得到更新。
下面是一个通过 Object.defineProperty 来实现一个简单的数据双向绑定。通过该方法来监听属性的变化。
实现的简单效果如下:
页面上有一个input输入框和h5显示框,在input输入框输入值,按下enter键时,h5也会显示对应的值,可以简单的理解为 模型-> 视图的 改变,以及 视图 -> 模型的改变。如下代码:
<!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> <div id="app"> <h5 id="txtShow"></h5> <input type="text" id="txt"> </div> <script> var model = {} var v = '' Object.defineProperty(model, 'txt', { // 设置属性值 set: function(val) { v = val txtShow.innerHTML = this.txt; }, // 获取属性值 get: function () { return v } }) var txtShow = document.getElementById('txtShow'), txt = document.getElementById('txt'); txt.onkeyup = function() { if (event.keyCode == 13) { model.txt = txt.value; } } </script> </body> </html>
相关文章推荐
- includes方法 使用 Object.defineProperty 扩展 ,解决不兼容问题
- 强大的JS方法Object.defineProperty详解及VUE.JS双向绑定原理
- JS中的双向数据绑定及Object.defineProperty方法
- 有关于mvvm中的Object.defineProperty方法的一些理解
- JS进阶篇--JS apply的巧妙用法以及扩展到Object.defineProperty的使用
- JavaScript使用Object.defineProperty方法实现双数据绑定
- js中的Object.defineProperty方法
- 使用Object.defineProperty实现简单的js双向绑定
- 使用Object.defineProperty实现简单的js双向绑定
- js中神奇的Object.defineProperty方法
- JS中的双向数据绑定及Object.defineProperty方法
- vue.js关于Object.defineProperty的利用原理
- 关于ajax页面里的js方法无法使用的解决办法
- JS 使用List<Object> 对象中的Object对象的某个属性的临时处理方法
- ES5 Object.defineProperties / Object.defineProperty 的使用
- swfobject.js 2.2简单使用方法
- 【转】3篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:官方原生方法分析
- 关于使用jquery.form.js上传文件同时提交表单的方法
- js中的object的使用方法
- js中的hasOwnProperty和isPrototypeOf方法使用实例