이 기사는 ES6의 DefineProperty 및 프록시에 대한 자세한 소개(코드 예제)를 제공합니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.
우리는 모두 "데이터 바인딩"이라는 단어를 어느 정도 들어본 적이 있습니다. "데이터 바인딩"의 핵심은 데이터의 변경 사항을 모니터링하는 것입니다. 그러나 이러한 개체의 경우 var obj = {value: 1}을 어떻게 알 수 있습니까? obj가 바뀌었나요?
definePropety
ES5는 객체에 대한 새 속성을 정의하거나 객체의 기존 속성을 수정하고 객체를 반환할 수 있는 Object.defineProperty 메서드를 제공합니다.
Syntax
Object.defineProperty(obj, prop, descriptor)
Parameters
obj: 要在其上定义属性的对象。 prop: 要定义或修改的属性的名称。 descriptor: 将被定义或修改的属性的描述符。
예:
var obj = {}; Object.defineProperty(obj, "num", { value : 1, writable : true, enumerable : true, configurable : true }); // 对象 obj 拥有属性 num,值为 1
속성과 값을 직접 추가할 수 있지만 이 방법을 사용하면 더 많은 구성을 수행할 수 있습니다. .
함수의 세 번째 매개변수 설명자로 표현되는 속성 설명자는 데이터 설명자 및 액세스 설명자의 두 가지 형식을 갖습니다.
둘 모두 다음 두 가지 키 값을 가집니다:
configurable
속성의 구성 가능 항목이 true인 경우에만 속성 설명자를 변경하거나 삭제할 수 있습니다. 기본값은 거짓입니다.
enumerable
속성의 열거 가능이 true인 경우에만 해당 속성은 객체의 열거 속성에 나타날 수 있습니다. 기본값은 거짓입니다.
데이터 설명자에는 다음과 같은 선택적 키 값도 있습니다. :
value
이 속성에 해당하는 값입니다. 유효한 JavaScript 값(숫자, 객체, 함수 등)이 될 수 있습니다. 기본값은 정의되지 않았습니다.
writable
writable 속성이 true인 경우에만 할당 연산자가 속성을 변경할 수 있습니다. 기본값은 거짓입니다.
액세스 설명자에는 다음과 같은 선택적 키 값도 있습니다. :
get
속성에 대한 getter를 제공하는 메서드입니다. getter가 없으면 정의되지 않습니다. 이 메소드의 반환 값은 속성 값으로 사용됩니다. 기본값은 정의되지 않았습니다.
set
속성에 대한 setter를 제공하는 메서드입니다. setter가 없으면 정의되지 않습니다. 이 메서드는 고유한 매개변수를 받아들이고 해당 매개변수의 새 값을 속성에 할당합니다. 기본값은 정의되지 않았습니다.
주목할 가치가 있는 점은 다음과 같습니다.
속성 설명자는 데이터 설명자 또는 액세스 설명자의 두 가지 형식 중 하나여야 하며 동시에 두 가지 형식을 모두 사용할 수는 없습니다. 즉, 다음을 수행할 수 있음을 의미합니다.
Object.defineProperty({}, "num", { value: 1, writable: true, enumerable: true, configurable: true });
다음도 수행할 수 있습니다.
var value = 1; Object.defineProperty({}, "num", { get : function(){ return value; }, set : function(newValue){ value = newValue; }, enumerable : true, configurable : true });
그러나 다음은 수행할 수 없습니다.
// 报错 Object.defineProperty({}, "num", { value: 1, get: function() { return 1; } });
또한 모든 속성 설명자는 선택 사항이지만 설명자 필드는 필수 구성입니다. this:
var obj = Object.defineProperty({}, "num", {}); console.log(obj.num); // undefined
Setters and Getters
defineProperty에 대해 이야기하는 이유는 액세스 설명자에서 get 및 set을 사용해야 하기 때문입니다. 이 두 가지 메서드를 getter 및 setter라고도 합니다. getter 및 setter에 의해 정의된 속성을 "접근자 속성"이라고 합니다.
프로그램이 접근자 속성 값을 쿼리하면 JavaScript는 getter 메서드를 호출합니다. 이 메소드의 반환 값은 속성 액세스 표현식의 값입니다. 프로그램이 접근자 속성의 값을 설정하면 JavaScript는 setter 메서드를 호출하여 할당 표현식 오른쪽의 값을 매개변수로 setter에 전달합니다. 어떤 의미에서 이 메서드는 속성 값을 "설정"하는 역할을 합니다. setter 메서드의 반환 값은 무시할 수 있습니다.
예:
var obj = {}, value = null; Object.defineProperty(obj, "num", { get: function(){ console.log('执行了 get 操作') return value; }, set: function(newValue) { console.log('执行了 set 操作') value = newValue; } }) obj.value = 1 // 执行了 set 操作 console.log(obj.value); // 执行了 get 操作 // 1
이것이 우리가 데이터 변경 사항을 모니터링하려는 방법이 아닌가요? 다시 캡슐화해 보겠습니다.
function Archiver() { var value = null; // archive n. 档案 var archive = []; Object.defineProperty(this, 'num', { get: function() { console.log('执行了 get 操作') return value; }, set: function(value) { console.log('执行了 set 操作') value = value; archive.push({ val: value }); } }); this.getArchive = function() { return archive; }; } var arc = new Archiver(); arc.num; // 执行了 get 操作 arc.num = 11; // 执行了 set 操作 arc.num = 13; // 执行了 set 操作 console.log(arc.getArchive()); // [{ val: 11 }, { val: 13 }]
watch API
데이터 변경 사항을 모니터링할 수 있으므로 데이터가 변경되면 자동으로 렌더링 작업이 수행될 것으로 예상됩니다. 예:
HTML에는 스팬 태그와 버튼 태그가 있습니다
<span id="container">1</span> <button id="button">点击加 1</button>
버튼을 클릭하면 스팬 태그의 값이 1씩 증가합니다.
전통적인 접근 방식은 다음과 같습니다.
document.getElementById('button').addEventListener("click", function(){ var container = document.getElementById("container"); container.innerHTML = Number(container.innerHTML) + 1; });
defineProperty를 사용하는 경우:
var obj = { value: 1 } // 储存 obj.value 的值 var value = 1; Object.defineProperty(obj, "value", { get: function() { return value; }, set: function(newValue) { value = newValue; document.getElementById('container').innerHTML = newValue; } }); document.getElementById('button').addEventListener("click", function() { obj.value += 1; });
코드가 늘어나는 것 같지만, SPAN 태그의 값을 변경해야 하는 경우 obj.value의 값을 직접 수정할 수 있습니다.
그러나 현재 작성 방식으로는 여전히 obj.value의 값을 저장하기 위해 별도의 변수를 선언해야 합니다. 왜냐하면 집합에 직접 obj.value = newValue
하면 무한 루프에 빠지기 때문입니다. 또한, 여러 속성 값의 변경 사항을 하나씩 모니터링해야 할 수도 있으므로 간단히 watch 함수를 작성합니다. 사용 효과는 다음과 같습니다.
var obj = { value: 1 } watch(obj, "num", function(newvalue){ document.getElementById('container').innerHTML = newvalue; }) document.getElementById('button').addEventListener("click", function(){ obj.value += 1 });
다음 watch 함수를 작성해 보겠습니다.
(function(){ var root = this; function watch(obj, name, func){ var value = obj[name]; Object.defineProperty(obj, name, { get: function() { return value; }, set: function(newValue) { value = newValue; func(value) } }); if (value) obj[name] = value } this.watch = watch; })()
이제 객체 속성 값의 변화를 모니터링하고, 속성 값의 변화에 따라 콜백 함수를 추가할 수 있습니다. 좋습니다~
proxy
사용 DefineProperty는 속성 읽기(가져오기) 및 설정(설정) 동작만 재정의할 수 있습니다. ES6에서는 in, delete, 함수 호출 등과 같은 더 많은 동작을 재정의할 수 있는 프록시가 제공됩니다.
Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。我们来看看它的语法:
var proxy = new Proxy(target, handler);
proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。
var proxy = new Proxy({}, { get: function(obj, prop) { console.log('设置 get 操作') return obj[prop]; }, set: function(obj, prop, value) { console.log('设置 set 操作') obj[prop] = value; } }); proxy.time = 35; // 设置 set 操作 console.log(proxy.time); // 设置 get 操作 // 35
除了 get 和 set 之外,proxy 可以拦截多达 13 种操作,比如 has(target, propKey),可以拦截 propKey in proxy 的操作,返回一个布尔值。
// 使用 has 方法隐藏某些属性,不被 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); console.log('_prop' in proxy); // false
又比如说 apply 方法拦截函数的调用、call 和 apply 操作。
apply 方法可以接受三个参数,分别是目标对象、目标对象的上下文对象(this)和目标对象的参数数组,不过这里我们简单演示一下:
var target = function () { return 'I am the target'; }; var handler = { apply: function () { return 'I am the proxy'; } }; var p = new Proxy(target, handler); p(); // "I am the proxy"
又比如说 ownKeys 方法可以拦截对象自身属性的读取操作。具体来说,拦截以下操作:
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.keys()
下面的例子是拦截第一个字符为下划线的属性名,不让它被 for of 遍历到。
let target = { _bar: 'foo', _prop: 'bar', prop: 'baz' }; let handler = { ownKeys (target) { return Reflect.ownKeys(target).filter(key => key[0] !== '_'); } }; let proxy = new Proxy(target, handler); for (let key of Object.keys(proxy)) { console.log(target[key]); } // "baz"
更多的拦截行为可以查看阮一峰老师的 《ECMAScript 6 入门》
值得注意的是,proxy 的最大问题在于浏览器支持度不够,而且很多效果无法使用 poilyfill 来弥补。
watch API 优化
我们使用 proxy 再来写一下 watch 函数。使用效果如下:
(function() { var root = this; function watch(target, func) { var proxy = new Proxy(target, { get: function(target, prop) { return target[prop]; }, set: function(target, prop, value) { target[prop] = value; func(prop, value); } }); if(target[name]) proxy[name] = value; return proxy; } this.watch = watch; })() var obj = { value: 1 } var newObj = watch(obj, function(key, newvalue) { if (key == 'value') document.getElementById('container').innerHTML = newvalue; }) document.getElementById('button').addEventListener("click", function() { newObj.value += 1 });
我们也可以发现,使用 defineProperty 和 proxy 的区别,当使用 defineProperty,我们修改原来的 obj 对象就可以触发拦截,而使用 proxy,就必须修改代理对象,即 Proxy 的实例才可以触发拦截。
위 내용은 ES6의 DefineProperty 및 프록시에 대한 자세한 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!