二、对象的拓展
2.1 特性
对象是什么，我们用属性来描述
属性是什么， 我们用特性来描述
特性是用来描述属性的
2.2 Object.defineProperty
作用: 用于设置单个属性的特性
使用方式：
Object.defineProperty(obj, property, options)
obj: 要设置的对象
property: 设置的属性
options: 描述特性对象
举例：
在没有设置特性之前：
1 // Es5 2 var obj = { 3 color: "red", 4 width: 100 5 } 6 7 //使用for循环 8 for (var i in obj) { 9 console.log(i); 10 } |
结果：
1 |
在设置了特性之后：
1 // Es5 2 var obj = { 3 color: "red", 4 width: 100 5 } 6 7 // 定义特性 8 Object.defineProperty(obj, "color", { 9 // 修改可枚举性 10 enumerable: false 11 }) 12 13 14 //使用for循环 15 for (var i in obj) { 16 console.log(i); 17 } |
结果：
1 |
2.3 特性--配置值
使用方式：
Object.defineProperty(obj, property, {
value：“”
})
举例：
1 // ES5 2 var obj = { 3 color: "red" 4 } 5 6 // 定义特性 7 Object.defineProperty(obj, "color", { 8 // 配置值 9 value: "green" 10 }) 11 12 console.log(obj); |
注：如果一个对象中，存在该属性，此时描述特性对象中的其他属性默认都是true
如果一个对象中，没有属性而是通过定义特性的方式添加的属性，那么描述特性对象中的其他属性默认全部是false
2.4 特性--可修改性
使用方式：
Object.defineProperty(obj, property, {
writable: false // 将可修改性设为false
})
举例：
1 // ES5 2 var obj = { 3 color: "red" 4 } 5 6 // 定义特性 7 Object.defineProperty(obj, "color", { 8 // 不可写入 9 // writable: false 10 writable: true 11 }) 12 13 // 尝试修改obj.color 14 obj.color = "blue"; 15 console.log(obj); |
设置特性之后将不可修改：
13 |
2.5 特性--可枚举性
使用方式：
Object.defineProperty(obj, property, {
enumerable: false // 将可枚举性改为false
})
举例：
16 // ES5 17 var obj = { 18 color: "red", 19 width: 200 20 } 21 22 // 默认情况下可以被枚举的 23 // for (var i in obj) { 24 // console.log(i, obj[i]); 25 // } 26 27 // 定义特性 28 Object.defineProperty(obj, "color", { 29 // 修改可枚举性 30 enumerable: false 31 // enumerable: true 32 }) 33 34 35 // 再次使用for循环 36 for (var i in obj) { 37 console.log(i, obj[i]); 38 } |
2.6 特性--可配置性
使用方式：
Object.defineProperty(obj, property, {
configurable: false // 将可配置性改为false
})
举例：
14 // ES5 15 var obj = { 16 color: "red", 17 width: 200 18 } 19 20 // 定义特性 21 Object.defineProperty(obj, "color", { 22 value: "blue", 23 // 不可写入 24 writable: false, 25 // 不可配置 26 configurable: false 27 }) 28 29 // 再次配置 30 Object.defineProperty(obj, "color", { 31 value: "pink", 32 // 不可写入 33 writable: true, 34 }) 35 36 // 尝试修改obj.color 37 obj.color = "green"; 38 console.log(obj); |
修改可配置性为false之后：
39 |
2.7 特性方法
get用来获取属性值的
没有参数
返回值就是要获取的属性值
作用域是当前对象
千万不要在该方法中获取属性值，否则会递归死循环
通常我们获取该属性的一个备用值
set用来设置值的
参数就是要设置的值
没有返回值
作用域是当前对象
千万不要在该方法中，设置属性值
通常我们设置该属性的一个备用属性
举例：
39 // 定义对象 40 var obj = { 41 color: "red" 42 } 43 44 // 设置特性 45 // 一旦设置了特性方法（set, get），当obj.color; 就会触发get函数， 当obj.color = xx; 就会触发set函数 46 Object.defineProperty(obj, "color", { 47 // 取值器 48 get: function() { 49 console.log(111, this, arguments); 50 // 千万不要在方法中获取该属性 51 // return this.color; 52 // 获取该属性的备用值 53 return this._color; 54 }, 55 // 赋值器 56 set: function(value) { 57 console.log(222, this, arguments); 58 // 千万不要设置该属性值 59 // this.color = value; 60 // 设置该属性的备用值 61 this._color = value; 62 } 63 }) 64 65 obj.color = "blue"; 66 console.log(obj.color); |
2.8 设置多个属性特性
使用方式：
Object.defineProperties(obj, options)
obj: 要设置的对象
options: 特性对象
key: 特性属性
value: 属性特性对象
设置特性属性和方法
举例：
40 // 定义color和num的特性 41 Object.defineProperties(obj, { 42 color: { 43 // 值 44 value: "blue", 45 // 不可写入 46 writable: false, 47 // 不可枚举 48 enumerable: false 49 }, 50 num: { 51 // 取值器 52 get: function() { 53 return this._num; 54 }, 55 set: function(value) { 56 this._num = value; 57 }, 58 // 不可枚举 59 enumerable: false, 60 // 一旦设置了特性方法（set, get）， 将无法再次配置writable, value 61 // 不可写入 62 // writable: false, 63 // 配置值 64 // value: 300 65 } 66 }) |
三、 原型方法
ES5为原型拓展了几个方法
1.1 isPrototypeOf
原型对象的方法
用于判断原型对象是否是参数对象的原型
参数就是实例化对象
在查找的时候，会查找整个原型链
67 // 获取所有div 68 var obj = document.getElementsByTagName("div"); 69 // 定义数组 70 var arr = []; 71 72 // 数组的原型是哪个对象的原型呢？ 73 console.log(Array.prototype.isPrototypeOf(obj)); 74 console.log(Array.prototype.isPrototypeOf(arr)); 75 // 在查找原型的时候，会查找整个原型链 76 console.log(Object.prototype.isPrototypeOf(obj)); 77 console.log(Object.prototype.isPrototypeOf(arr)); |
1.2 getPrototypeOf
是对象的静态方法
用于获取原型对象
在ES5之前，获取原型对象的方式，__proto__来获取原型对象， 以__开头，在ES5中不推荐使用， 所以提供了getPrototypeOf方法
67 // 获取arr的原型对象 68 console.log(arr.__proto__); 69 console.log(Object.getPrototypeOf(arr)); 70 console.log(arr.__proto__ === Object.getPrototypeOf(arr)); |
输出：
78 |
1.3 setPrototypeOf
作用: 设置某一对象的原型对象（可以是一个对象也可以是null）
使用方式：
Object.setPrototypeOf(obj, prototype)
obj: 将被设置原型的对象
prototype: 新的原型对象 （可以是一个对象也可以是null）
71 // 设置arr新的原型对象 72 // 会修改整个原型链 73 // Object.setPrototypeOf(arr, null); 74 Object.setPrototypeOf(arr, {"name": "laowang"}); 75 console.log(Object.getPrototypeOf(arr)); |
四、对象的拓展
4.1 Object.preventExtensions
作用： 用于取消对象的可拓展性
举例：
79 // 定义对象 80 var obj = { 81 a: 1 82 } 83 // 对象默认是可以拓展了 84 obj.b = 2; 85 86 87 // 取消对象的可拓展性 88 Object.preventExtensions(obj); 89 90 // 尝试添加属性 91 obj.c = 3; 92 console.log(obj); 93 // 结果，添加失败， 原因就是取消了对象的可拓展性 |
总结：
当取消了对象的可拓展性， 仍然可以修改属性值， 删除属性
查看对象是否取消可拓展性：
Object.isExtensible(obj) 返回 true | false
76 77 // 查看对象的可拓展性是否被取消 78 console.log(Object.isExtensible(obj)); |
4.2 Object.seal
作用： 用于封闭对象
举例：
1 // 定义对象 2 var obj = { 3 a: 1 4 } 5 6 // 封闭对象 7 Object.seal(obj); 8 9 |
总结：
封闭之后 对象可以被访问， 不能拓展， 不能删除属性， 可以修改属性值
查看对象是否被封闭：
Object.isSelead(obj) 返回 true | false
4.3 Object.freeze
作用： 冻结对象
举例：
1 // 定义对象 2 var obj = { 3 a: 1 4 } 5 6 // 冻结对象 7 Object.freeze(obj); 8 9 // 添加属性 10 obj.b = 2; 11 // 修改属性值 12 obj.a = 111; 13 // 删除属性 14 delete obj.a 15 16 console.log(obj); |
输出：
1 |
总结：
当对象冻结以后： 不能添加属性， 不能修改属性值， 不能删除属性
查看对象是否冻结：
Object.isFrozen(obj) 返回 true | false
4.4 对象创建的新方式
使用方式：
Object.create(prorotype, options)
接受两个参数：
第一个参数是一个对象（可以设置为null）
该对象是Object.create创建出来的原型对象
第二个参数是一个对象（可省略）
该对象是Object.create创建出来的特性对象
举例：
1 // 创建原型对象 2 var prototype = { 3 say: function() { 4 console.log("say"); 5 }, 6 sayHello: function() { 7 console.log("sayHello"); 8 }, 9 sayNihao: function() { 10 console.log("sayNihao"); 11 } 12 } 13 14 // 特性对象 15 var options = { 16 color: { 17 // 值 18 value: "red", 19 // 不可写入 20 writable: false 21 }, 22 num: { 23 // 值 24 value: 200, 25 // 不可枚举 26 enumerable: false 27 } 28 } 29 30 var obj = Object.create(prototype, options); |
输出：
1 |
扫描下方二维码添加微信：haomei0452，领取 前端资料、学费优惠 ！
爱创课堂是一家专门做前端培训的机构，由百度高级工程师，《JavaScript设计模式》作者张容铭老师亲自授课，全程20个项目实战，真正做到学习完即可到企业正常工作！
我们前端课程的五大优势：
1. 名师亲自授课，根据企业需求 实时跟进课程大纲，保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式（一个班20—30人，保证老师可以照顾到每一位同学，学员有充足的时间练习）
3. 签订就业协议，帮助学员制作简历，投递简历，模拟面试，不用担心就业问题，目前学员平均就业薪资12K
4. 免费学习一周，不满意不收取任何费用
5. 与中国石油，中国电信，软通等知名企业合作，进行企业内训，并进行学员就业推荐
