es6的Proxy与Reflect

  1. Proxy是在对目标对象的读取时,架设一层拦截,可以在读取对象中的任意一个属性时做一些额外的操作

  2. Proxy与Object.defineProperty方式设置setter、getter方法不同的是,Proxy是对目标对象的整体拦截,而Object.defineProperty注重对对象中的单个属性拦截

    const obj = {
    	a: 1,
    	b: 2
    };
    // 向obj中添加属性d,并设置setter、getter拦截
    let _data = '默认值';
    Object.defineProperty(obj, 'd', {
    	set(value) {
    		console.log('来设置d属性值了');
    		_data = value;
    	},
    	get() {
    		console.log('来获取d属性值了');
    		return _data;
    	}
    });
    console.log(obj.a); // 1 (不会触发d属性的拦截器)
    console.log(obj.b); // 2 (不会触发d属性的拦截器)
    console.log(obj.d);
    obj.d = '3';
    

    es6的Proxy与Reflect_第1张图片

    const obj1 = new Proxy(obj, {
    	set(target, key, value) {
    		console.log('来给obj对象的属性设置值了');
    		Reflect.set(target, key, value);
    		return true;
    	},
    	get(target, key) {
    		console.log('来拿obj对象中的属性值了');
    		return Reflect.get(target, key);
    	}
    });
    console.log(obj1.a);
    console.log(obj1.b);
    console.log(obj1.d);
    obj1.a = 'hello';
    obj1.b = 'hi';
    obj1.d = 'world';
    

    es6的Proxy与Reflect_第2张图片

你可能感兴趣的:(ES6+,es6,javascript,前端)