day24 Object的相关属性及方法

Object的相关属性及方法

相关属性

• __proto__：表示对象的原型指向当前构造函数的prototype
• constructor：表示对象的构造函数，在new的时候回自动调用

原型方法

hasOwnProperty()

判断对象是否具备对应的属性(不会读取原型)

Object.prototype.age = 18
let obj = {
	name:'jack'
}
console.log(obj.name)//jack 本身的属性
console.log(obj.age)//18 原型上的属性
console.log(obj.hasOwnProperty('name'))//true
console.log(obj.hasOwnProperty('age'))//false

isPrototypeOf()

判断对象是否存在于原型链上

class Person {
    constructor() {
        this.name = 'tom'
    }
}
class Child extends Person {
    constructor() {
        super()
        this.age = 18
    }
}
let child = new Child()
let person = new Person()
console.log(Person.prototype.isPrototypeOf(child)) //true Person的原型是否在child的原型链上
console.log(Person.isPrototypeOf(Child)) //true

propertyIsEnumerable()

判断属性是否可以被枚举 (是否可以被for in遍历)

class中，constructor构造函数之外的函数不能被枚举

toString

将对象转为字符串

toLocalString

将对象转为本地字符串

valueOf

得到本身的值

静态方法

Object.assign ☆

将传入的对象的内容填入第一个传入的对象内 返回的是第一个对象

let first = { name:"Rose",likes:['apple'] }
let object = Object.assign(first, { name: 'jack' }, { age: 18 }, { sex: '男' })
console.log(object);//{name: 'jack', likes: Array(1), age: 18, sex: '男'}
console.log(object === first)//true
// 完成了对象的浅拷贝
let copyObj = Object.assign({},first)
console.log(copyObj)//{name: 'jack', likes: Array(1), age: 18, sex: '男'}
console.log(copyObj == first)//false
//第二次拷贝地址，copyObj的likes对应的地址 和 first的likes的对应地址是一样的
console.log(copyObj.likes == first.likes)//true

Object.create ☆

创建一个对象，根据传入的内容来创建

let second = {
    name:'jack'
}
// 将对应的传入的对象放入创建的对象的原型上
let newObj = Object.create(second)
console.log(newObj)//{}
console.log(newObj.name)//jack

简易的实现Object.create

function Mycreate(obj){
	//创建一个新的对象
    let newObj = {}
    newObj.__proto__ = obj
    return newObj
}

Object.keys ☆

返回所有key的数组

Object.values ☆

返回所有值的数组

Object.entries ☆

返回键值对的数组

示例

let obj = {
name: 'hello',
age: 17
}
// 返回的都是数组
console.log(Object.keys(obj))//['name', 'age']
console.log(Object.values(obj))//['hello', 17]
console.log(Object.entries(obj))//[Array(2), Array(2)]

class Person {
constructor() {
}
eat() { }
}
Person.prototype.age = 18
// Object.keys不包含不可枚举属性 也 不包含原型上的属性
let person = new Person()
console.log(Object.keys(person));//[]

// for in 不包含不可枚举属性，但是包含原型上的属性
for (value in person) {
console.log(value);
}//age

Object.is

判断两个对象是否一致

let first = {}
let last = {}
console.log(Object.is(first,last))//false

Object.getPrototypeOf

获取原型

Object.setPrototypeOf

设置原型

function Person(){}
Person.prototype.age = 19
let person = new Person()
console.log(Object.getPrototypeOf(person))//{age: 19, constructor: ƒ}

let obj = {name:'jack'}
Object.setPrototypeOf(person,obj)
console.log(obj.isPrototypeOf(person));//true
console.log(person);//Person {}[[Prototype]]: Objectname: "jack"[[Prototype]]: Object

修改对象的属性的权限的相关方法 ☆

Object.preventExtensions()

不可扩展 不能进行内容添加

Object.seal()

密封 只能查询和修改 其他操作不允许

Object.freeze()

冻结 只能查询

冻结必定密封和不可扩展 密封必定不可扩展

console.log('____________禁止扩展_____________')
let obj = { name: 'jack' }
// 禁止对象的扩展(可以删改查，不可增)
console.log(Object.preventExtensions(obj));//{name:'jack'}
// 检测对象是否可以扩展
console.log(Object.isExtensible(obj));//false
obj.age = 18//添加：无效
obj.name = 'tom'//改：有效
console.log('name' in obj);//查询：有效
delete obj.name//删除：有效
console.log(obj)//{}

