数据劫持

es6给对象提供了set和get方法，可以对对象再进行操作

let obj={

    _name:'zhangsan',

    age:40,

    get name(){

        return '姓名'+this._name;},

    set name(v){

        if(v==this._name){

             return this._name}

         else{

             this._name=v}

}

}

obj.name='lisi';

document.write(obj.name)

Vue2双向数据绑定

不支持ie8及以下

let obj={

name:'zhangsan'

}

Object.defineProperty()    可以对对象的数据进行劫持

configurable属性是否能被修改和删除，默认为true，可以被删除

Object.defineProperty(obj,'name',{

                  configurable:false }) 

delete obj.name;

document.write(obj.name)

writable:表示能否修改属性的值，默认值为true,为false则不能被修改，变成只读属性

value就是对象属性的默认值，优先级比定义的优先级大

Object.defineProperty(obj,'name',{

                writable:true,

                value:'wanger'}) 

document.write(obj.name)

enumerable:表示能否通过for in循环访问属性，默认值为true，可以

Object.defineProperty(obj,'name',{

enumerable:true}) 

可以对对象的多个属性进行劫持

Object.defineProperties(obj,name:{enumerable:true},

age:{enumerable:false}) 

for(var key in obj){

document.write(obj[key]+‘
’)}

new Proxy

  let p = {

            name: 'zhangsan',

            age: 30

        }

        let p2 = {

            get(obj, key) {

                console.log('我要获取的值obj是' + obj + 'key是' + key)

                return obj[key]

            },

            set(obj, key, val) {

                console.log('key是' + key + '值是' + obj[key] + '修改为' + val)

                obj.key = val

            }

        }

        /* p代表源对象,p2代表需要操作的对象*/

        let proxy1 = new Proxy(p, p2)

        console.log(proxy1)

        /* 测试get是否能够拦截成功 */

        document.write(proxy1.name + '
')

        document.write(proxy1.age + '
')

        document.write(proxy1.abc + '
')