JavaScript代理是什么？javascript代理的介绍

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本篇文章给大家带来的内容是关于JavaScript代理是什么？javascript代理的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

前言

什么是代理？

上小学的时候，李小红来你家叫你出去玩，第一个回应的不是你自己，是你妈：“王小明在家写作业，今天不出去！”

上中学的时候，赵二虎带着小弟们放学在校门口等着揍你，走在前面的不是你自己，是二虎他爸：“考试没及格还学会装黑社会了！”拎起二虎就是一顿胖揍。

上了大学，躺在宿舍里的床上，好饿。出门买饭并交代好不要葱蒜多放辣最后还直接端到床上的不是你自己，是快递小哥。

这些都是代理。

什么是 JavaScript 代理？

用官方的洋文来说，是 Proxy：

The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc).

通过 Proxy 我们可以拦截并改变一个对象的几乎所有的根本操作，包括但不限于属性查找、赋值、枚举、函数调用等等。

在生活中，通过代理我们可以自动屏蔽小红的邀请、自动赶走二虎的威胁、自动买好干净的饭端到床上。在 JavaScript 世界里，代理也可以帮你做类似的事情，接下来让我们一起琢磨一番。

初识代理：Hello World

以小学经历为例子，心里是喜欢小红的，于是我们定义：

const me = { name: '小明', like: '小红' }

这个时候如果调用 console.log(me.like)，结果必然是 小红。然而生活并不是这样，作为一个未成年人，总是有各种的代理人围绕在你身边，比如这样：

const meWithProxy = new Proxy(me, { get(target, prop) { if (prop === 'like') { return '学习'; } return target[prop]; } });

这个时候如果调用 console.log(me.like) 依然是 小红 ，因为真心不会说谎。但当我们调用 console.log(meWithProxy.like) 的时候，就会可耻的输出 学习 ，告诉大家说我们喜欢的是 学习 。

小试牛刀：不要停止我的音乐

刚才我们简单了解了代理能够拦截对象属性的获取，可以隐藏真实的属性值而返回代理想要返回的结果，那么对于对象属性的赋值呢？让我们一起来看看。

假设你正在听音乐：

const me = { name: '小明', musicPlaying: true }此时如果我们执行 me.musicPlaying = false 这样就轻而易举地停止了你的音乐，那么如果我们挂上代理人：
const meWithProxy = new Proxy(me, {
  set(target, prop, value) {
    if (prop === 'musicPlaying' && value !== true) {
      throw Error('任何妄图停止音乐的行为都是耍流氓！');
    }
    target[prop] = value;
  }
});这时候如果我们执行 me.musicPlaying = false，就会被毫不留情地掀了桌子：
> meWithProxy.musicPlaying = false
Error: 任何妄图停止音乐的行为都是耍流氓！
    at Object.set (repl:4:13)
>释放魔法：封装全宇宙所有 RESTful API
现在我们已经知道通过 Proxy 可以拦截属性的读写操作，那然后呢？没什么用？
仅仅是拦截属性的读写操作，的确没有太大的发挥空间，或许可以方便的做一些属性赋值校验工作等等。但是，或许你还没有意识到一个惊人的秘密：Proxy 在拦截属性读写操作时，并不在乎属性是否真的存在！
那么，也就是说：利用 Proxy，我们可以拦截并不存在的属性的读取。
再进一步思考：利用 Proxy，我们可以在属性读取的那一瞬间，动态构造返回结果。
然而，属性并不局限于字符串、布尔值，属性可以是对象、函数、任何东西。
至此，你想到了什么？
没想到？不要紧！根据刚才的分析，让我们一起通过下面 17 行代码，来封装全宇宙所有的 RESTful API ！
import axios from 'axios';
const api = new Proxy({}, {
  get(target, prop) {
    const method = /^[a-z]+/.exec(prop)[0];
    const path = '/' + prop
          .substring(method.length)
          .replace(/([a-z])([A-Z])/g, '$1/$2')
          .replace(/\$/g, '/$/')
          .toLowerCase();
    return (...args) => { // <------ 返回动态构造的函数！
      const url = path.replace(/\$/g, () => args.shift());
      const options = args.shift()   关键词：JavaScript代理是啥？javascript代理的介绍