查看全部 13 个 JavaScript 代理陷阱

1const profile = {};
2profile.firstName = 'Jack';

1const kickOutJacksHandler = {
2  set: function (target, prop, val) {
3    if (prop === 'firstName' && val === 'Jack') {
4      return false;
5    }
6    target[prop] = val;
7    return true;
8  }
9}

1const noJackProfile  = new Proxy ({}, kickOutJacksHandler);
2noJackProfile.firstName = 'Charles';
3// console will show {} 'firstName' 'Charles'
4// noJackProfile.firstName === 'Charles'
5//This won't work because we don't allow firstName to equal Jack
6
7newProfileProxy.firstName = 'Jack';
8// console will show {firstName: 'Charles'} 'firstName' 'Charles'
9// noJackProfile.firstName === 'Charles'

1typeof MyThing === 'object'

1console.log(typeof new Proxy({},{}) === 'object')
2// logs 'TRUE' well actually just true... I got a bit excited...

 1const logger = []
 2
 3const loggerHandler = {
 4  get: function (target, prop) {
 5    logger.push(`Someone accessed '${prop}' on object ${target.name} at ${new Date()}`);
 6    return target[prop] || target.getItem(prop) || undefined;
 7  },
 8}
 9
10const secretProtectorHandler = {
11  deleteProperty: function (target, prop) {
12    // If the key we try to delete contains to substring 'secret' we don't allow the user to delete it
13    if (prop.includes('secret')){
14      return false;
15    }
16    return true;
17  }
18};
19
20const sensitiveDataProxy = new Proxy (
21  {name:'Secret JS Object', secretOne: 'I like weird JavaScript Patterns'},
22  {...loggerHandler, ...secretProtectorHandler}
23);
24
25const {secretOne} = sensitiveDataProxy;
26//logger = ['Someone tried to accessed 'secretOne' on object Secret JS Object at Mon Dec 09 2019 23:18:54 GMT+0900 (Japan Standard Time)']
27
28delete sensitiveDataProxy.secretOne;
29// returns false it can't be deleted!
30
31// sensitiveDataProxy equals  {name: 'Secret JS Object', secretOne: 'I like weird JavaScript Patterns'}

 1const createProxiedParameters  = (reqBody, allowed) => {
 2  return new Proxy (reqBody, {
 3    ownKeys: function (target) {
 4      return Object.keys(target).filter(key => allowed.includes(key))
 5    }
 6  });
 7};
 8
 9const allowedKeys = ['firstName', 'lastName', 'password'];
10
11const reqBody = {lastName:'Misteli', firstName:'Jack', password:'pwd', nefariousCode:'MWUHAHAHAHA'};
12
13const proxiedParameters = createProxiedParameters(reqBody, allowedKeys);
14
15const parametersKeys =  Object.keys(proxiedParameters)
16// parametersKeys equals ["lastName", "firstName", "password"]
17const parametersValues = parametersKeys.map(key => reqBody[key]);
18// parameterValues equals ['Misteli', 'Jack', 'pwd']
19
20for (let key in proxiedParameters) {
21  console.log(key, proxiedParameters[key]);
22}
23// logs:
24// lastName Misteli
25// firstName Jack
26// password pwd
27
28// The trap will also work with these functions
29Object.getOwnPropertyNames(proxiedParameters);
30// returns ['lastName', 'firstName', 'password']
31Object.getOwnPropertySymbols(proxiedParameters);
32// returns []

 1function createInArray(arr) {
 2  return new Proxy(arr, {
 3    has: function (target, prop) {
 4      return target.includes(prop);
 5    }
 6  });
 7};
 8
 9const myCoolArray  =  createInArray(['cool', 'stuff']);
