二、对象的拓展
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. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