Object的几个方法(defineProperty,hasOwnProperty…)

作者 : 开心源码 本文共2896个字,预计阅读时间需要8分钟 发布时间: 2022-05-13 共221人阅读

1、defineProperty

let obj = {    name:"诸葛钢铁",    age:"18"}Object.defineProperty(obj,"idno",{    value:"15089",//简单点就是 设置属性的值    writable:false,//能否可操作属性值,默认值false    configurable:false,//能否可修改配置configurable假如值为false descriptor内的属性都不可操作),默认值false    enumerable:false//能否可枚举,默认值false。Object.keys()获取的是可枚举的,Objec.getOwnPropertyNames()获取的是所有的值。})

使用Object.defineProperty() 定义对象属性时,如已设置 set 或者 get, 就不可设置 writable 和 value 中的任何一个了,不然会报错。

  • writable
let obj = {    name:"诸葛钢铁",    age:"18"}Object.defineProperty(obj,"idno",{     value:"15089",     writable:false,//不能修改     configurable:false,     enumerable:false})try{    obj.idno = "111"}catch{ }console.log(obj) //{name:"诸葛钢铁",age:"18",idno:"15089"}
  • configurable
let obj = {    name:"诸葛钢铁",    age:"18"}Object.defineProperty(obj,"idno",{     value:"15089",     writable:false,     configurable:false,//控制descriptor内属性都不可改变     enumerable:false})try{    Object.defineProperty(obj,"idno",{        writable:true    })}catch{ }console.log(Object.getOwnPropertyDescriptor(obj,'idno'))//{configurable: false,enumerable: false,value: "15089",writable: false}
  • enumerable
let obj = {    name:"诸葛钢铁",    age:"18"}Object.defineProperty(obj,"idno",{     value:"15089",     writable:false,     configurable:false,//控制descriptor内属性都不可改变     enumerable:false//能否可枚举})console.log(Object.keys(obj))//{name:"诸葛钢铁",age:"18"}

其实defineProperty和set,get就是vue3.0前双向绑定原理的实现

//html<input type="text">//jslet obj = {}/***obj      要劫持的对象*name     要劫持对象的属性*callback 劫持以后的操作*/function watch(obj, name, callback) {    let value = obj.name    Object.defineProperty(obj, name, {        set(msg) {            // 触发setter给obj赋值            value = msg            //执行劫持后的操作            callback(value)        },        get() {            //返回获取属性值            return value        }    })}function doSomething(value) {    document.querySelector('div').innerHTML = value    document.querySelector('input').value = value}//监听input变化 document.querySelector('input').addEventListener('input', (e) => {    obj['msg'] = e.target.value})watch(obj, 'msg', doSomething)

2、hasOwnProperty

Object的hasOwnProperty()方法返回一个布尔值,判断对象能否包含特定的自身(非继承)属性。

var obj = {    aa:"111"}console.log(obj.hasOwnProperty("aa"))//trueconsole.log(obj.hasOwnProperty("toString"))//false

3、defineProperties

同defineProperty

var obj = {};Object.defineProperties(obj, {  'property1': {    value: true,    writable: true  },  'property2': {    value: 'Hello',    writable: false  }});

4、getPrototypeOf和isPrototypeOf

getPrototypeOf此方法可以获取指定对象的原型对象
isPrototypeOf方法用于测试一个对象能否存在于另一个对象的原型链上。

function Person(){  this.name="123";  this.nofg="11";}Person.prototype={  age:3,  address:"sdag"}let person=new Person();console.log(Object.getPrototypeOf(person).age);//3console.log(Person.prototype.isPrototypeOf(person));//true

5、getOwnPropertyNames

列出一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。
区别于Object.keys()。

var aa = {    name:"123",    age:17}Object.defineProperty(aa,"idno",{    value:"1234"//不可枚举的})console.log(Object.getOwnPropertyNames(aa))//["name", "age", "idno"]

6、getOwnPropertyDescriptor和getOwnPropertyDescriptors

getOwnPropertyDescriptors方法用来获取一个对象的所有自身属性的形容符。
getOwnPropertyDescriptor方法用来获取一个对象的指定属性的形容符。

var aa = {    name:"123",    nofg:11}console.log(Object.getOwnPropertyDescriptor(aa,"name"));console.log(Object.getOwnPropertyDescriptors(aa));

image.png

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Object的几个方法(defineProperty,hasOwnProperty…)

发表回复