JavaScript中的Proxy-Reflect操作方法

更新時間：2023年11月06日 10:14:11 作者：coder!mq

這篇文章主要介紹了JavaScript中的Proxy-Reflect操作方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

一、監(jiān)聽對象的操作

我們先來看一個需求：有一個對象，我們希望監(jiān)聽這個對象中的屬性被設置或獲取的過程

通過我們前面所學的知識，能不能做到這一點呢？
其實是可以的，我們可以通過之前的屬性描述符中的存儲屬性描述符來做到；監(jiān)聽對象的操作

左邊這段代碼就利用了前面講過的 Object.defineProperty 的存儲屬性描述符來對屬性的操作進行監(jiān)聽。

const obj = {
    name: "why",
    age: 18,
    height: 1.88
}
// 需求: 監(jiān)聽對象屬性的所有操作
// 監(jiān)聽屬性的操作
// 1.針對一個屬性
// let _name = obj.name
// Object.defineProperty(obj, "name", {
//   set: function(newValue) {
//     console.log("監(jiān)聽: 給name設置了新的值:", newValue)
//     _name = newValue
//   },
//   get: function() {
//     console.log("監(jiān)聽: 獲取name的值")
//     return _name
//   }
// })
// 2.監(jiān)聽所有的屬性: 遍歷所有的屬性, 對每一個屬性使用defineProperty
const keys = Object.keys(obj)
for (const key of keys) {
    let value = obj[key]
    Object.defineProperty(obj, key, {
        set: function(newValue) {
            console.log(`監(jiān)聽: 給${key}設置了新的值:`, newValue)
            value = newValue
        },
        get: function() {
            console.log(`監(jiān)聽: 獲取${key}的值`)
            return value
        }
    })
}
// console.log(obj.name)
// obj.name = "kobe"
console.log(obj.age)
obj.age = 17
console.log(obj.age)

但是這樣做有什么缺點呢？

首先，Object.defineProperty設計的初衷，不是為了去監(jiān)聽截止一個對象中所有的屬性的。
- 我們在定義某些屬性的時候，初衷其實是定義普通的屬性，但是后面我們強行將它變成了數(shù)據(jù)屬性描述符。
其次，如果我們想監(jiān)聽更加豐富的操作，比如新增屬性、刪除屬性，那么 Object.defineProperty是無能為力的。

所以我們要知道，存儲數(shù)據(jù)描述符設計的初衷并不是為了去監(jiān)聽一個完整的對象。

二、Proxy類基本使用

在ES6中，新增了一個Proxy類，這個類從名字就可以看出來，是用于幫助我們創(chuàng)建一個代理的：

也就是說，如果我們希望監(jiān)聽一個對象的相關(guān)操作，那么我們可以先創(chuàng)建一個代理對象（Proxy對象）；
之后對該對象的所有操作，都通過代理對象來完成，代理對象可以監(jiān)聽我們想要對原對象進行哪些操作；

我們可以將上面的案例用Proxy來實現(xiàn)一次：

首先，我們需要new Proxy對象，并且傳入需要偵聽的對象以及一個處理對象，可以稱之為handler；
- const p = new Proxy(target, handler)
其次，我們之后的操作都是直接對Proxy的操作，而不是原有的對象，因為我們需要在handler里面進行偵聽；

const obj = {
    name: "why",
    age: 18,
    height: 1.88
}
// 1.創(chuàng)建一個Proxy對象
const objProxy = new Proxy(obj, {
    set: function(target, key, newValue) {
        console.log(`監(jiān)聽: 監(jiān)聽${key}的設置值: `, newValue)
        target[key] = newValue
    },
    get: function(target, key) {
        console.log(`監(jiān)聽: 監(jiān)聽${key}的獲取`)
        return target[key]
    }
})
// 2.對obj的所有操作, 應該去操作objProxy
// console.log(objProxy.name)
// objProxy.name = "kobe"
// console.log(objProxy.name)
// objProxy.name = "james"
objProxy.address = "廣州市"
console.log(objProxy.address)

三、Proxy常見捕獲器

1.Proxy的set和get捕獲器

如果我們想要偵聽某些具體的操作，那么就可以在handler中添加對應的捕捉器（Trap）：

set和get分別對應的是函數(shù)類型；

set函數(shù)有四個參數(shù)：
- target：目標對象（偵聽的對象）；
- property：將被設置的屬性key；
- value：新屬性值；
- receiver：調(diào)用的代理對象；
get函數(shù)有三個參數(shù)：
- target：目標對象（偵聽的對象）；
- property：被獲取的屬性key；
- receiver：調(diào)用的代理對象；

