Object方法

Object方法

实例方法

属于new出来的object对象，所有对象都有的方法

当前对象obj是否具备对应的属性att 返回boolean值 ***

obj.hasOwnProperty(att)

判断O.prototype是否在实例obj的原型链中 ***

O.prototype.isPrototypeOf(obj)

判断当前的属性是否是枚举类型

obj.propertyIsEnumerable(att)

已废弃__defineGetter__ __defineSetter__定义get方法和set方法

实例属性

所有对象都拥有的属性

__proto__ 对象原型(隐式原型) 指向对应构造函数的prototype

constructor指向对应的构造函数

静态方法

使用Object.的方法

用现有对象作为新创建对象的原型

let obj = {name: 'tom'}
let createObj = Object.create(obj)

将多个对象拷贝到1个对象上

let newObj = {}
Object.assign(newObj, {obj: "66"}, {age:18})

entries keys values

Object.keys(newObj)  // key数组
Object.values(newObj)  // value数组
Object.entries(newObj)  // 二维数组

判断2个对象是否相等

let obj1 = {name: 'tom', age:18}
let obj2 = JSON.parse(JSON.stringify(obj1))
Object.is(Obj2, obj1)

对象可扩展 对象冻结 对象密封

Object.preventExtenions(obj)  // 对象obj变得不可拓展 阻止添加新属性，允许改值、删值
Object.isExtensible(obj)  // 判断对象obj是否可拓展

Object.seal(obj)  // 对象obj密封 阻止添加新属性、删值，允许改值+数据属性不可配置
Object.isSealed(obj)  // 判断对象obj是否密封

Object.freeze(obj)  // 对象obj冻结 阻止添加新属性+数据属性不可配置+不允许修改值
Object.isFrozen(obj)  // 判断对象obj是否冻结

返回对象原型

Object.getPrototypeOf(Obj)

指定对象的原型

Object.setPrototypeOf(createObj, {
	name: 'jack'
})

// 获取属性详情 返回对象
getOwnPropertyDescriptor(obj, "name")
getOwnPropertyDescriptors(obj)  // 获取所有属性详情

// 获取所有属性名 返回数组
getOwnPropertyNames

// 获取所有symbol类型属性 返回数组
getOwnPropertySymbols

Object.defineProperty() 定义属性 ***

let obj = {}
// 给obj对象添加属性
Object.defineProperty(obj, 'name', {// 数据属性
	value: "tom"
    writable: true  // 可否修改？
    configurable： true // 可否删除
    enumerable: true  // 可否遍历
})
console.log('obj', obj)

数据属性(当前属性没有的情况下)

value 表示当前值 默认undefined
writable 是否可以赋值 默认false
enumerable 是否可以遍历 默认false
configurable 是否可以删除 默认是false

访问器属性(当前属性已经有了)

var name = "tom"
var obj = {name}
enumerable 是否可以遍历 默认false
configurable 是否可以删除 默认是false
set(value){name = value}	等价于(writable)	//设置值
get(){return name}	等价于(value)		// 访问值

_name  // 解决循环引用

Object.defineProperties() 定义多个属性 ***

let obj = {}
// 给obj对象添加属性
Object.defineProperties(obj, {
	"name", {// 数据属性
	value: "tom"
    writable: true  // 可否修改？
    configurable： true // 可否删除
    enumerable: true  // 可否遍历
	},
	"age", {
		value: 666
	}
})
console.log('obj', obj)

vue2中的双向数据绑定

利用观察者和Object.defineProperty实现 ***

 <div id="app">
        <input type="text" v-model="message">
        <p>{{message}}</p>
    </div>

    <script>
        var el = document.querySelector("#app")
        var data = {}
        var template = el.innerHTML

        function render() {
            el.innerHTML = template.replace(/\{\{\s?[\w.]+\s?\}\}/g, str=>{
                str = str.substring(2, str.length-2)
                return data[str]
            })
            
            Array.from(el.getElementsByTagName("input"))
            .filter(input=>input.getAttribute("v-model"))
            .forEach(item=>{
                let value = item.getAttribute("v-model")
                // 设置data对象
                item.oninput = function (){
                    // let value = this.getAttribute("v-model")
                    data[value] = this.value
                }
                // 将对应的数据重新设置给input框
                item.value = data[value]
                // 防止失焦
                item.focus()
            })
        }

        Object.defineProperty(data, "message", {
            get() {
                return this._message
            },
            set(value) {
                this._message = value
                render()
            }
        })
        data.message = ""
    </script>