详解"/>
Object 详解
Object 详解
- Object 详解
- 1. Object 介绍
- 1.1 作用
- 1.2 Object 的组成
- 1.3 如何访问对象
- 1.4 判断
- 2. Object 创建
- 2.1 Object构造函数模式
- 2.2 对象字面量模式
- 2.3 工厂函数模式
- 2.4 自定义构造函数模式
- 2.5 构造函数据+原型的组合模式
- 3. Object 属性
- 3.1 Object.defineProperty()
- 3.1.1 作用
- 3.1.2 数据描述符（数据属性）
- 3.1.2 存取描述符（访问器属性）
- 3.1.3 相关方法
- 3.2 Object.defineProperties()
- 3.2.1 作用
- 3.2.2 用法
- 3.3 Object.getOwnPropertyDescriptor()
- 3.3.1 作用
- 3.3.2 用法
- 3.4 Object.getOwnPropertyDescriptors()
- 3.4.1 作用
- 3.4.2 用法
- 3.5 Object.getOwnPropertySymbols()
- 3.5.1 作用
- 3.5.2 用法
- 4. Object 的静态方法
- 4.1 Object.keys()
- 4.1.1 作用
- 4.1.2 用法
- 4.2 Object.values()
- 4.2.1 作用
- 4.2.2 用法
- 4.3 Object.entries()
- 4.3.1 作用
- 4.3.2 用法
- 4.4 Object.getOwnPropertyNames()
- 4.4.1 作用
- 4.4.2 用法
- 4.5 Object.assign()
- 4.5.1 作用
- 4.5.2 用法
- 4.6 Object.create()
- 4.6.1 作用
- 4.6.2 用法
- 4.7 Object.is()
- 4.7.1 作用
- 4.7.2 用法
- 4.8 Object.getPrototypeOf()
- 4.8.1 作用
- 4.8.2 用法
- 4.7 Object.setPrototypeOf()
- 4.9.1 作用
- 4.9.2 用法
- 5. Object 的实例方法和属性
- 5.1 hasOwnProperty()
- 5.1.1 作用
- 5.1.2 用法
- 5.2 isPrototypeOf()
- 5.2.1 作用
- 5.2.2 用法
- 5.3 propertyIsEnumerable()
- 5.3.1 作用
- 5.3.2 用法
- 5.4 toString()
- 5.4.1 作用
- 5.4.2 用法
- 5.5 valueOf()
- 5.5.1 作用
- 5.5.2 用法
- 5.6 constructor
- 5.6.1 作用
- 5.6.2 用法
- 6. 相关语法
- 6.1 in
- 6.1.1 作用
- 6.1.2 用法
- 6.2 for...in
- 6.2.1 作用
- 6.2.2 用法
Object 详解
1. Object 介绍
1.1 作用
通俗来讲Object就是用来存储数据的一种容器，利用对象可以统一管理多个数据。
1.2 Object 的组成
- 属性：属性名（字符串）和属性值（任意类型）
- 方法：一种特殊的属性（属性值是函数）
1.3 如何访问对象
- .属性名：编码简单，特殊情况下不能使用
- 属性名包含特殊字符（- 空格）时不可使用
- 变量名不确定时
- [‘属性名’]：编码复杂，但是通用
1.4 判断
可以利用 instanceof 来判断对象的具体类型
var obj = {};
console.log(obj instanceof Object); // truevar arr= [];
console.log(arr instanceof Array); // true
code 1-1：instanceof 应用案列
2. Object 创建
2.1 Object构造函数模式
- 适用场景：不确定对象内部数据
- 缺点：语句太多
var p = new Object()p.name = '十一'p.age = 24p.getName = function(){console.log(this.name)}
code 2-1：Object 创建之Object 构造函数模式
2.2 对象字面量模式
- 适用场景：确定对象内部数据
- 缺点：若是创建多个，会有重复代码
var p = {name: '十一',age: 24,getName: function(){console.log(this.name)}}var p2 = {name: 'Tom',age: 12,getName: function(){console.log(this.name)}}
code 2-2：Object 创建之对象字面量模式
2.3 工厂函数模式
- 工厂函数：返回一个对象的函数就是工厂函数
- 适用场景：需要创建多个对象时
- 缺点：所创建的对象没有具体的类型，都是Object类型
function createPerson(name, age){var obj = {name: name,age: age,getName: function(){console.log(this.name)}}return obj}var p1 = createPerson('十一',24)p1.getName();var p2 = createPerson('Tom',24)p2.getName();
code 2-3：Object 创建之工厂函数模式
2.4 自定义构造函数模式
- 适用场景：需要创建多个具有确定类型的对象
- 缺点：每个对象都有相同的方法数据，浪费内存
function Person(name, age){this.name = namethis.age = agethis.getName = function(){console.log(this.name)}}var p1 = new Person('十一',24)p1.getName();
code 2-4：Object 创建之自定义构造函数模式
2.5 构造函数据+原型的组合模式
- 使用方式：就是将公共的方法添加到构造函数的原型链__proto__上
- 适用场景：需要创建多个具有确定类型的对象
function Person(name, age){this.name = namethis.age = age}Person.prototype.getName = function(){console.log(this.name)}var p1 = new Person('十一',24)p1.getName();
code 2-5：Object 创建之构造函数据+原型的组合模式
3. Object 属性
3.1 Object.defineProperty()
3.1.1 作用
在一个对象上定义新的属性或者修改现有的属性，并返回该对象
3.1.2 数据描述符（数据属性）
- value：该属性对应的值
- writable：属性值是否可修改。默认不可修改，true表示可修改
- configurable：属性是否可修改。默认不可修改，true表示可修改
- enumerable：属性是否可枚举（for…in 循环）。默认不可以，true表示可以
var obj = { name: '十一' } // 给 obj 添加一个新的属性为age，值为24，且可以修改属性和属性值，也可以进行遍历操作 Object.defineProperty(obj, 'age', {value: 24,write: true,configurable: true,enumerable: true }) console.log(obj) // {name: "十一", age: 24}
code 3-1：Object.defineProperty() 之数据描述符
3.1.2 存取描述符（访问器属性）
- get:给属性提供getter的方法
- set：给属性提供setter的方法
- configurable：属性是否可修改
- enumerable：属性是否可枚举（循环）
var obj = { name: '十一' } // 动态修改h1标签内容 var h1Html = document.getElementById("H1"); Object.defineProperty(obj, 'h1Html', {get: function(){return h1Html.innerHTML;},set: function(val){h1Html.innerHTML = val;},configurable: true,enumerable: true }) console.log(obj) // {name: "十一", h1Html: 获取到的h1标签的内容}
code 3-2：Object.defineProperty() 之存取描述符
3.1.3 相关方法
- Object.seal()：禁止对象配置，描述符中的configurable设置为false
- Object.isSealed()：判断对象是否被禁止对象配置操作 false:可以配置 true：禁止配置
var obj = {} var obj1 = {} Object.seal(obj) // 添加 Object.seal(obj) 再执行以下注释代码会报错：大概意思就是obj对象不支持扩展 // Object.defineProperty(obj, 'age', { // value: 24, // write: true, // configurable: true, // enumerable: true // }) Object.defineProperty(obj1, 'age', {value: 24,write: true,configurable: true,enumerable: true }) console.log(obj1) // { age: 24 } console.log(Object.isSealed(obj)) // true console.log(Object.isSealed(obj1)) // false
code 3-3：Object.defineProperty() 之对象配置
- Object.freeze()：冻结对象，描述符中的writable设置为false，configurable设置为false
- Object.isFrozen()：判断对象是否被冻结 false:未冻结 true：冻结
var obj = {} var obj1 = {} Object.freeze(obj) // 添加 Object.freeze(obj) 再执行以下注释代码会报错：大概意思就是obj对象不支持扩展 // Object.defineProperty(obj, 'age', { // value: 24, // write: true, // configurable: true, // enumerable: true // }) Object.defineProperty(obj1, 'age', {value: 24,write: true,configurable: true,enumerable: true }) console.log(obj1) // { age: 24 } console.log(Object.isFrozen(obj)) // true console.log(Object.isFrozen(obj1)) // false
code 3-4：Object.defineProperty() 之对象冻结
- Object.preventExtensions()：禁止对象扩展，不能添加新属性但是可以删除已有属性
- Object.isExtensible()：判断对象是否可以扩展 false:禁止扩展 true：可以扩展
var obj = { name: '十一' } var obj1 = { name: '十一' } Object.preventExtensions(obj) // 添加 Object.freeze(obj) 再执行以下注释代码会报错：大概意思就是obj对象不支持扩展 // Object.defineProperty(obj, 'age', { // value: 24, // write: true, // configurable: true, // enumerable: true // }) delete obj.name Object.defineProperty(obj1, 'age', {value: 24,write: true,configurable: true,enumerable: true }) console.log(obj) console.log(obj1) // { name: "十一", age: 24 } console.log(Object.isExtensible(obj)) // false console.log(Object.isExtensible(obj1)) // true
code 3-5：Object.defineProperty() 之对象扩展
3.2 Object.defineProperties()
3.2.1 作用
在一个对象上定义多个新的属性汇总修改现有属性，并返回该对象
3.2.2 用法
其实就是defineProperty的集合版
var obj = { name: '十一' }
var h1Html = document.getElementById("H1");
Object.defineProperties(obj, {age: {value: 24,writable: true,configurable: true,enumerable: true},h1Html: {get: function(){return h1Html.innerHTML;},set: function(val){h1Html.innerHTML = val;},configurable: true,enumerable: true}
})
console.log(obj); // { name:'十一', age:24, h1Html: h1标签的内容}
code 3-6：Object.defineProperties() 用法
3.3 Object.getOwnPropertyDescriptor()
3.3.1 作用
获取一个对象上自身属性（获取不到原型链上的属性）的描述符，不存在则返回undefined
3.3.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试console.log(Object.getOwnPropertyDescriptor(obj,'age'))
// {value: 24, writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(obj,'age1')) // undefined
code 3-7：Object.getOwnPropertyDescriptor() 用法
3.4 Object.getOwnPropertyDescriptors()
3.4.1 作用
获取一个对象上所有自身属性（获取不到原型链上的属性）的描述符
3.4.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试console.log(Object.getOwnPropertyDescriptor(obj))
// {
// age: {value: 24, writable: true, enumerable: true, configurable: true},
// h1Html: {get: ƒ, set: ƒ, enumerable: true, configurable: true},
// name: {value: "十一", writable: true, enumerable: true, configurable: true}
// }
code 3-8：Object.getOwnPropertyDescriptors() 用法
3.5 Object.getOwnPropertySymbols()
3.5.1 作用
返回一个数组，该数组包含了指定对象自身所有symbol属性键。
3.5.2 用法
var classRoom = {[Symbol('lily')]: { grade: 60, sex: 'Woman' },[Symbol('nina')]: { grade: 67, sex: 'Woman' },[Symbol('nina')]: { grade: 80, sex: 'man' },}console.log(classRoom);// { // Symbol(lily): {grade: 60, sex: "Woman"},// Symbol(nina): {grade: 67, sex: "Woman"},// Symbol(nina): {grade: 80, sex: "man"}// }var races = Object.getOwnPropertySymbols(classRoom);console.log(races); // [Symbol(lily), Symbol(nina), Symbol(nina)]
code 3-9：Object.getOwnPropertySymbols() 用法
4. Object 的静态方法
4.1 Object.keys()
4.1.1 作用
返回自身属性的一个数组，不包括原型链上的属性。
4.1.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试console.log(Object.keys(obj)); // ["name", "age", "h1Html"]
code 4-1：Object.keys() 用法
4.2 Object.values()
4.2.1 作用
返回自身属性值的一个数组，不包括原型链上的属性值。
4.2.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试console.log(Object.values(obj)); // ["十一", 24, h1标签的内容]
code 4-2：Object.values() 用法
4.3 Object.entries()
4.3.1 作用
返回带有属性和值的复合数组，不包括原型链上的。
4.3.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试console.log(Object.entries(obj));
// [
// ["name", "十一"],
// ["age", 24],
// ["h1Html", h1标签的内容]
// ]
code 4-3：Object.entries() 用法
4.4 Object.getOwnPropertyNames()
4.4.1 作用
和Object.keys一样，区别是可以得到不能进行枚举的属性。
4.4.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试
Object.defineProperty(obj, 'sex', {value: '男',writable: true,configurable: true,enumerable: false
})
console.log(Object.getOwnPropertyNames(obj)); // ["name", "age", "h1Html", "sex"]
code 4-4：Object.getOwnPropertyNames() 用法
4.5 Object.assign()
4.5.1 作用
拷贝对象，只是浅拷贝不是深拷贝，且原型链上的属性不能拷贝、不能枚举的属性也不能拷贝。
4.5.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试var newObj = {}
Object.assign(newObj,obj)
console.log(newObj); // {name: "十一", age: 24, h1Html: h1标签的内容}
code 4-5：Object.assign() 用法
4.6 Object.create()
4.6.1 作用
以参数作为原型对象，返回创建的实例对象（与原型链继承类似）。
4.6.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试var newObj = Object.create(obj)
console.log(newObj,obj); // 原型链的方式进行继承
// {
// name: h1标签的内容,
// __proto__: {
// age: 24,
// h1Html: h1标签的内容,
// name: "十一"
// }
// }
code 4-6：Object.create() 用法
4.7 Object.is()
4.7.1 作用
确定两个值是否相同，就可以解决+0、-0，NaN比较的方式。
4.7.2 用法
console.log(+0 === -0); // true
console.log(Object.is(+0,-0)); // false
console.log(Object.is(NaN,NaN)); // true
code 4-7：Object.is() 用法
4.8 Object.getPrototypeOf()
4.8.1 作用
获取对象的原型对象。
4.8.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试console.log(Object.getPrototypeOf(obj)); // ==>Object.prototype
code 4-8：Object.getPrototypeOf() 用法
4.7 Object.setPrototypeOf()
4.9.1 作用
设置对象的原型对象。
4.9.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试Object.setPrototypeOf(obj, Array.prototype)
console.log(Object.getPrototypeOf(obj) === Array.prototype); // true
code 4-9：Object.setPrototypeOf() 用法
5. Object 的实例方法和属性
5.1 hasOwnProperty()
5.1.1 作用
判断每个属性是否为当前对象自身下的属性，还是来自原型对象下的属性
5.1.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试console.log(obj.hasOwnProperty('name')); // trueconsole.log(obj.hasOwnProperty('name1')); // false
code 5-1：Object 的实例方法 hasOwnProperty() 用法
5.2 isPrototypeOf()
5.2.1 作用
跟instanceof运算符用法类似，用来判断当前对象是否在指定的原型对象上
5.2.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试console.log(Object.prototype.isPrototypeOf(obj)); // trueconsole.log(Array.prototype.isPrototypeOf(obj)); // false
code 5-2：Object 的实例方法 isPrototypeOf() 用法
5.3 propertyIsEnumerable()
5.3.1 作用
hasOwnProperty()的加强版，除了具备hasOwnProperty()的功能外，还对能for…in枚举的属性返回true
5.3.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试Object.defineProperty(obj, 'sex', {value: '男',writable: true,configurable: true,enumerable: false})console.log(obj.hasOwnProperty('sex')); // trueconsole.log(obj.propertyIsEnumerable('sex')); // false
code 5-3 Object 的实例方法：propertyIsEnumerable() 用法
5.4 toString()
5.4.1 作用
返回当前对象对应的字符串形式
5.4.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试console.log(obj.toString()); // '[object Object]'
code 5-4：Object 的实例方法 toString() 用法
5.5 valueOf()
5.5.1 作用
返回当前对象对应的值
5.5.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试console.log(1 + obj); // '1[object Object]'
重写Object的valueOf方法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试// 重写Object的valueOf方法Object.prototype.valueOf = function(){return 2}console.log(1 + obj); // 3
code 5-5：Object 的实例方法 valueOf() 用法
注：对象参与计算时，先调用valueOf(),若返回值为对象则继续调用toString()方法
5.6 constructor
5.6.1 作用
constructor 属性返回对创建此对象的数组函数的引用。
5.6.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试console.log(obj.constructor); // ƒ Object() { [native code] }console.log(obj.constructor === Object); // true
code 5-6：Object 属性 constructor 的用法
6. 相关语法
6.1 in
6.1.1 作用
通过 in 语法来判断属性是否是该对象的属性。语法：‘属性’ in obj （查看属性是否是obj的属性）
6.1.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试console.log('name' in obj); // trueconsole.log('name1' in obj); // fasle
code 6-1：Object 相关语法 in
6.2 for…in
6.2.1 作用
遍历对象的属性（方法是一种特殊的属性），属性不能枚举（enumerable为false）的不可遍历
6.2.2 用法
// 借助“code 3-6：Object.defineProperties() 用法”代码测试Object.defineProperty(obj, 'sex', {value: '男',writable: true,configurable: true,enumerable: false})for(var key in obj){console.log(key); // name, age, h1Htmlconsole.log(obj[key]); // '十一', 24, h1标签的内容}
code 6-2：Object 相关语法 for...in
更多推荐
Object 详解
发布评论