2.Proxy其它捕獲器

13個捕獲器分別是做什么的呢？

handler.getPrototypeOf()

Object.getPrototypeOf 方法的捕捉器。

handler.setPrototypeOf()

Object.setPrototypeOf 方法的捕捉器。

handler.isExtensible()

Object.isExtensible 方法的捕捉器(判斷是否可以新增屬性)。

handler.preventExtensions()

Object.preventExtensions 方法的捕捉器。

handler.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor 方法的捕捉器。

handler.defineProperty()

Object.defineProperty 方法的捕捉器。 Proxy所有捕獲器

handler.ownKeys()

Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。

handler.has()

in 操作符的捕捉器。

handler.get()

屬性讀取操作的捕捉器。

handler.set()

屬性設置操作的捕捉器。

handler.deleteProperty()

delete 操作符的捕捉器。

handler.apply()

函數(shù)調(diào)用操作的捕捉器。
handler.construct()
new 操作符的捕捉器。

const obj = {
    name: "why",
    age: 18,
    height: 1.88
}
// 1.創(chuàng)建一個Proxy對象
const objProxy = new Proxy(obj, {
    set: function(target, key, newValue) {
        console.log(`監(jiān)聽: 監(jiān)聽${key}的設置值: `, newValue)
        target[key] = newValue
    },
    get: function(target, key) {
        console.log(`監(jiān)聽: 監(jiān)聽${key}的獲取`)
        return target[key]
    },
    deleteProperty: function(target, key) {
        console.log(`監(jiān)聽: 監(jiān)聽刪除${key}屬性`)
        delete obj.name
    },
    has: function(target, key) {
        console.log(`監(jiān)聽: 監(jiān)聽in判斷 ${key}屬性`)
        return key in target
    }
})
delete objProxy.name
console.log("age" in objProxy)

3.Proxy的construct和apply

當然，我們還會看到捕捉器中還有construct和apply，它們是應用于函數(shù)對象的：

function foo(num1, num2) {
    console.log(this, num1, num2)
}
const fooProxy = new Proxy(foo, {
    apply: function(target, thisArg, otherArgs) {
        console.log("監(jiān)聽執(zhí)行了apply操作")
        target.apply(thisArg, otherArgs)
    },
    construct: function(target, otherArray) {
        console.log("監(jiān)聽執(zhí)行了new操作")
        console.log(target, otherArray)
        return new target(...otherArray)
    }
})
// fooProxy.apply("abc", [111, 222])
new fooProxy("aaa", "bbb")

四、Reflect介紹和作用

Reflect也是ES6新增的一個API，它是一個對象，字面的意思是反射。

那么這個Reflect有什么用呢？

它主要提供了很多操作JavaScript對象的方法，有點像Object中操作對象的方法；
比如Reflect.getPrototypeOf(target)類似于 Object.getPrototypeOf()；
比如Reflect.defineProperty(target, propertyKey, attributes)類似于Object.defineProperty() ；

如果我們有Object可以做這些操作，那么為什么還需要有Reflect這樣的新增對象呢？

這是因為在早期的ECMA規(guī)范中沒有考慮到這種對 對象本身 的操作如何設計會更加規(guī)范，所以將這些API放到了Object上面；
但是Object作為一個構(gòu)造函數(shù)，這些操作實際上放到它身上并不合適；
另外還包含一些類似于 in、delete操作符，讓JS看起來是會有一些奇怪的；
所以在ES6中新增了Reflect，讓我們這些操作都集中到了Reflect對象上；
另外在使用Proxy時，可以做到不操作原對象；

那么Object和Reflect對象之間的API關(guān)系，可以參考MDN文檔：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods

Object和Reflect之間的區(qū)別：Reflect有返回值

"use strict"
const obj = {
    name: "why",
    age: 18
}
Object.defineProperty(obj, "name", {
    configurable: false
})
// Reflect.defineProperty()
// 1.用以前的方式進行操作
// delete obj.name
// if (obj.name) {
//   console.log("name沒有刪除成功")
// } else {
//   console.log("name刪除成功")
// }
// 2.Reflect
if (Reflect.deleteProperty(obj, "name")) {
    console.log("name刪除成功")
} else {
    console.log("name沒有刪除成功")
}

五、Reflect的基本使用

Reflect中有哪些常見的方法呢？它和Proxy是一一對應的，也是13個：

Reflect.getPrototypeOf(target)

類似于 Object.getPrototypeOf()。

