ES6 中的Reflect和Proxy簡單介紹

2021-10-07 18:31:38 字數 2725 閱讀 5227

proxy 與 reflect 是 es6 為了操作物件引入的 api 。

reflect 可以用於獲取目標物件的行為,它與 object 類似,但是更易讀,為操作物件提供了一種更優雅的方式,函式式程式設計。它的方法與 proxy 是對應的。

const obj =

// reflect api方法

1.refect.set(target,propertykey,value) 給物件賦值

reflect.

set(obj,

"a",10)

; console.

log(obj)

;//

2.reflect.get(target,propertykey)取值

console.

log(reflect.

get(obj,

"a"));

//10

//沒有該屬性,則返回undefined。

function

fun(a,b)

console.

log(reflect.

(fun,

null,[

2,5]

));//7

4.reflect.defineproperty(target,propertykey);用於為目標物件定義屬性

reflect.

defineproperty

(obj,

"a",

)方法的作用與object.defineproperty一樣,都是為物件定義乙個屬性

//不同如下

// 失敗時丟擲錯誤

object.

defineproperty

(obj, name, desc)

;// 失敗時返回false

reflect.

defineproperty

(obj, name, desc)

;

5.reflect.deleteproperty(target,propertykey)用於刪除 obj 物件的 propertykey屬性

//等同於 delete obj.a

reflect.

deleteproperty

(obj,

"a")

; console.

log(obj)

;//

6.reflect.construct(target,arguments) 不使用new,來呼叫建構函式的方法。

function

test

(a,b)

const t = reflect.

construct

(test,[2

,3])

console.

log(t)

;//test

//等同於new target(...args),

7.reflect.has(target,propertykey)查詢屬性在物件中是否存在

console.

log(reflect.

has(obj,

'c'));

// false

//等同於

console.

log(

'c'in obj)

;//false

proxy 可以對目標物件的讀取、函式呼叫等操作進行攔截,然後進行操作處理。它不直接操作物件,而是像**模式,通過物件的**物件進行操作,在進行這些操作時,可以新增一些需要的額外操作。

//提供了修改底層實現的方式

let proxy =

newproxy

(target, handler)

;// target:目標物件

// handle: 乙個普通物件,可以去重寫第層方法

//會返回乙個物件

let obj =

let proxy =

newproxy

(obj,

,get

(target,propertykey)

,delete

(target,property)

,has

(target,propertykey)})

proxy.a =10;

console.

log(proxy)

;//proxy

this 問題

在 proxy **的情況下,目標物件內部的this關鍵字會指向 proxy **

const target =};

const handler =

;const proxy =

newproxy

(target, handler)

; target.m(

)// false

proxy.m(

)// true

//一旦proxy**target.m,後者內部的this就是指向proxy,而不是target。

由於this指向的變化,會導致 proxy 無法**目標物件

有些原生物件的內部屬性,只有通過正確的this才能拿到,所以 proxy 也無法**這些原生物件的屬性

深入理解 ES6中的 Reflect

reflect是es6為了操作物件而新增的api,為什麼要新增reflect物件呢?它這樣設計的目的是為了什麼?1 將object物件的一些明顯屬於語言內部的方法 比如object.defineproperty 放到reflect物件上,那麼以後我們就可以從reflect物件上可以拿到語言內部的方法...

ES6新特性 反射 Reflect

es6中將object的一些明顯屬於語言內部的方法移植到了reflect物件上。現階段,為確保前後相容性,某些方法會同時存在於object和reflect物件上 reflect不是函式物件,所以不可構造 不可以用new運算子 也不能將reflect物件作為乙個函式來呼叫 reflect reflec...

ES6學習 第十四章 Reflect

第十四章 reflect reflect物件引入目的 1.原本屬於object物件內部方法一些方法放到reflect上,如object.defineproperty 2.修改某些object物件的返回結果,object.defineproperty obj,name,desc 在無法定義屬性時,會丟...