10console.log('cool' in myCoolArray);
11// logs true
12console.log('not cool' in myCoolArray);
13// logs false

 1const createCachedFunction = (func) => {
 2  const handler = {
 3    // cache where we store the arguments we already called and their result
 4    cache : {},
 5    // applu is the [[Call]] trap
 6    apply: function (target, that, args) {
 7      // we are assuming the function only takes one argument
 8      const argument = args[0];
 9      // we check if the function was already called with this argument
10      if (this.cache.hasOwnProperty(argument)) {
11        console.log('function already called with this argument!');
12        return this.cache[argument];
13      }
14      // if the function was never called we call it and store the result in our cache
15      this.cache[argument] = target(...args);
16      return this.cache[argument];
17    }
18  }
19  return new Proxy(func, handler);
20};
21
22// awesomeSlowFunction returns an awesome version of your argument
23// awesomeSlowFunction resolves after 3 seconds
24const awesomeSlowFunction = (arg) => {
25  const promise = new Promise(function(resolve, reject) {
26    window.setTimeout(()=>{
27      console.log('Slow function called');
28      resolve('awesome ' + arg);
29      }, 3000);
30    });
31  return promise;
32};
33
34const cachedFunction = createCachedFunction(awesomeSlowFunction);
35
36const main = async () => {
37  const awesomeCode = await cachedFunction('code');
38  console.log('awesomeCode value is: ' + awesomeCode);
39  // After 3 seconds (the time for setTimeOut to resolve) the output will be :
40  // Slow function called
41  //  awesomeCode value is: awesome code
42
43  const awesomeYou = await cachedFunction('you');
44  console.log('awesomeYou value is: ' + awesomeYou);
45    // After 6 seconds (the time for setTimeOut to resolve) the output will be :
46  // Slow function called
47  //  awesomeYou value is: awesome you
48
49  // We are calling cached function with the same argument
50  const awesomeCode2 = await cachedFunction('code');
51  console.log('awesomeCode2 value is: ' + awesomeCode2);
52  // IMMEDIATELY after awesomeYou resolves the output will be:
53  // function already called with this argument!
54  // awesomeCode2 value is: awesome code
55}
56
57main()

 1const handler = {
 2  defineProperty: function (target, prop, descriptor) {
 3    // For some reason we don't accept enumerable or writeable properties 
 4    console.log(typeof descriptor.value)
 5    const {enumerable, writable} = descriptor
 6    if (enumerable === true || writable === true)
 7      return false;
 8    // Checking if age is a number
 9    if (prop === 'age' && typeof descriptor.value != 'number') {
10      return false
11    }
12    return Object.defineProperty(target, prop, descriptor);
13  }
14};
15
16const profile = {name: 'bob', friends:['Al']};
17const profileProxied = new Proxy(profile, handler);
18profileProxied.age = 30;
19// Age is enumerable so profileProxied still equals  {name: 'bob', friends:['Al']};
20
21Object.defineProperty(profileProxied, 'age', {value: 23, enumerable: false, writable: false})
22//We set enumerable to false so profile.age === 23

 1const extend = (superClass, subClass) => {
 2  const handler = {
 3    construct: function (target, args) {
 4      const newObject = {}
 5      // we populate the new object with the arguments from
 6      superClass.call(newObject, ...args);
 7      subClass.call(newObject, ...args);
 8      return newObject;
 9    },
10  }
11  return new Proxy(subClass, handler);
12}
13
14const Person = function(name) {
15  this.name = name;
16};
17
18const Boy = extend(Person, function(name, age) {
19  this.age = age;
20  this.gender = 'M'
21});
22
23const Peter = new Boy('Peter', 13);
24console.log(Peter.gender);  // 'M'
25console.log(Peter.name); // 'Peter'
26console.log(Peter.age);  // 13

 1function createTrickOrTreatTransaction(limit) {
 2  const extensibilityHandler = {
 3    preventExtensions:  function (target) {
 4      target.full = true;
 5      // this will prevent the user from even changing the existing values
 6      return Object.freeze(target);
 7    },
 8    set:  function (target, prop, val) {
 9      target[prop] = val;
10      const candyTotal = Object.values(target).reduce((a,b) => a + b, 0) - target.limit;
11
12      if (target.limit - candyTotal <= 0) {
13        // if you try to cheat the system and get more that your candy allowance, we clear your bag
14        if (target.limit - candyTotal < 0 )
15          target[prop] = 0;
16        // Target is frozen so we can't add any more properties
17
18        this.preventExtensions(target);
19      }  
20    },
21    isExtensible: function (target) {
22      // Kids can check their candy limit 
23      console.log( Object.values(target).reduce((a,b) => a + b, 0) - target.limit);
24      // But it will drop their allowance by one
25      target.limit -= 1;
26      // This will return the sum of all our keys
27      return Reflect.isExtensible(target);
28    }
29  }
30  return new Proxy ({limit}, extensibilityHandler);
31};
32
33const candyTransaction = createTrickOrTreatTransaction(10);
34
35Object.isExtensible(candyTransaction);
36// console will log 10
37// Now candyTransaction.limit = 9
38
39candyTransaction.chocolate  = 6;
40
41// The candy provider got tired and decided to interrupt the negotiations early
42Object.preventExtensions(candyTransaction);
43// now candyTransaction equals to {limit: 9, chocolate: 6, full: true}
44
45candyTransaction.chocolate = 20;
46//  candyBag equals to {limit: 9, chocolate: 6, full: true}
47// Chocolates did not go change to 20 because we called freeze in the preventExtensions trap
48
49const secondCandyTransaction = createTrickOrTreatTransaction(10);
50
51secondCandyTransaction.reeses = 8;
52secondCandyTransaction.nerds = 30;
53// secondCandyTransaction equals to {limit: 10, reeses: 8, nerds: 0, full: true}
54// This is because we called preventExtensions inside the set function if a kid tries to shove in extra candies
55
56secondCandyTransaction.sourPatch = 30;
57// secondCandyTransaction equals to {limit: 10, reeses: 8, nerds: 0, full: true}

 1let candies = new Proxy({}, {
 2  // as seen above ownKeys is called once before we iterate
 3  ownKeys(target) {
 4    console.log('in own keys', target);
 5    return ['reeses', 'nerds', 'sour patch'];
 6  },
 7// on the other end getOwnPropertyDescriptor at every iteration
 8  getOwnPropertyDescriptor(target, prop) { 
 9    console.log('in getOwnPropertyDescriptor', target, prop);
10    return {
11      enumerable: false,
12      configurable: true
13    };
14  }
15});
16
17const candiesObject = Object.keys(candies);
18// console will log:
19// in own keys {}
20// in getOwnPropertyDescriptor {} reeses
21// in getOwnPropertyDescriptor {} nerds
22// in getOwnPropertyDescriptor {} sour patch
23// BUT ! candies == {} and candiesObject == []

 1const createSolidPrototype = (proto) => {
 2  const handler = {
 3    setPrototypeOf: function (target, props) {
 4      target.hasBeenTampered = true;
 5      return false;
 6    },
 7    getPrototypeOf: function () {
 8      console.log('getting prototype')
 9    },
10    getOwnProperty: function() {
11      console.log('called: ' + prop);
12      return { configurable: true, enumerable: true, value: 10 };
13    }
14  };
15};

 1const alphabeticalOrderer = {
 2  enumerate: function (target) {
 3    console.log(target, 'enumerating');
 4    // We are filtering out any key that has a number or capital letter in it and sorting them
 5    return Object.keys(target).filter(key=> !/\d|[A-Z]/.test(key)).sort()[Symbol.iterator]();
 6  }
 7};
 8
 9const languages = {
10  france: 'French',
11  Japan: 'Japanese',
12  '43J': '32jll',
13  alaska: 'American'
14};
15
16const languagesProxy = new Proxy (languages, alphabeticalOrderer);
17
18for (var lang in languagesProxy){
19  console.log(lang);
20}
21// console outputs:
22// Object { france: 'French', japan: 'Japanese', 43J: '32jll', alaska: 'American' } enumerating
23// alaska
24// france
25
26// Usually it would output
27// france
28// Japan
29// 43J
30// alaska