js的第25天(Object方法讲解)

概述:


Object这个类是所有的父类,也就是说它的方法和属性所有的对象都可以。Object的相关方法和属性是提供给其他的对象进行使用的。

相关方法和属性

原型方法及属性(实例方法和属性)

hasOwnProperty(判断当前对象是否具备这个属性 不会读取原型)

let obj = {name:'jack'}

function Person(name,age){

this.name = name

this.age = age

}

Person.prototype.sex = '男'

let person = new Person('tom',18)

person.address = '湖南长沙'

//hasOwnProperty 判断当前对象是否具备属性的 返回的值为布尔类型 传入对应需要判断的属性名

console.log( obj.hasOwnProperty('name'));//true

console.log( person.hasOwnProperty('age'));//true

//hasOwnProperty不会读取原型的属性

console.log( person.hasOwnProperty('sex'));//false

console.log(person.hasOwnProperty('address'));//true

isPrototypeOf(判断当前对象是否处在传入对象的原型链上)

//isPrototypeOf是否对象存在于原型链上

//组合继承

function Son(){

    Person.call(this)

}

let person1 = new Person('tom',18)

Son.prototype = person1

//组合继承

function Child(){

    Son.call(this)

}

let son = new Son()

Child.prototype = son

let child = new Child()

//person1是否处在对应son的原型(__proto__)上

//进行判断当前对象是否处在传入对应对象的__proto__(原型链)上

console.log(person1.isPrototypeOf(son));//true

console.log(son.isPrototypeOf(child))//true

console.log(person1.isPrototypeOf(child))//true

__defineGetter__定义获取的方法(废弃)

__defineSetter__定义设置的方法(废弃)

__lookupGetter__返回定义的获取方法(废弃)

__lookupSetter__返回定义的设置方法(废弃)

//getter和setter的设置和查看 (实际操作的对象和访问的对象不能是一个)

//get方法里面要返回数据(返回的数据就是显示的数据) set里面要进行相关设置

let obj1 = {name:'tom',age:18}

//存储对应的obj1的值

let model = {name:'tom',age:18}

//属性 相关处理方法

obj1.__defineGetter__('name',function(){

console.log('get触发了');

return model.name

})

obj1.__defineSetter__('name',function(v){

console.log('set触发了');

// console.log(arguments);

model.name = v

})

console.log(obj1.name);

obj1.name = '你好'

console.log(obj1.name);

//查看get和set

console.log(obj1.__lookupGetter__('name'));

console.log(obj1.__lookupSetter__('name'));

propertylsEnumerable判断当前属性是否可枚举

//propertyIsEnumerable 传入一个属性 判断这个属性的Enumerable属性的结果是什么

//Enumerable 可枚举 可以进行遍历

console.log(obj.propertyIsEnumerable('name'));

toLocaleString 根据本地格式转为字符串

toString 转为字符串

Object.prototype.toString.call(需要查找的变量,(v)=>{这个v里面就有对应的类型})

valueOf 提取对应的value值

//转字符串

console.log(obj.toLocaleString()); //本地格式

console.log(obj.toString());

//valueOf 返回对应的值

console.log(obj.valueOf());

原型属性

contructor 指向当前对象的构造函数

__proto__ 对象隐式原型

静态方法(Object.方法调用的)

Object.is 判断俩个对象是否是一个对象

Object.is(NaN,NaN)//true

assign将后面的对象拷贝到第一个对象中(浅拷贝)

let obj = {arr:[1,2,3]}

//将后面对象的内容拷贝到前面这个对象里面返回前面这个对象

let obj1 = Object.assign(obj,{name:'jack'},{age:18})

console.log(obj);

console.log(obj1 == obj);//true

//对应的浅拷贝完成 (浅拷贝只拷贝第一层的值 第二层拷贝的都是地址)

let copyObj = Object.assign({},obj)

console.log(copyObj);

console.log(copyObj == obj);//false

copyObj.arr.push(4)

console.log(obj.arr);

create根据传入的内容创建相关的对象

//create方法

function Person(name){

    this.name = name

}

let person = new Person('tom')

//根据传入对象创建相关的对象 但是这个对象跟传入的对象不是一个对象

//它会将创建对象的原型指向传入对象

let createObj = Object.create(person)

console.log(createObj)

console.log(person == createObj)

console.log(person.isPretotypeOf(createObj))

手写实现Object.create

//手写实现create

function myCreate(0){

    //创建对象

let newObj = new Objct()

//将传入o加到这个对象的原型上

newObj.__proto__ = o

return newObj

}

let myCreateObj = myCreate(person)

console.log(myCreateObj)

keys 将它的可枚举的key全部加入到一个迭代器返回

values 将它的value全部加入到一个迭代器返回

entries 将它的键值队全部加入到一个迭代器返回

//for in 遍历对象 for of 遍历对象的迭代器(必须实现迭代器)

//keys    calues    entries

let obj2 = {name:"jack",age:18,sex:'男'}

console.log(Object.keys(obj2))

console.log(Object.values(obj2))

console.log(Object.entries(obj2))

getPrototypeOf 获取原型

setPrototypeOf 设置原型

