ES6入門教程——7、ES6 Reflect 與 Proxy

一、Proxy代理

如果不直接操作對象，而是像代理模式，通過對象的代理對象進行操作，在進行這些操作時，可以添加一些需要的額外操作，譬如進行攔截。

//定義一個類
const employee = {
    firstName: 'Tapas',
    lastName: 'Adhikary'
};

//定義一個處理
let handler = {
    get: function(target, fieldName) {        

        if(fieldName === 'fullName' ) {
            return `${target.firstName} ${target.lastName}`;
        }

        return fieldName in target ?
            target[fieldName] :
                `No such property as, '${fieldName}'!`

    }
};

//定義一個代理
let p = new Proxy(employee, handler);

//調用

console.group('proxy');
console.log(p.firstName);
console.log(p.lastName);
console.log(p.org);
console.log(p.fullName);
console.groupEnd()

//輸出
proxy
  Tapas
  Adhikary
  No such property as, 'org'!
  Tapas Adhikary

二、reflect

Reflect是ES6爲操作對象的屬性或方法，更詳細解釋請參看官方文檔，這裏只是先給一個基本理解。

//Reflect一共有13個靜態方法
Reflect.apply(target, thisArg, args)
Reflect.construct(target, args)
Reflect.get(target, name, receiver)
Reflect.set(target, name, value, receiver)
Reflect.defineProperty(target, name, desc)
Reflect.deleteProperty(target, name)
Reflect.has(target, name)
Reflect.ownKeys(target)
Reflect.isExtensible(target)
Reflect.preventExtensions(target)
Reflect.getOwnPropertyDescriptor(target, name)
Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)

//示例1  Reflect.apply
// 老寫法
Function.prototype.apply.call(Math.floor, undefined, [1.75]) //返回： 1

// 新寫法
Reflect.apply(Math.floor, undefined, [1.75]) // 返回：1

//示例2  Reflect.get
let obj = {
    name: 'dreamapple',
    age: 22,
    get money() {
        console.log(`I can tell you my name ${this.name}, but not my money`);
        return 0
    }
};
console.log(Reflect.get(obj, 'name')); // dreamapple
console.log(Reflect.get(obj, 'myName')); // undefined
console.log(Reflect.get(obj, 'money'));
console.log(Reflect.get(obj, 'money', {name: 'happy'}));
// I can tell you my name happy, but not my money  // 0

//示例3 Reflect.defineProperty
let obj = {};
let obj1 = Object.defineProperty(obj, 'name', {
    enumerable: true,
    value: 'dreamapple'
});
console.log(obj); // { name: 'dreamapple' }


//示例4Reflect.deleteProperty

const myObj = { foo: 'bar' };

// 舊寫法
delete myObj.foo;

// 新寫法
Reflect.deleteProperty(myObj, 'foo');