DAY21JS学习--代理对象、数据劫持、深浅拷贝

一、hasOwnProperty 方法

1、作用：判断属性和方法是否对象本身自带的

2、Object.prototype.hasOwnProperty()=>属于object原型对象上的方法，所有实例对象都可以访问

3、沿原型链上查找的方法不是它自身的（包括自身的原型对象）

二、Object.defineProperty 方法（类方法）

1、作用：

（1）给对象动态添加属性

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

（3）数据劫持--监听对象数据变化，实现数据变化自动更新界面（vue2.x实现原理应用）

2、语法

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

三、代理proxy

1、含义：不直接对对象、函数或数组进行操作，而是把它挂载到proxy（代理）上

2、语法

let obj={
    name:'jack',
    age；18
}

let proxyObj=new Proxy(obj,{
     get(target,propery){

        return target[propery]
     }

     set(target,propery,value){
         target[propery]=value
     }
})

3、应用

通过proxy代理目标对象obj，实现数据劫持，通过代理对象proxy改变目标对象属性值时，再get、set捕获器中做些处理，比如更新界面

四、代理proxy与Object.defineproperty区别

1、Object.defineproperty处理数组要特殊处理，代理proxy直接处理

五、深拷贝和浅拷贝：复制对象得到一个新对象

1、浅拷贝  ：只复制一层对象，如果属性值是对象，无法拷贝，只会沿用同一个对象地址

2、深拷贝：复制得到完全不一样的对象

3、实现拷贝

（1）浅拷贝：通过展开运算符实现浅拷贝

let obj={
    name:'jack'
   fun:{swiming:'游泳'}

}
let newObj={...obj} //浅拷贝，属性值是对象的不能拷贝

（2）深拷贝

*利用JSON实现（缺点：数据类型是Function函数或数值为undefined无法拷贝）

JSON对象有两个方法

*JSON.stringiify(obj)

obj转为字符串

注意：只能是Object形式对象，不能是Math、Date等

*JSON.parse(str)

字符串转对象（obj）

注意：字符必须是JSON格式

let obj={
   name:'jack',
   age:18,
   fun:{swiming:'游泳'}
}

let newObj=JSON.parse(JSON.stringify(obj))

*利用递归方法

 function cloneObj(obj){
                let newObj = Array.isArray(obj)? []:{} // 存储拷贝的原对象属性方法
                for(const key in obj){
                    if(obj[key] && typeof obj[key] === 'object'){
                        newObj[key] = cloneObj(obj[key])
                    }else{
                        newObj[key] = obj[key]
                    }
                }
                return newObj
            }