JS에서 ES6 프록시 프록시 사용법을 설명하는 기사(코드 공유)

이전 기사 "Vue에서 웹 프런트엔드 프로젝트 최적화에 대한 간략한 분석(코드 포함)"에서 Vue에서 웹 프런트엔드 프로젝트 최적화에 대해 배웠습니다. 다음 기사에서는 JS에서 ES6 프록시 프록시의 사용법을 소개합니다.

프록시의 개념

프록시원래 영어 의미는 프록시입니다. ES6에서는 "에이전트"로 번역할 수 있습니다. 이는 주로 특정 작업의 기본 동작을 변경하는 데 사용되며 이는 언어 수준에서 수정하는 것과 동일하므로 일종의 "메타 프로그래밍"(메타 프로그래밍), 즉 프로그래밍입니다. 프로그래밍 언어. proxy英文原意是代理的意思，在ES6中，可以翻译为"代理器"。它主要用于改变某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

proxy在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作（后文会说明，有哪些操作可以拦截），必须通过这层拦截。语法

var proxy = new Proxy(target, handler);

通过构造函数生成proxy，target参数是要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

例子

var obj = new Proxy(
  {},
  {
    get: function (target, key, receiver) {
      console.log(`getting ${key}!`);
      return Reflect.get(target, key, receiver);
    },
    set: function (target, key, value, receiver) {
      console.log(`setting ${key}!`);
      return Reflect.set(target, key, value, receiver);
    },
  }
);

一般将handle参数说成配置对象，在配置对象中，可以定义需要拦截的操作。如果配置对象为空，那么对proxy的操作将直通目标对象。

对proxy操作才有拦截效果，而不是目标对象。

Proxy实例的方法

当读取不存在的属性时候，抛出错误而不是返回undefined

var person = {
  name: "张三",
};

var proxy = new Proxy(person, {
  get: function (target, property) {
    if (property in target) {
      return target[property];
    } else {
      throw new ReferenceError('Property "' + property + '" does not exist.');
    }
  },
});

proxy.name; // "张三"
proxy.age; // 抛出一个错误

拦截读取继承属性

let proto = new Proxy(
  {},
  {
    get(target, propertyKey, receiver) {
      console.log("GET " + propertyKey);
      return target[propertyKey];
    },
  }
);

let obj = Object.create(proto);
obj.xxx; // "GET xxx"

数组读取负数索引（负数索引表示倒着取数）

function createArray(...elements) {
  let handler = {
    get(target, propKey, receiver) {
      let index = Number(propKey);
      if (index < 0) {
        propKey = String(target.length + index);
      }
      return Reflect.get(target, propKey, receiver);
    },
  };

  let target = [];
  target.push(...elements);
  return new Proxy(target, handler);
}

let arr = createArray("a", "b", "c");
arr[-1]; // c

实现数据的限制

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");
      }
    }

    // 对于age以外的属性，直接保存
    obj[prop] = value;
  },
};

let person = new Proxy({}, validator);

person.age = 100;

person.age; // 100
person.age = "young"; // 报错
person.age = 300; // 报错

防止内部属性“_”被外部读写（通常我们以下划线开头，表示其实内部属性）

var handler = {
  get(target, key) {
    invariant(key, "get");
    return target[key];
  },
  set(target, key, value) {
    invariant(key, "set");
    target[key] = value;
    return true;
  },
};
function invariant(key, action) {
  if (key[0] === "_") {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}
var target = {};
var proxy = new Proxy(target, handler);
proxy._prop;
// Error: Invalid attempt to get private "_prop" property
proxy._prop = "c";
// Error: Invalid attempt to set private "_prop" property

拦截——函数调用、call、apply操作

var twice = {
  apply(target, ctx, args) {
    return Reflect.apply(...arguments) * 2;
  },
};
function sum(left, right) {
  return left + right;
}
var proxy = new Proxy(sum, twice);
proxy(1, 2); // 6
proxy.call(null, 5, 6); // 22
proxy.apply(null, [7, 8]); // 30

不对...in...循环生效

var handler = {
  has(target, key) {
    if (key[0] === "_") {
      return false;
    }
    return key in target;
  },
};
var target = { _prop: "foo", prop: "foo" };
var proxy = new Proxy(target, handler);
"_prop" in proxy; // false

不对for...in...循环生效

let stu1 = { name: "张三", score: 59 };
let stu2 = { name: "李四", score: 99 };

let handler = {
  has(target, prop) {
    if (prop === "score" && target[prop] < 60) {
      console.log(`${target.name} 不及格`);
      return false;
    }
    return prop in target;
  },
};

let oproxy1 = new Proxy(stu1, handler);
let oproxy2 = new Proxy(stu2, handler);

"score" in oproxy1;
// 张三 不及格
// false

"score" in oproxy2;
// true

for (let a in oproxy1) {
  console.log(oproxy1[a]);
}
// 张三
// 59

for (let b in oproxy2) {
  console.log(oproxy2[b]);
}
// 李四
// 99

拦截object.keys()

프록시는 대상 객체의 외부 레이어에 차단 레이어를 구축합니다. 외부 세계에서 대상 객체에 대한 특정 작업(가로채울 수 있는 작업은 나중에 설명함)은 이 레이어를 통과해야 합니다. 차단의. 구문

let target = {
  a: 1,
  b: 2,
  c: 3,
};

let handler = {
  ownKeys(target) {
    return ["a"];
  },
};

let proxy = new Proxy(target, handler);

Object.keys(proxy);
// [ 'a' ]

은 생성자를 통해 프록시를 생성합니다. target 매개변수는 가로챌 대상 객체이고 핸들러 code> 매개변수는 차단 동작을 사용자 정의하는 데 사용되는 개체이기도 합니다.

예

rrreee 일반적으로 handle 매개변수를 구성 개체라고 합니다. 구성 개체에서는 가로채야 하는 작업을 정의할 수 있습니다. 구성 개체가 비어 있으면 프록시에 대한 작업이 대상 개체로 직접 이동합니다.

🎜차단 효과는 대상 개체가 아닌 프록시 작업에만 적용됩니다. 🎜🎜🎜프록시 인스턴스 방법🎜🎜존재하지 않는 속성을 읽을 때 정의되지 않음을 반환하는 대신 오류를 발생시킵니다.🎜rrreee🎜상속된 속성을 읽는 인터셉트🎜rrreee🎜 배열 읽기 음수 인덱스(음수 인덱스는 숫자를 거꾸로 가져오는 것을 의미) 🎜rrreee🎜 내부 속성 "_"를 외부에서 읽고 쓰는 것을 방지하기 위해 데이터 제한을 구현합니다. 🎜rrreee🎜(보통 밑줄로 시작하여 실제로 내부 속성) 🎜rrreee🎜인터셉션 - 함수 호출, call, apply 작업 🎜rrreee🎜은 ...in...에서 적용되지 않습니다. > 루프 🎜rrreee🎜잘못된 for...in... 루프가 적용됩니다🎜rrreee🎜object.keys() 메서드 차단🎜rrreee🎜🎜이 문서의 출처 RYF 주소: https:/ /es6.ruanyifeng.com/#docs/proxy🎜🎜🎜추천 학습: 🎜JS 고급 튜토리얼🎜🎜

위 내용은 JS에서 ES6 프록시 프록시 사용법을 설명하는 기사(코드 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!