proxy代理

最新推荐文章于 2024-05-01 21:05:50 发布

等归,

最新推荐文章于 2024-05-01 21:05:50 发布

阅读量350

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_50370865/article/details/127896185

版权

Proxy代理

proxy作用
proxy代码片段

proxy作用

proxy代码片段

proxy作用 : 
        1、代理
        2、解决跨域问题

proxy代码片段

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>proxy代理</title>
</head>

<body>

</body>
<script>
  /* 
    proxy作用 : 
        1、代理
        2、解决跨域问题
  */

  var house = { size: '120平', price: 1500000, info: '位置好，便宜，拎包入住' }
  // 中介 new Proxy(target,handler)
  /*
    target:要拦截的目标对象
    handler：定制拦截的行为 (方法)(函数) 也是一个对象
  */

  var pro1 = new Proxy(house, {
    /*
       target:目标对象
       property:元素的属性
    */
    // 1、获取
    get(target, property) {
      // console.log(target);
      // console.log(property);
      if (property == 'size') {
        return `这个房子120平,公摊少,面积大,到手100多平,带车库`
      }
      if (property == 'price') {
        return `价格实惠`
      }
      if (property == 'info') {
        return `位置好，小区是原始森林，旁边是护城河，出门就是地铁，
                右拐就是幼儿园，过了这个村，没有这个店，你去了下个村，还是我这个店，`
      }
      return target[property]
    },

    // 2、设置
    set(target, property, value) {
      // console.log(target);
      // console.log(property);
      // console.log(value);
      target[property] = value
    },

    // 3、Ownkeys拦截操作，拦截过滤Object.ownKeys()对对象的属性遍历。 
    ownKeys() {
      return ['size', 'price']
    },
    has(target, property) {
      console.log(target);
      console.log(property);
      if (target[property] == undefined) {
        return false
      }
      return true
    },
  })
  // console.log(pro1);
  // console.log(pro1.size);
  // pro1.prize = 1510000;
  // console.log(pro1.prize);
  // console.log(pro1);

  // 3、Ownkeys拦截操作，拦截过滤Object.ownKeys()对对象的属性遍历。 
  console.log(Object.keys(pro1));

  // 4、has( )拦截操作：拦截key in object的操作，结果会返回一个布尔值。
  console.log('size' in pro1);
  console.log('name' in pro1);

  // 5、apply()方法  除了对象类型的变量可以被代理，函数也可以被代理，如果被代理的变量
  //                  是一个函数，那么还会支持一个拦截程序；apply调用
  var fn = function () {
    console.log(123);
  }
  var fn1 = new Proxy(fn, {
    apply() {
      console.log(456);
    }
  })
  fn1()

  // 6、如果创建了代理之后又想取消代理的话，我们可以用Proxy.revocable() （可废止的，可撤回的）函数来实现，它会返回一个对象
  //对象中含有一个proxy属性，它就是proxy的代理实例对象，还有一个revoke属性，它是一个方法，用于取消代理
  var pro2 = Proxy.revocable(house, {
    get(target, property) {
      return target[property]
    }
  })
  console.log(pro2.proxy.size);
  pro2.revoke()
  console.log(pro2.proxy.size);  // 报错  代理已经被取消
</script>

<script>

  var arr = [1, 2, 3]
  arr.map(function (currentValue, index, arr) {
    // console.log(arr[index]);
  })
</script>

</html>