ES6参考---es5-Object扩展
一、总结
一句话总结:
1、Object.create(prototype, [descriptors]):以指定对象为原型创建新的对象,并且为新的对象指定新的属性, 并对属性进行描述
2、Object.defineProperties(object, descriptors):为指定对象定义扩展多个属性
1. Object.create(prototype, [descriptors])
* 作用: 以指定对象为原型创建新的对象
* 为新的对象指定新的属性, 并对属性进行描述
value : 指定值
writable : 标识当前属性值是否是可修改的, 默认为false
configurable: 标识当前属性是否可以被删除 默认为false
enumerable: 标识当前属性是否能用for in 枚举 默认为false
2. Object.defineProperties(object, descriptors)
* 作用: 为指定对象定义扩展多个属性
* get :用来获取当前属性值得回调函数
* set :修改当前属性值得触发的回调函数,并且实参即为修改后的值
* 存取器属性:setter,getter一个用来存值,一个用来取值
1、Object.create(prototype, [descriptors]) 作用?
a、prototype: 以指定对象为原型创建新的对象
b、[descriptors]:为新的对象指定新的属性, 并对属性进行描述
var obj = {name : 'curry', age : 29} var obj1 = {}; obj1 = Object.create(obj, { sex : { value : '男', writable : true } }); obj1.sex = '女'; console.log(obj1.sex);
2、Object.create(prototype, [descriptors]):以指定对象为原型创建新的对象 实例?
Object.create(obj, {sex:{}}):obj做原型,{sex:{}}是添加新属性
var obj = {name : 'curry', age : 29} var obj1 = {}; obj1 = Object.create(obj, { sex : { value : '男', writable : true } }); obj1.sex = '女'; console.log(obj1.sex);
3、Object.create(prototype, [descriptors]):为新的对象指定新的属性, 并对属性进行描述 中有哪些描述属性?
a、value : 指定值
b、writable : 标识当前属性值是否是可修改的, 默认为false
c、configurable: 标识当前属性是否可以被删除 默认为false
d、enumerable: 标识当前属性是否能用for in 枚举 默认为false
var obj = {name : 'curry', age : 29} var obj1 = {}; obj1 = Object.create(obj, { sex : { value : '男', writable : true } }); obj1.sex = '女'; console.log(obj1.sex);
4、Object.defineProperties(object, descriptors) 的作用?
为指定对象定义扩展多个属性,扩展的属性里面可以有get和set方法
var obj2 = { firstName : 'curry', lastName : 'stephen' }; Object.defineProperties(obj2, { fullName : { get : function () { return this.firstName + '-' + this.lastName }, set : function (data) { var names = data.split('-'); this.firstName = names[0]; this.lastName = names[1]; } } }); console.log(obj2.fullName); obj2.firstName = 'tim'; obj2.lastName = 'duncan'; console.log(obj2.fullName); obj2.fullName = 'kobe-bryant'; console.log(obj2.fullName);
5、Object.defineProperties(object, descriptors):为指定对象定义扩展多个属性 中的每个属性的get和set方法的作用是什么?
1、get:用来获取当前属性值得回调函数
2、set:修改当前属性值得触发的回调函数,并且实参即为修改后的值
var obj2 = { firstName : 'curry', lastName : 'stephen' }; Object.defineProperties(obj2, { fullName : { get : function () { return this.firstName + '-' + this.lastName }, set : function (data) { var names = data.split('-'); this.firstName = names[0]; this.lastName = names[1]; } } }); console.log(obj2.fullName); obj2.firstName = 'tim'; obj2.lastName = 'duncan'; console.log(obj2.fullName); obj2.fullName = 'kobe-bryant'; console.log(obj2.fullName);
二、es5-Object扩展
博客对应课程的视频位置:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>03_Object扩展</title> 6 </head> 7 <body> 8 <!-- 9 ES5给Object扩展了好一些静态方法, 常用的2个: 10 1. Object.create(prototype, [descriptors]) 11 * 作用: 以指定对象为原型创建新的对象 12 * 为新的对象指定新的属性, 并对属性进行描述 13 value : 指定值 14 writable : 标识当前属性值是否是可修改的, 默认为false 15 configurable: 标识当前属性是否可以被删除 默认为false 16 enumerable: 标识当前属性是否能用for in 枚举 默认为false 17 18 2. Object.defineProperties(object, descriptors) 19 * 作用: 为指定对象定义扩展多个属性 20 * get :用来获取当前属性值得回调函数 21 * set :修改当前属性值得触发的回调函数,并且实参即为修改后的值 22 * 存取器属性:setter,getter一个用来存值,一个用来取值 23 --> 24 <script type="text/javascript"> 25 var obj = {name : 'curry', age : 29} 26 var obj1 = {}; 27 obj1 = Object.create(obj, { 28 sex : { 29 value : '男', 30 writable : true 31 } 32 }); 33 obj1.sex = '女'; 34 console.log(obj1.sex); 35 36 //Object.defineProperties(object, descriptors) 37 var obj2 = { 38 firstName : 'curry', 39 lastName : 'stephen' 40 }; 41 Object.defineProperties(obj2, { 42 fullName : { 43 get : function () { 44 return this.firstName + '-' + this.lastName 45 }, 46 set : function (data) { 47 var names = data.split('-'); 48 this.firstName = names[0]; 49 this.lastName = names[1]; 50 } 51 } 52 }); 53 console.log(obj2.fullName); 54 obj2.firstName = 'tim'; 55 obj2.lastName = 'duncan'; 56 console.log(obj2.fullName); 57 obj2.fullName = 'kobe-bryant'; 58 console.log(obj2.fullName); 59 </script> 60 </body> 61 </html>