Object.defineproperty - (Vue的原理)

例1：

const obj = {}
        Object.defineProperty(obj, 'x', {
            value:21,
            writable:false //不能被改變
        })

結(jié)果：

> obj
< {x: 21}
> obj.x =24
< 24
> obj
> {x: 21}

例2：

//事先定義一個(gè)對(duì)象
const obj = {}
//定義一個(gè)中間值，用于過渡
        let y = 20
        //使用Object.defineProperty來(lái)為obj定義一個(gè)x的值
        Object.defineProperty(obj, 'x', {
            //當(dāng)每次調(diào)用 obj.x 這個(gè)get方法會(huì)自動(dòng)執(zhí)行，它的return值就是上面定義的y
            get () {    //獲取時(shí)走的方式
                return y
            },
            //當(dāng)每次使用obj.x = 某個(gè)值 來(lái)賦值的時(shí)候 這個(gè)set方法會(huì)自動(dòng)執(zhí)行，set方法的參數(shù)就是你的那個(gè)'某個(gè)值'
            set (newValue) { //賦值時(shí)走的地方
                console.log(newValue);
                //把新值賦給y，那么下次在執(zhí)行obj.x取出來(lái)的值就是新值
                y = newValue;
            }
        })

結(jié)果

> obj.x
< 20
> obj.x = 24
  24
< 24

特性檢測(cè)：

> 'borderRadius' in document.createElement('div').style;
< true
> 'placeholder' in document.createElement('input');
< true

Proxy

//設(shè)置初始值方便理解
let x = 10;
    //使用Proxy來(lái)定義一個(gè)對(duì)象，對(duì)象可為空
    const obj = new Proxy({ x },{
        //當(dāng)每次使用obj.x = 某個(gè)值 來(lái)賦值的時(shí)候 這個(gè)set方法會(huì)自動(dòng)執(zhí)行，set方法的參數(shù)就是 "{ x }, x, 某個(gè)值"
        set (obj, prop, value) { //obj就是 { x }
            obj[prop] = value; 
        },
        //當(dāng)每次使用obj.x時(shí)這個(gè)get方法會(huì)自動(dòng)執(zhí)行，get方法的參數(shù)就是 "{ x }, x"
        get (obj, prop) {
            return obj[prop]  //返回obj[prop]的value值
        }
    })