實(shí)例解析ES6 Proxy使用場(chǎng)景介紹

const target = { 
 name: 'Billy Bob',
 age: 15
};

const handler = { 
 get(target, key, proxy) {
 const today = new Date();
 console.log(`GET request made for ${key} at ${today}`);

 return Reflect.get(target, key, proxy);
 }
};

const proxy = new Proxy(target, handler);
proxy.name;
// => "GET request made for name at Thu Jul 21 2016 15:26:20 GMT+0800 (CST)"
// => "Billy Bob"

let numericDataStore = { 
 count: 0,
 amount: 1234,
 total: 14
};

numericDataStore = new Proxy(numericDataStore, { 
 set(target, key, value, proxy) {
 if (typeof value !== 'number') {
 throw Error("Properties in numericDataStore can only be numbers");
 }
 return Reflect.set(target, key, value, proxy);
 }
});

// 拋出錯(cuò)誤，因?yàn)?"foo" 不是數(shù)值
numericDataStore.count = "foo";

// 賦值成功
numericDataStore.count = 333;

function createValidator(target, validator) { 
 return new Proxy(target, {
 _validator: validator,
 set(target, key, value, proxy) {
 if (target.hasOwnProperty(key)) {
 let validator = this._validator[key];
 if (!!validator(value)) {
 return Reflect.set(target, key, value, proxy);
 } else {
 throw Error(`Cannot set ${key} to ${value}. Invalid.`);
 }
 } else {
 throw Error(`${key} is not a valid property`)
 }
 }
 });
}

const personValidators = { 
 name(val) {
 return typeof val === 'string';
 },
 age(val) {
 return typeof age === 'number' && age > 18;
 }
}
class Person { 
 constructor(name, age) {
 this.name = name;
 this.age = age;
 return createValidator(this, personValidators);
 }
}

const bill = new Person('Bill', 25);

// 以下操作都會(huì)報(bào)錯(cuò)
bill.name = 0; 
bill.age = 'Bill'; 
bill.age = 15; 

let obj = { 
 pickyMethodOne: function(obj, str, num) { /* ... */ },
 pickyMethodTwo: function(num, obj) { /*... */ }
};

const argTypes = { 
 pickyMethodOne: ["object", "string", "number"],
 pickyMethodTwo: ["number", "object"]
};

obj = new Proxy(obj, { 
 get: function(target, key, proxy) {
 var value = target[key];
 return function(...args) {
 var checkArgs = argChecker(key, args, argTypes[key]);
 return Reflect.apply(value, target, args);
 };
 }
});

function argChecker(name, args, checkers) { 
 for (var idx = 0; idx < args.length; idx++) {
 var arg = args[idx];
 var type = checkers[idx];
 if (!arg || typeof arg !== type) {
 console.warn(`You are incorrectly implementing the signature of ${name}. Check param ${idx + 1}`);
 }
 }
}

obj.pickyMethodOne(); 
// > You are incorrectly implementing the signature of pickyMethodOne. Check param 1
// > You are incorrectly implementing the signature of pickyMethodOne. Check param 2
// > You are incorrectly implementing the signature of pickyMethodOne. Check param 3

obj.pickyMethodTwo("wopdopadoo", {}); 
// > You are incorrectly implementing the signature of pickyMethodTwo. Check param 1

// No warnings logged
obj.pickyMethodOne({}, "a little string", 123); 
obj.pickyMethodOne(123, {});

var api = { 
 _apiKey: '123abc456def',
 /* mock methods that use this._apiKey */
 getUsers: function(){}, 
 getUser: function(userId){}, 
 setUser: function(userId, config){}
};

// logs '123abc456def';
console.log("An apiKey we want to keep private", api._apiKey);

// get and mutate _apiKeys as desired
var apiKey = api._apiKey; 
api._apiKey = '987654321';

let api = { 
 _apiKey: '123abc456def',
 getUsers: function(){ }, 
 getUser: function(userId){ }, 
 setUser: function(userId, config){ }
};

