高级js 对象详解hasOwnProperty 、Object.defineProperty及其作用、数据劫持代理、proxy的运用、深拷贝与浅拷贝

一、hasOwnProperty

作用：判断属性或方法是不是对象本身自带的

            Object.prototype.hasOwnProperty()

沿原型链上查找的方法不是它自身的

 <script>
        let obj={
            name:'jack',
            age:18,
        } 
        Object.prototype.score=100
        let isOk=obj.hasOwnProperty('name')
        let isOk1=obj.hasOwnProperty('score')//hasOwnProperty只检查自身的方法和属性
        console.log('isOk',isOk)
        console.log('isOk1',isOk1)

        let arr=[]
        console.dir(arr)
        console.dir(Array.prototype);
        console.log(arr.hasOwnProperty('length'))
        console.log(arr.hasOwnProperty('find'))

    </script>

二、Object.defineProperty

 作用：

               1.将对象属性绑定到另一个对象

                 2.数据劫持-监听对象数据变化

                    实现数据变化自动更新界面(vue2.x实现原理应用)

                 3.给对象动态添加属性

语法：

                Object.defineProperty(obj,属性，{})

 <script>
function test1(){
    let obj={} 
        Object.defineProperty(obj,'name',{
            value:'jack',
            configurable:true,//允许删除属性
            writable:true,//允许修改属性值
            enumerable:true,//遍历对象for-in
        })
        console.log(obj.name)
}
// test1()


    let obj={}
    Object.defineProperty(obj,'age',{
        // 访问对象age属性时自动调用  obj.age
        get:function(){
            console.log('get...')
            return 20
        },
           // 赋值给对象属性age时自动调用并赋值
        set(newValue){
            console.log('set....')

        }
    })
    console.log('111',obj.age)
    obj.age=18
    console.log('222',obj.age)

    </script>
    

作用1：

将对象属性绑定到另一个对象上

  <script>
        let obj = {
            name: 'jack',
            age: 18,
        }
        let vm = {}
        // 将obj对象的所有属性动态添加到vm对象上

        // 1.遍历obj对象
        for (const key in obj) {
            //    2.动态给vm添加属性
            Object.defineProperty(vm, key, {
                // vm.name
                get() {
                    return obj[key]
                },
                // vm.name='rose'
                set(newValue) {
                    // 原值与新值直接返回
                    if(obj[key]==newValue){
                        return
                    }
                    obj[key]=newValue//设置属性新值

                },

            })

        }
    </script>

作用2

数据劫持-监听对象数据变化

                实现数据变化自动更新界面

  <div>
        <p class="title">
            jack
        </p>
    </div>
    <script>