1 Object.defineProperty
2 数据属性描述符
3 存取属性描述符
4 Object.defineProperties
5 对象的其他方法补充
对象增强-数据属性描述符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var obj = { name: "why", age: 18 } // 默认情况下属性都是没有特别的限制 // obj.name = "" // delete obj.name // console.log(obj.name) // 可以对对象中的属性进行某些限制 var obj = { name: "why", // configurable: true age: 18 } Object.defineProperty(obj, "name", { configurable: false, // 告诉js引擎, obj对象的name属性不可以被删除 enumerable: false, // 告诉js引擎, obj对象的name属性不可枚举(for in/Object.keys) writable: false, // 告诉js引擎, obj对象的name属性不写入(只读属性 readonly) value: "coderwhy" // 告诉js引擎, 返回这个value }) delete obj.name console.log(obj) // 通过Object.defineProperty添加一个新的属性,从这里创建的参数是不能被配置、修改的 Object.defineProperty(obj, "address", {}) delete obj.address console.log(obj) console.log(Object.keys(obj)) obj.name = "kobe" console.log(obj.name) </script> </body> </html>
对象增强-存取属性描述符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // vue2响应式原理 var obj = { name: "why" } // 对obj对象中的name添加描述符(存取属性描述符) var _name = "" Object.defineProperty(obj, "name", { configurable: true, enumerable: false, set: function(value) { console.log("set方法被调用了", value) _name = value }, get: function() { console.log("get方法被调用了") return _name } }) obj.name = "kobe" obj.name = "jame" obj.name = "curry" obj.name = "coderwhy" // 获取值 console.log(obj.name) </script> </body> </html>
对象增强-多个属性描述符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var obj = { name: "why", age: 18, height: 1.88 } // Object.defineProperty(obj, "name", {}) // Object.defineProperty(obj, "age", {}) // Object.defineProperty(obj, "height", {}) // 新增的方法 Object.defineProperties(obj, { name: { configurable: true, enumerable: true, writable: false }, age: { }, height: { } }) </script> </body> </html>
对象增强-额外方法的补充
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var obj = { name: "why", age: 18 } // 1.获取属性描述符 console.log(Object.getOwnPropertyDescriptor(obj, "name")) console.log(Object.getOwnPropertyDescriptors(obj)) // 2.阻止对象的扩展 Object.preventExtensions(obj) obj.address = "广州市" console.log(obj) // 3.密封对象(不能进行配置) Object.seal(obj) delete obj.name console.log(obj) // 4.冻结对象(不能进行写入) Object.freeze(obj) obj.name = "kobe" console.log(obj) </script> </body> </html>