const RESTRICTED = ['_apiKey'];
api = new Proxy(api, { 
 get(target, key, proxy) {
 if(RESTRICTED.indexOf(key) > -1) {
 throw Error(`${key} is restricted. Please see api documentation for further info.`);
 }
 return Reflect.get(target, key, proxy);
 },
 set(target, key, value, proxy) {
 if(RESTRICTED.indexOf(key) > -1) {
 throw Error(`${key} is restricted. Please see api documentation for further info.`);
 }
 return Reflect.get(target, key, value, proxy);
 }
});

// 以下操作都會(huì)拋出錯(cuò)誤
console.log(api._apiKey);
api._apiKey = '987654321'; 

var api = { 
 _apiKey: '123abc456def',
 getUsers: function(){ }, 
 getUser: function(userId){ }, 
 setUser: function(userId, config){ }
};

const RESTRICTED = ['_apiKey'];
api = new Proxy(api, { 
 has(target, key) {
 return (RESTRICTED.indexOf(key) > -1) ?
 false :
 Reflect.has(target, key);
 }
});

// these log false, and `for in` iterators will ignore _apiKey
console.log("_apiKey" in api);

for (var key in api) { 
 if (api.hasOwnProperty(key) && key === "_apiKey") {
 console.log("This will never be logged because the proxy obscures _apiKey...")
 }
}

let api = { 
 _apiKey: '123abc456def',
 getUsers: function() { /* ... */ },
 getUser: function(userId) { /* ... */ },
 setUser: function(userId, config) { /* ... */ }
};

function logMethodAsync(timestamp, method) { 
 setTimeout(function() {
 console.log(`${timestamp} - Logging ${method} request asynchronously.`);
 }, 0)
}

api = new Proxy(api, { 
 get: function(target, key, proxy) {
 var value = target[key];
 return function(...arguments) {
 logMethodAsync(new Date(), key);
 return Reflect.apply(value, target, arguments);
 };
 }
});

api.getUsers();

let dataStore = { 
 noDelete: 1235,
 oldMethod: function() {/*...*/ },
 doNotChange: "tried and true"
};

const NODELETE = ['noDelete']; 
const NOCHANGE = ['doNotChange'];
const DEPRECATED = ['oldMethod']; 

dataStore = new Proxy(dataStore, { 
 set(target, key, value, proxy) {
 if (NOCHANGE.includes(key)) {
 throw Error(`Error! ${key} is immutable.`);
 }
 return Reflect.set(target, key, value, proxy);
 },
 deleteProperty(target, key) {
 if (NODELETE.includes(key)) {
 throw Error(`Error! ${key} cannot be deleted.`);
 }
 return Reflect.deleteProperty(target, key);

 },
 get(target, key, proxy) {
 if (DEPRECATED.includes(key)) {
 console.warn(`Warning! ${key} is deprecated.`);
 }
 var val = target[key];

 return typeof val === 'function' ?
 function(...args) {
 Reflect.apply(target[key], target, args);
 } :
 val;
 }
});

// these will throw errors or log warnings, respectively
dataStore.doNotChange = "foo"; 
delete dataStore.noDelete; 
dataStore.oldMethod();

let obj = { 
 getGiantFile: function(fileId) {/*...*/ }
};

obj = new Proxy(obj, { 
 get(target, key, proxy) {
 return function(...args) {
 const id = args[0];
 let isEnroute = checkEnroute(id);
 let isDownloading = checkStatus(id); 
 let cached = getCached(id);

 if (isEnroute || isDownloading) {
 return false;
 }
 if (cached) {
 return cached;
 }
 return Reflect.apply(target[key], target, args);
 }
 }
});

let sensitiveData = { username: 'devbryce' };
const {sensitiveData, revokeAccess} = Proxy.revocable(sensitiveData, handler);
function handleSuspectedHack(){ 
 revokeAccess();
}

// logs 'devbryce'
console.log(sensitiveData.username);
handleSuspectedHack();
// TypeError: Revoked
console.log(sensitiveData.username);