es6 --- > Proxy实例的get方法

写一个拦截函数,访问目标对象不存在属性时,会抛出不存在该属性的错误
如果存在该属性时,就返回其值.

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拦截实现数组负数索引
即:当输入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()函数使用扩展运算符(...)接收参数, 里面创建了一个代理Proxy,并将其实例返回,提供了一个很友好的接口.,
// 代理:Propxy接收了2个参数,第一个是目标,第二个参数,设置了一个监听获取操作的拦截器.即在读取数据元素时执行.
// 拦截器检查索引,若为负数将其与数组长度相加.并返回长度...
// Reflect...暂时不懂..

使用get操作实现属性的链式操作 (神仙实现…)

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);
// 注: 首先定义了一个立即执行的函数pipe,pipe函数内部有一个变量funcStack用于保存链式执行的方法(.double.pow.reverseInt)
// 在Proxy的实例oproxy里面,设置了一个get拦截(可以理解为在执行.操作时执行函数),第二个参数(fnName)用于接收.操作的名称
// 首先判断fnName是否为get(此处的get是链式操作结束的标志),若不是,就将当前操作入栈funcStack.push
// 若fnName 为get，则将保存在funcStack里面的操作取出来,对value值依此执行最后返回这个值.

使用get拦截实现一个生成各种DOM节点的通用函数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)

这个是控制台打印内容

这个是页面显示内容

参考《ES6标准入门》(第3版) P237~P240