《深切明白ES6》笔记——代办（Proxy）和反射（Reflection）API（12）

2019年8月25日 105次阅读 来源: 二月

反射 Reflect

当你见到一个新的API，不明白的时刻，就在浏览器打印出来看看它的模样。

《《深切明白ES6》笔记——代办（Proxy）和反射（Reflection）API（12）》

反射的观点

Reflect 是一个内置的对象，它供应可阻拦JavaScript操纵的要领。要领与代办处置惩罚顺序的要领雷同。Reflect 不是一个函数对象，因而它是不可组织的。

    new Reflect() //毛病的写法

反射的运用

Reflect供应了一些静态要领，静态要领是指只能经由过程对象本身接见的的要领，这个学问在前面几章解说过。一切要领的细致剖析，前去 Reflect详解 检察。

静态要领列表：这么多静态要领，你须要学会的是怎样运用它们。

1、Reflect.apply()
2、Reflect.construct()
3、Reflect.defineProperty()
4、Reflect.deleteProperty()
5、Reflect.enumerate()
6、Reflect.get()
7、Reflect.getOwnPropertyDescriptor()
8、Reflect.getPrototypeOf()
9、Reflect.has()
10、Reflect.isExtensible()
11、Reflect.ownKeys()
12、Reflect.preventExtensions()
13、Reflect.set()
14、Reflect.setPrototypeOf()

静态要领的运用：

demo1：运用Reflect.get()猎取目的对象指定key的value。

let obj = {
    a: 1
};

let s1 = Reflect.get(obj, "a")
console.log(s1) // 1

demo2:运用Reflect.apply给目的函数floor传入指定的参数。

const s2 = Reflect.apply(Math.floor, undefined, [1.75]); 
console.log(s2) // 1

进一步明白Reflect

看了上面的例子和要领，我们晓得Reflect能够阻拦JavaScript代码，包含阻拦对象，阻拦函数等，然后对阻拦到的对象或许函数举行读写等操纵。

比方demo1的get()要领，阻拦obj对象，然后读取key为a的值。固然，不必反射也能够读取a的值。

再看demo2的apply()要领，这个要领你应当比较了解了，和数组中运用apply差别的是，Reflect.apply()供应了3个参数，第一个参数是反射的函数，背面2个参数才是和数组的apply一致。demo2的例子我们能够明白成是阻拦了Math.floor要领，然后传入参数，将返回值赋值给s2，如许我们就能在须要读取这个返回值的时刻挪用s2。

//数组运用apply
const arr = [1, 2, 3]
function a() {
  return Array.concat.apply(null, arguments)
}
const s = a(arr)
console.log(s) // [1, 2 ,3]

实在Reflect的作用和我们下面要讲的Proxy是差不多的。

代办 Proxy

Proxy这个词相信你已听过无数遍了，我曾写过一篇webpack运用代办来阻拦指定域的API要求，转发到新的目的URL的文章 webpack中运用proxy。然则注重Proxy和proxy，大小写字母之间是差别的。本章讲的是大写字母开首的Proxy。

《《深切明白ES6》笔记——代办（Proxy）和反射（Reflection）API（12）》

语法

let p = new Proxy(target, handler);

target：一个目的对象(能够是任何范例的对象，包含本机数组，函数，以至另一个代办)用Proxy来包装。
handler：一个对象，其属性是当实行一个操纵时定义代办的行动的函数。

代办的运用

基本demo：Proxy的demo有许多，我们只剖析基本demo，主要看new Proxy({}, handler)的操纵，指定目的obj对象，然后handler对象实行get()操纵，get()返回值的推断是，假如name是target目的对象的属性，则返回target[name]的值，不然返回37，末了测试的时刻，p.a是对象p的key，所以返回a的value，而p.b不存在，返回37。

const obj = {
  a: 10
}
let handler = {
    get: function(target, name){
        console.log('test: ', target, name)
        // test:  {"a":10} a
        // test:  {"a":10} b
        return name in target ? target[name] : 37
    }
}
let p = new Proxy(obj, handler)
console.log(p.a, p.b) // 10 37

这个例子的作用是阻拦目的对象obj，当实行obj的读写操纵时，进入handler函数举行推断，假如读取的key不存在，则返回默认值。

我们运用一些http-proxy插件或许webpack的时刻，有时刻须要接见某个api时，跳转到指定的url，这类体式格局也能处理跨域接见。这类代办形式和Proxy的代办有异曲同工之妙。然则，别混为一体了。

module.exports = {
    devServer: {
       proxy: [
           {
                context: "/api/*", //代办API
                target: 'https://www.hyy.com', //目的URL
                secure: false
          }
       ]
    }
}

总结

无论是反射照样代办，除了他们运用要领差别以外，他们所作的事变异常类似，都能够明白成阻拦某个东西，然后实行某个函数操纵，再返回函数操纵的效果。

大部分前端在一样平常营业需求中，险些很少运用到这2个API，实际运用场景还得在今后的开辟中逐步发掘。

=> 返回文章目次

    原文作者：二月
    原文地址: https://segmentfault.com/a/1190000010471230
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