//setPrototypeOf 设置原型

function Child(name){

    this.name = name

}

let child = new Child('tom')

let proto = {address:'北京',city:'你好'}

Object.setPrototypejOf(child,proto)

console.log(child)

//getPrototypeOf 获取原型

let protoObj = Object.getPrototypeOf(child)

console.log(protoObj)

freeze 冻结(只能查询) isFrozen 是否冻结

seal 密封 (只能查询和修改 不能删除和添加新的属性)isSealed 是否密封

preventExtensions 不可扩展 (不能添加新的属性) isExtensible 是否可扩


let obj = {

name:

'

jack',

age:18,

sex:

'

'

}

//冻结(只能查询 其他所有操作不能做) 密封(能查询和修改 不能删除和添加) 不可扩展(不能添加新的

属性)

Object.freeze(obj) //冻结当前的obj对象

// Object.seal(obj)

// Object.preventExtensions(obj)

console.log(obj.name);//查

obj.age = 20 //改

delete obj.sex //删

obj.address = '长沙' //增

for(key in obj){

console.log(key);

}

console.log(obj); //冻结 当前能查询 能修改 不能删除 不能添加新的内容

//判断是否冻结 判断是否密封 判断是否可扩展

console.log( Object.isFrozen(obj));

console.log( Object.isSealed(obj));

console.log( Object.isExtensible(obj));

freeze > seal > preventExtensions (冻结必定密封 密封必定不可扩展)

getOwnPropertyNames 获取所有的属性名(除symbol的key以外)

getOwnPropertySymbols 获取所有symbol为键的属性名

getOwnPropertyDescriptor 获取对应属性的详情(属性对象)

getOwnPropertyDescriptors 获取所有属性的详情 (对象)

let symbol = Symbol()

let obj = {

name:

'

jack',

age:18

}

obj[symbol] = '你好'

//获取所有的属性名(除symbol的key以外) 传入的是一个对象 返回的是一个字符串数组

let names = Object.getOwnPropertyNames(obj)

console.log(names);

//获取所有的symbol修饰的属性(获取所有symbol为键的属性) 返回symbol数组

let symbols = Object.getOwnPropertySymbols(obj)

console.log(symbols);

//Descriptor getOwnPropertyDescriptor 获取属性的详情 返回是一个属性对象

let desc= Object.getOwnPropertyDescriptor(obj,'name')

console.log(desc);

//getOwnPropertyDescriptors 获取所有的属性详情 返回的是一个对象 每个的对象key是对应的属性

名 值为属性对象

let descs = Object.getOwnPropertyDescriptors(obj)

console.log(descs);

属性对象

defineProperty 定义单个属性

//defineProperty的基础使用

let obj = {

name:

"

jack"

}

//基础的属性定义 传入对象 传入属性名 属性对象

Object.defineProperty(obj,'age',{

configurable:false,//不写默认为false 是否可以删除

enumerable:false, //是否可枚举 是否可以被遍历

value:18,

writable:false //是否可以写 修改

})

console.log(obj);

delete obj.age //configurable

//是否可以遍历 for in只能遍历可枚举的属性

for(key in obj){

console.log(key);

}

obj.age = 30

console.log(obj);

属性属性(基础的属性定义)

configurable:false,

enumerable:false,

value:18,

writable:false

访问器属性(已经存在的属性进行访问)

configurable:false,

enumerable:false,

get(){},//value

set(){}//writable

//进行浅拷贝 操作一个对象(实际操作对象)

let model = Object.assign({},obj)

//访问器属性是对于已经存在的时候进行访问的时候的相关属性

Object.defineProperty(obj,'name',{

configurable:true,

enumerable:true,

get(){

//在访问它的值的时候调用 它就替代了__defineGetter__

//返回的值就是它对应获取的值

console.log('调用了get');

return model.name+'加工'

},

set(v){

//设置值的时候调用 它就替代了__defineSetter__

console.log('调用了set');

model.name = v

}

})

obj.name = 'tom' //调用set

console.log(obj.name);//调用get

defineProperties 定义多个属性

//定义多个属性

let obj1 = {}

let model1 = {}

Object.defineProperties(obj1,{

username:{

configurable:true,

enumerable:true,

get(){

return model1.username

},

set(v){

model1.username = v

}

},

password:{

configurable:true,

enumerable:true,

get(){

return model1.password

},

set(v){

model1.password = v

}

}

})

obj1.username = '张三'

obj1.password = '123456'

console.log(obj1);

console.log(model1);

总结

原型方法重点 hasOwnProperty isPropertypeOf

Object是所有类的父类 所以他的原型方法及属性所有的类都拥有

Object的静态方法是为所有的对象服务的 里面的参数都是对象

defineProperty和观察者模式是vue2的底层 (实现vue2的双向数据绑定)

面试题

for in 和 Object.keys 和 Object.getOwnProertyNames的区别

for in 包含继承的属性及自身的属性 (不包含不可枚举的属性)

Object.keys 只包含自身的属性 (不包含继承的和不可枚举的属性)

Object.getOwnProertyNames 只包含自身的属性 (不包含继承的 包含不可枚举的)

三个内容都不包含symbol的属性

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容