Apply your JS skills to key Mozilla projects as an MDN Fellow! http://mzl.la/MDNFellowship

mozilla
您的搜索结果

    Proxy

    这篇翻译不完整。请帮忙从英语翻译这篇文章

    该特性目前仍处于 ECMAScript 6 规范草案中
    目前的实现在未来可能会发生改变,甚至被完全删除,请谨慎使用。

    Summary

    The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc).

    Terminology

    handler
    Placeholder object which contains traps.
    traps
    The methods that provide property access. This is analogous to the concept of traps in operating systems.
    target
    Object which the proxy virtualizes. It is often used as storage backend for the proxy. Invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target.

    Syntax

    var p = new Proxy(target, handler);
    

    Parameters

    target
    目标对象,可以是任意类型的对象,比如数组,函数,甚至是另外一个代理对象。
    handler
    处理器对象,包含了一组代理方法,分别控制所生成代理对象的各种行为。

    Methods

    Proxy.revocable()
    Creates a revocable Proxy object.

    Methods of the handler object

    The handler object is a placeholder object which contains traps for Proxy.

    一共有 14 种可代理操作,每种操作的代号(属性名/方法名)和触发这种操作的方式列举如下。注意,如果没有定义某种操作,那么这种操作会被转发到目标对象身上。

    handler.getPrototypeOf()
    在读取代理对象的原型时触发该操作,比如在执行 Object.getPrototypeOf(proxy) 时。
    handler.setPrototypeOf()
    在设置代理对象的原型时触发该操作,比如在执行 Object.setPrototypeOf(proxy, null) 时。
    handler.isExtensible()
    在判断一个代理对象是否是可扩展时触发该操作,比如在执行 Object.isExtensible(proxy) 时。
    handler.preventExtensions()
    在让一个代理对象不可扩展时触发该操作,比如在执行 Object.preventExtensions(proxy) 时。
    handler.getOwnPropertyDescriptor()
    在获取代理对象某个属性的属性描述时触发该操作,比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。
    handler.defineProperty()
    在定义代理对象某个属性时的属性描述时触发该操作,比如在执行 Object.defineProperty(proxy, "foo", {}) 时。
    handler.has()
    在判断代理对象是否拥有某个属性时触发该操作,比如在执行 "foo" in proxy 时。
    handler.get()
    在读取代理对象的某个属性时触发该操作,比如在执行 proxy.foo 时。
    handler.set()
    在给代理对象的某个属性赋值时触发该操作,比如在执行 proxy.foo = 1 时。
    handler.deleteProperty()
    在删除代理对象的某个属性时触发该操作,比如在执行 delete proxy.foo 时。
    handler.enumerate()
    在遍历代理对象的属性时触发该操作,比如在执行 for(i in proxy){} 时。
    handler.ownKeys()
    在获取代理对象的所有属性键时触发该操作,比如在执行 Object.getOwnPropertyNames(proxy) 时。
    handler.apply()
    在调用一个目标对象为函数的代理对象时触发该操作,比如在执行 proxy() 时。
    handler.construct()
    在给一个目标对象为构造函数的代理对象构造实例时触发该操作,比如在执行new proxy() 时。

    Examples

    Basic example

    In this simple example the number 37 gets returned as the default value when the property name is not in the object. It is using the get handler.

    var handler = {
        get: function(target, name){
            return name in target?
                target[name] :
                37;
        }
    };
    
    var p = new Proxy({}, handler);
    p.a = 1;
    p.b = undefined;
    
    console.log(p.a, p.b); // 1, undefined
    console.log('c' in p, p.c); // false, 37
    

    No-op forwarding proxy

    In this example, we are using a native JavaScript object to which our proxy will forward all operations that are applied to it.

    var target = {};
    var p = new Proxy(target, {});
    
    p.a = 37; // operation forwarded to the proxy
    
    console.log(target.a); // 37. The operation has been properly forwarded
    

    Validation

    With a Proxy, you can easily validate the passed value for an object. This example uses the set handler.

    let validator = {
      set: function(obj, prop, value) {
        if (prop === 'age') {
          if (!Number.isInteger(value)) {
            throw new TypeError('The age is not an integer');
          }
          if (value > 200) {
            throw new RangeError('The age seems invalid');
          }
        }
    
        // The default behavior to store the value
        obj[prop] = value;
      }
    };
    
    let person = new Proxy({}, validator);
    
    person.age = 100;
    console.log(person.age); // 100
    person.age = 'young'; // Throws an exception
    person.age = 300; // Throws an exception
    

    Extending constructor

    A function proxy could easily extend a constructor with a new constructor. This example uses the construct and apply handlers.

    function extend(sup,base) {
      var descriptor = Object.getOwnPropertyDescriptor(
        base.prototype,"constructor"
      );
      base.prototype = Object.create(sup.prototype);
      var handler = {
        construct: function(target, args) {
          var obj = Object.create(base.prototype);
          this.apply(target,obj,args);
          return obj;
        },
        apply: function(target, that, args) {
          sup.apply(that,args);
          base.apply(that,args);
        }
      };
      var proxy = new Proxy(base,handler);
      descriptor.value = proxy;
      Object.defineProperty(base.prototype, "constructor", descriptor);
      return proxy;
    }
    
    var Person = function(name){
      this.name = name
    };
    
    var Boy = extend(Person, function(name, age) {
      this.age = age;
    });
    
    Boy.prototype.sex = "M";
    
    var Peter = new Boy("Peter", 13);
    console.log(Peter.sex);  // "M"
    console.log(Peter.name); // "Peter"
    console.log(Peter.age);  // 13

    Manipulating DOM nodes

    Sometimes you want to toggle the attribute or class name of two different elements. Here's how using the set handler.

    let view = new Proxy({
      selected: null
    },
    {
      set: function(obj, prop, newval) {
        let oldval = obj[prop];
    
        if (prop === 'selected') {
          if (oldval) {
            oldval.setAttribute('aria-selected', 'false');
          }
          if (newval) {
            newval.setAttribute('aria-selected', 'true');
          }
        }
    
        // The default behavior to store the value
        obj[prop] = newval;
      }
    });
    
    let i1 = view.selected = document.getElementById('item-1');
    console.log(i1.getAttribute('aria-selected')); // 'true'
    
    let i2 = view.selected = document.getElementById('item-2');
    console.log(i1.getAttribute('aria-selected')); // 'false'
    console.log(i2.getAttribute('aria-selected')); // 'true'
    

    Value correction and an extra property

    The products proxy object evaluates the passed value and convert it to an array if needed. The object also supports an extra property called latestBrowser both as a getter and a setter.

    let products = new Proxy({
      browsers: ['Internet Explorer', 'Netscape']
    },
    {
      get: function(obj, prop) {
        // An extra property
        if (prop === 'latestBrowser') {
          return obj.browsers[obj.browsers.length - 1];
        }
    
        // The default behavior to return the value
        return obj[prop];
      },
      set: function(obj, prop, value) {
        // An extra property
        if (prop === 'latestBrowser') {
          obj.browsers.push(value);
          return;
        }
    
        // Convert the value if it is not an array
        if (typeof value === 'string') {
          value = [value];
        }
    
        // The default behavior to store the value
        obj[prop] = value;
      }
    });
    
    console.log(products.browsers); // ['Internet Explorer', 'Netscape']
    products.browsers = 'Firefox'; // pass a string (by mistake)
    console.log(products.browsers); // ['Firefox'] <- no problem, the value is an array
    
    products.latestBrowser = 'Chrome';
    console.log(products.browsers); // ['Firefox', 'Chrome']
    console.log(products.latestBrowser); // 'Chrome'
    

    Finding an array item object by its property

    This proxy extends an array with some utility features. As you see, you can flexibly "define" properties without using Object.defineProperties. This example can be adapted to find a table row by its cell. In that case, the target will be table.rows.

    let products = new Proxy([
      { name: 'Firefox', type: 'browser' },
      { name: 'SeaMonkey', type: 'browser' },
      { name: 'Thunderbird', type: 'mailer' }
    ],
    {
      get: function(obj, prop) {
        // The default behavior to return the value; prop is usually an integer
        if (prop in obj) {
          return obj[prop];
        }
    
        // Get the number of products; an alias of products.length
        if (prop === 'number') {
          return obj.length;
        }
    
        let result, types = {};
    
        for (let product of obj) {
          if (product.name === prop) {
            result = product;
          }
          if (types[product.type]) {
            types[product.type].push(product);
          } else {
            types[product.type] = [product];
          }
        }
    
        // Get a product by name
        if (result) {
          return result;
        }
    
        // Get products by type
        if (prop in types) {
          return types[prop];
        }
    
        // Get product types
        if (prop === 'types') {
          return Object.keys(types);
        }
    
        return undefined;
      }
    });
    
    console.log(products[0]); // { name: 'Firefox', type: 'browser' }
    console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' }
    console.log(products['Chrome']); // undefined
    console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }]
    console.log(products.types); // ['browser', 'mailer']
    console.log(products.number); // 3
    

    A complete traps list example

    Now in order to create a complete sample traps list, for didactic purposes, we will try to proxify a non native object that is particularly suited to this type of operation: the docCookies global object created by the "little framework" published on the document.cookie page.

    /*
      var docCookies = ... get the "docCookies" object here:  
      https://developer.mozilla.org/zh-CN/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
    */
    
    var docCookies = new Proxy(docCookies, {
      "get": function (oTarget, sKey) {
        return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
      },
      "set": function (oTarget, sKey, vValue) {
        if (sKey in oTarget) { return false; }
        return oTarget.setItem(sKey, vValue);
      },
      "deleteProperty": function (oTarget, sKey) {
        if (sKey in oTarget) { return false; }
        return oTarget.removeItem(sKey);
      },
      "enumerate": function (oTarget, sKey) {
        return oTarget.keys();
      },
      "ownKeys": function (oTarget, sKey) {
        return oTarget.keys();
      },
      "has": function (oTarget, sKey) {
        return sKey in oTarget || oTarget.hasItem(sKey);
      },
      "defineProperty": function (oTarget, sKey, oDesc) {
        if (oDesc && "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); }
        return oTarget;
      },
      "getOwnPropertyDescriptor": function (oTarget, sKey) {
        var vValue = oTarget.getItem(sKey);
        return vValue ? {
          "value": vValue,
          "writable": true,
          "enumerable": true,
          "configurable": false
        } : undefined;
      },
    });
    
    /* Cookies test */
    
    alert(docCookies.my_cookie1 = "First value");
    alert(docCookies.getItem("my_cookie1"));
    
    docCookies.setItem("my_cookie1", "Changed value");
    alert(docCookies.my_cookie1);

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support

    未实现

    18 (18) 12 ? ?
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? ? 18 (18) ? ? ?

    Gecko specific notes

    • At present, Object.getPrototypeOf(proxy) unconditionally returns Object.getPrototypeOf(target), because the ES6 getPrototypeOf trap is not yet implemented (bug 888969, bug 888969).
    • Array.isArray(proxy) unconditionally returns Array.isArray(target) (bug 1111785, bug 1111785).
    • Object.prototype.toString.call(proxy) unconditionally returns Object.prototype.toString.call(target), because ES6 Symbol.toStringTag is not yet implemented (bug 1114580).

    See also

    Licensing note

    Some content (text, examples) in this page has been copied or adapted from the ECMAScript wiki which content is licensed CC 2.0 BY-NC-SA.

    文档标签和贡献者

    此页面的贡献者有: ziyunfei, teoli
    最后编辑者: ziyunfei,