proxy handler.construct(target, args)

作用:拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(…args)。
拦截:
该拦截器可以拦截以下操作:
1. new proxy(…args)
2. Reflect.construct()
注意:construct方法返回的必须是一个对象,否则会报错。同时拦截对象target也必须是一个可以被new的对象。

实例1

//construct(target, args)
/*拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)。*/
/*construct方法返回的必须是一个对象,否则会报错。同时拦截对象target也必须是一个可以被new的对象*/
//下面代码演示如何拦截 new 操作
{
  //实例1
  function Foo(x,y){
    this.x = x;
    this.y = y;
  }

  let proxy = new Proxy(Foo,{
    construct(target,args){
      return {total:args[0] * args[1]}
    }
  });

  console.log(new proxy(10,20)); //{total: 200}
}

实例2

{
  //实例2
  function foo(x,y) {
    this.x = x;
    this.y = y;
  }
  
  var p = new Proxy(foo, {
    construct: function(target, argumentsList, newTarget) {
      return {}; //返回空对象也可以,但是null不行
    }
  });
  
  console.log(new p(1,2)); //{}
}

下面的代码未能正确的初始化Proxy。Proxy初始化时,传给它的target 必须具有一个有效的constructor供new操作符调用。
实例3

//下面的代码未能正确的初始化Proxy。Proxy初始化时,传给它的target 必须具有一个有效的constructor供new操作符调用。
{
  //这里target为箭头函数会报错 因为箭头函数不能用new
  var foo = (x,y) => {
    return x+y;
  }
  var p = new Proxy(foo, { 
    construct: function(target, argumentsList, newTarget) {
      return {};
    }
  });
  
  console.log(new p(1,2)); // error 箭头函数不能用new
}

{ 
  //这里target为{} 传给它的target必须具有一个有效的constructor供new操作符调用。
  var p = new Proxy({}, {
    construct: function(target, argumentsList, newTarget) {
      return {};
    }
  });
  
  new p(); // TypeError is thrown, "p" is not a constructor
}

下面的代码违反了约定. 返回值必须是一个对象。
实例4

//下面的代码违反了约定. 返回值必须是一个对象
{
  //实例4
  var p = new Proxy(function() {}, {
    construct: function(target, argumentsList, newTarget) {
      return 1; //返回值必须是一个对象
    }
  });
  
  new p(); // TypeError is thrown
}

总结:handler.construct()方法用于拦截 new 操作符,为了使new操作符在生成的Proxy对象上生效,用于初始化代理的目标对象自身必须具有[[Construct]]内部方法(即new target必须是有效的),如target为箭头函数则不行,因为箭头函数不能用new,此外target为 { } 时也会报错。construct返回值必须是一个对象,但这里得注意不能返回null,(如果对 null 进行 typeof 操作,得到的结果是 object。因此,很多人将 null 当做 JavaScript 中的一个对象。然而事实是, typeof null = ‘object’ 只是 JavaScript 语言本身的一个 bug)。
争取每日一更,和大家一起进步,如有错误,还望大神们提出纠正!谢谢~

参考链接:
对proxy的理解及其常见用法
handler.construct() | javaScript MDN

猜你喜欢

转载自blog.csdn.net/weixin_43931898/article/details/102719994