寫一個攔截函數(shù),訪問目標(biāo)對象不存在屬性時,會拋出不存在該屬性的錯誤
如果存在該屬性時,就返回其值.

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 + "\" dose not exist." );}} }); console.log(proxy.name); console.log(proxy.age);// 注: 攔截讀取屬性使用get, // target在本例中指向person,第一個console中的property是name,故返回其值 // 第二個console的中的property是age,在person里面不存在,故拋出錯誤.

效果如下:

使用get攔截實現(xiàn)數(shù)組負(fù)數(shù)索引
即:當(dāng)輸入A[-1]時(假定A.length = 3),返回A[-1 + 3] = A[2]
輸入正常時,返回正常位

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'); console.log(arr[-1]); console.log(arr[1]);// 注:createArray()函數(shù)使用擴展運算符(...)接收參數(shù), 里面創(chuàng)建了一個代理Proxy,并將其實例返回,提供了一個很友好的接口., // 代理:Propxy接收了2個參數(shù),第一個是目標(biāo),第二個參數(shù),設(shè)置了一個監(jiān)聽獲取操作的攔截器.即在讀取數(shù)據(jù)元素時執(zhí)行. // 攔截器檢查索引,若為負(fù)數(shù)將其與數(shù)組長度相加.并返回長度... // Reflect...暫時不懂..

使用get操作實現(xiàn)屬性的鏈?zhǔn)讲僮?/strong> (神仙實現(xiàn)…)

var pipe = (function () {return function (value) {var funcStack = [];var oproxy = new Proxy({}, {get: function ({}, fnName) {if (fnName === 'get' ) {return funcStack.reduce(function (val, fn) {console.log("val >>>", val);console.log("fn >>>", fn);return fn(val);}, value);}funcStack.push(window[fnName]);console.log("fnName >>> ",fnName);return oproxy;}});return oproxy;} }()); var double = n => n * 2; var pow = n => n * n; var reverseInt= n => n.toString().split("").reverse().join("") | 0; console.log(pipe(3).double.pow.reverseInt.get); // 注: 首先定義了一個立即執(zhí)行的函數(shù)pipe,pipe函數(shù)內(nèi)部有一個變量funcStack用于保存鏈?zhǔn)綀?zhí)行的方法(.double.pow.reverseInt) // 在Proxy的實例oproxy里面,設(shè)置了一個get攔截(可以理解為在執(zhí)行.操作時執(zhí)行函數(shù)),第二個參數(shù)(fnName)用于接收.操作的名稱 // 首先判斷fnName是否為get(此處的get是鏈?zhǔn)讲僮鹘Y(jié)束的標(biāo)志),若不是,就將當(dāng)前操作入棧funcStack.push // 若fnName 為get，則將保存在funcStack里面的操作取出來,對value值依此執(zhí)行最后返回這個值.

使用get攔截實現(xiàn)一個生成各種DOM節(jié)點的通用函數(shù)dom
具體來說就是,dom.div({},‘Hello World’)就會生成一個<div>Hello World</div>

// 定義dom const dom = new Proxy({}, {get(target, property) {return function (attrs = {}, ...children) {console.log(attrs,...children);const el = document.createElement(property);for (let prop of Object.keys(attrs)) {el.setAttribute(prop, attrs[prop]);}for (let child of children) {if (typeof child === 'string') {child = document.createTextNode(child);}el.appendChild(child);}return el;}} });// 使用dom const el = dom.div({},'Hello, my name is ',dom.a({href: '//example.com'}, 'Marron.L'),'. I like:',dom.ul({},dom.li({}, 'The Web'),dom.li({}, 'Food'),dom.li({}, '...actually that\'s it)) ); document.body.appendChild(el)

這個是控制臺打印內(nèi)容

這個是頁面顯示內(nèi)容

參考《ES6標(biāo)準(zhǔn)入門》(第3版) P237~P240

總結(jié)

以上是生活随笔為你收集整理的es6 --- Proxy实例的get方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。