Reflect.setPrototypeOf(target, prototype)

設置對象原型的函數(shù). 返回一個 Boolean，如果更新成功，則返回 true。

Reflect.isExtensible(target)

類似于 Object.isExtensible()

Reflect.preventExtensions(target)

類似于 Object.preventExtensions()。返回一個Boolean。

Reflect.getOwnPropertyDescriptor(target, propertyKey)

類似于 Object.getOwnPropertyDescriptor()。如果對象中存在該屬性，則返回對應的屬性描述符, 否則返回 undefined.

Reflect.defineProperty(target, propertyKey, attributes)

和 Object.defineProperty() 類似。如果設置成功就會返回 true Reflect的常見方法

Reflect.ownKeys(target)

返回一個包含所有自身屬性（不包含繼承屬性）的數(shù)組。(類似于 Object.keys(), 但不會受enumerable影響).

Reflect.has(target, propertyKey)

判斷一個對象是否存在某個屬性，和 in 運算符的功能完全相同。

Reflect.get(target, propertyKey[, receiver])

獲取對象身上某個屬性的值，類似于 target[name]。

Reflect.set(target, propertyKey, value[, receiver])

將值分配給屬性的函數(shù)。返回一個Boolean，如果更新成功，則返回true。

Reflect.deleteProperty(target, propertyKey)

作為函數(shù)的delete操作符，相當于執(zhí)行 delete target[name]。

Reflect.apply(target, thisArgument, argumentsList)

對一個函數(shù)進行調(diào)用操作，同時可以傳入一個數(shù)組作為調(diào)用參數(shù)。和 Function.prototype.apply() 功能類似。

Reflect.construct(target, argumentsList[, newTarget])

對構(gòu)造函數(shù)進行 new 操作，相當于執(zhí)行 new target(…args)。

那么我們可以將之前Proxy案例中對原對象的操作，都修改為Reflect來操作：

const obj = {
    name: "why",
    age: 18
}
const objProxy = new Proxy(obj, {
    set: function(target, key, newValue, receiver) {
        // target[key] = newValue
        // 1.好處一: 代理對象的目的: 不再直接操作原對象
        // 2.好處二: Reflect.set方法有返回Boolean值, 可以判斷本次操作是否成功
        const isSuccess = Reflect.set(target, key, newValue)
        if (!isSuccess) {
            throw new Error(`set ${key} failure`)
        }
    },
    get: function(target, key, receiver) {
    }
})
// 操作代理對象
objProxy.name = "kobe"
console.log(obj)

1.Reflect的receiver

我們發(fā)現(xiàn)在使用getter、setter的時候有一個receiver的參數(shù)，它的作用是什么呢？

如果我們的源對象（obj）有setter、getter的訪問器屬性，那么可以通過receiver來改變里面的this；

const obj = {
    _name: "why",
    set name(newValue) {
        console.log("this:", this) // 默認是obj
        this._name = newValue
    },
    get name() {
        return this._name
    }
}
// obj.name = "aaaa"
// console.log(obj.name)
// obj.name = "kobe"
const objProxy = new Proxy(obj, {
    set: function(target, key, newValue, receiver) {
        // target[key] = newValue
        // 1.好處一: 代理對象的目的: 不再直接操作原對象
        // 2.好處二: Reflect.set方法有返回Boolean值, 可以判斷本次操作是否成功
        /*
           3.好處三:
             > receiver就是外層Proxy對象
             > Reflect.set/get最后一個參數(shù), 可以決定對象訪問器setter/getter的this指向
        */
        console.log("proxy中設置方法被調(diào)用" + key)
        const isSuccess = Reflect.set(target, key, newValue, receiver)
        if (!isSuccess) {
            throw new Error(`set ${key} failure`)
        }
    },
    get: function(target, key, receiver) {
        console.log("proxy中獲取方法被調(diào)用")
        return Reflect.get(target, key, receiver)
    }
})
// 操作代理對象
objProxy.name = "kobe"
console.log(objProxy.name)

2.Reflect的construct

function Person(name, age) {
    this.name = name
    this.age = age
}
function Student(name, age) {
    // Person.call(this, name, age)
    const _this = Reflect.construct(Person, [name, age], Student)
    return _this
}
// const stu = new Student("why", 18)
const stu = new Student("why", 18)
console.log(stu)
console.log(stu.__proto__ === Student.prototype)

到此這篇關(guān)于JavaScript中的Proxy-Reflect詳解的文章就介紹到這了,更多相關(guān)JavaScript Proxy-Reflect內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: