认识Object.defineProperty以及Object.defineProperties
Object.defineProperty会直接在对象上定义新的属性和方法，或者修改存在的属性和方法，并返回这个对象。
语法：
Object.defineProperty(object, propertyname, descriptor)参数：
- object 必需。添加需要修改属性或者添加属性的对象。
- propertyname 必需。需要定义或者修改属性的名称(字符串)。
- descriptor 必需。属性描述符。通俗说，属性的描述。可以添加数据(数据描述符)属性，或者访问器(存取描述符)属性。数据描述符与存取描述符不可混用,否则报错。后续详解。
descriptor的参数
数据描述符
- value-----属性的值，默认为 undefined。
- writable-----属性是否可写，当属性的值可以被赋值操作修改时设置为true。默认为false。
访问器描述符
- get-----属性的getter方法，属性如果有getter方法，则返回属性值，否则返回undefined。默认为 undefined。
- set-----属性的setter方法，属性如果没有setter方法，返回undefined。该方法接收唯一的参数，作为属性的新值。默认为 undefined。
实例
实现input输入，span同时输出功能
<body>
<input type="text">
<span></span>
</body><script>
var input = document.querySelector("input");
var span = document.querySelector("span");
//创建新对象
var obj = {};
//getValue只是自己定义的属性名字
Object.defineProperty(obj,"getValue",{
//configurable-----如果为false，
//则任何尝试删除目标属性或修改属性以下
//特性（writable, configurable, enumerable）的行为将被无效化。
configurable:true,
//传入参数并把参数赋值
set:function(Data){
input.value = Data;
span.innerHTML = Data;
}
})
//input标签设置键盘弹起事件
input.onkeyup = function(){
//赋值，实现数据双向开始。
obj.getValue = input.value;
}
</script>运行结果
注意
- 当使用了getter或setter方法，不允许使用writable和value这两个属性。
- get或set不是必须成对出现，任写其一就可以。如果不设置方法，则get和set的默认值为undefined
Object.defineProperties使用
语法
Object.defineProperties(obj, props)使用实例
两个input标签之间数据互传
<body>
<div>
输入数据
<input type="text" class="one">
</div>
<div>
显示数据
<input class="tow"></input>
</div>
</body>
<script>
var one = document.querySelector('.one');
var tow = document.querySelector('.tow');
//创建新对象
var obj = {};
//使用对象的方法保存属性的名字
Object.defineProperties(obj, {
onediv: {
//ture表示允许删除属性或者修改属性
configurable: true,
//传入参数并把参数赋值
set: function (newValue) {
one.value = newValue;
tow.value = newValue;
}
},
towdiv: {
//ture表示允许删除属性或者修改属性
configurable: true,
//传入参数并把参数赋值
set: function (newValue) {
one.value = newValue;
tow.value = newValue;
}
}
})
//input标签设置键盘弹起事件
one.onkeyup = function(){
//赋值，实现数据双向开始。
obj.onediv = one.value;
}
//input标签设置键盘弹起事件
tow.onkeyup = function(){
//赋值，实现数据双向开始。
obj.towdiv = tow.value;
}
</script>运行结果
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。