console.log('____________密封_____________')
let obj1 = { name: 'jerry' }
// 使用对象密封(只能改查，不可增删)
Object.seal(obj1)
// 密封必定导致对象不可扩展
console.log(Object.isSealed(obj1));//true
console.log(Object.isExtensible(obj1));//false
obj1.age = 18//添加：无效
obj1.name = 'tom'//改：有效
console.log('name' in obj1);//查询：有效
delete obj1.name//删除：无效
console.log(obj1)//{name: 'tom'}

console.log('____________冻结_____________')
let obj2 = { name: 'peter' }
// 使用对象冻结(只能查，不可增删改)
Object.freeze(obj2)
// 冻结必定导致对象密封
console.log(Object.isFrozen(obj2));//true
console.log(Object.isSealed(obj2));//true
console.log(Object.isExtensible(obj2));//false
obj2.age = 18//添加：无效
obj2.name = 'tom'//改：无效
console.log('name' in obj2);//查询：有效
delete obj2.name//删除：无效
console.log(obj2)//{name: 'peter'}

获取属性的相关方法

Object.getOwnPropertyNames

获取所有属性名 不会获取原型上的属性 不会获取symbol为key的属性

Object.getOwnPropertySymbols

获取所有symbol修饰的属性，不会获取原型上的

Object.getOwnPropertyDescriptor

获取某个属性的详情对象

Object.getOwnPropertyDescriptors

获取所有的属性的详情对象

function Person(){ this.name = 'jack' }
let person = new Person()
Person.prototype.age = 18
Person.prototype[Symbol('原型上的')] = 18
person[Symbol('对象上的')] = 'hello'
person.sex = '男'
// 获取所有属性名 不会获取原型上的属性 不会获取symbol为key的属性
console.log(Object.getOwnPropertyNames(person));//['name', 'sex']
// 获取所有symbol修饰的属性，不会获取原型上的
console.log(Object.getOwnPropertySymbols(person));//[Symbol(对象上的)]
// 获取某个属性的详情对象（返回的是对象）（不包含原型上的属性，但是包含symbol上修饰的属性）
console.log(Object.getOwnPropertyDescriptor(person,'name'));//{value: 'jack', writable: true, enumerable: true, configurable: true}
// 获取所有的属性的详情对象（返回的是对象）（不包含原型上的属性，但是包含symbol上修饰的属性）
console.log(Object.getOwnPropertyDescriptors(person));//{name: {…}, sex: {…}, Symbol(对象上的): {…}}

属性对象 ☆

属性属性

configurable 是否可以删除
enumerable 是否可以枚举
vlaue 值
writable 是否可修改

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tVGuWPms-1678966224927)(…/…/images/image-20230310165729950.png)]

访问属性

configurable 是否可以删除
enumerable 是否可以枚举
get getter 访问时调用
set setter 设置时调用

---

Object.defineProperty ☆

用于定义对象的属性（vue2的双向数据绑定的底层实现原理）

let obj = {}
//传对象 传属性 传属性对象
Object.defineProperty(obj, 'name', {
    configurable: false,
    enumerable: false,
    value: 'tom',
    writable: false
})
obj.name = 'rose'//不可写 writable:false
for (var key in obj) {console.log(key)}//name不打印，不可枚举 enumerable:false,
delete obj.name //不可删除 configurable: false
console.log(obj)//{name:tom}

let _obj={}
Object.defineProperty(obj, 'age', {
    configurable: true,
    enumerable: true,
    get(){
        console.log('访问了getter');
        return _obj.age
    },
    set(value){
        console.log('访问了setter');
        _obj.age = value
    }
})
obj.age = 18
console.log(obj)//访问了setter

Object.defineProperties ☆

用于定义对象的多个属性

let obj = {}
let _obj = {}
//传入对象 及对应的属性详情对象
Object.defineProperties(obj,{
    name:{
        configurable: true,
        enumerable: true,
        value:'tom',
        writable:true
	},
    age:{
        configurable: true,
        enumerable: true,
        get(){
            return _obj.age
        },
        set(value){
            _obj.age = value
        }
    }
})
obj.age = 18
consle.log(obj)

面试题

查看属性对象的相关方法

• for in 遍历自身以及原型上可枚举的属性，不可以遍历symbol修饰的
• Object.keys 只能遍历自身可枚举的属性，不可遍历原型上以及symbol修饰的
• Object.getOwnPropertyNames 可以遍历不可枚举的，但是不可以遍历原型上的及symbol修饰的