ECMAScript 6入門Proxy與Reflect(上)

DevTTL 發布于2019-08-23 14:25 / 2425人閱讀

摘要：與學習的新語法糖既能學習到新東西，又能使得自己的代碼更加優雅，逼格更高，爽與之間的運用就是對對象的操作觸發的攔截是對對象進行代理，通過生成的對象間接操作原本對象，最常見的就是與語法形式是需要操作的對象，而是包含操作對象的一些方法的對象是能夠

Proxy與Reflect

學習es6的新語法糖既能學習到新東西，又能使得自己的代碼更加優雅，逼格更高，爽
proxy與Reflect之間的運用就是Reflect對對象的操作觸發Proxy的攔截

Proxy是對對象進行代理，通過proxy生成的對象間接操作原本對象，最常見的就是get與set；語法形式var proxy = new Proxy(target, handler); target是需要操作的對象，而handler是包含操作target對象的一些方法的對象

Reflect是能夠更加優雅的使用Object的相關方法

學習API

get

proxy: get(target, propKey, receiver)=>依次為目標對象、屬性名和 proxy 實例本身（嚴格地說，是操作行為所針對的對象），其中最后一個參數可選。

let obj = {
    a: "foo",
    b: "Proxy",
    foo: ""
 }
let proxy = new Proxy(obj, {
    get (target, proKey, receive) {
      console.log(target === obj)     //true
      return "當對proxy進行取值操作時會觸發這個get函數"
      
    }
 })

ps:proxy對target進行了代理，target就是obj對象，receive用于規定this到底指向哪個對象，

proxy.foo   //當對proxy進行取值操作時會觸發這個get函數

上面這種情況并沒有改變this的，所以console.log(receive === proxy) //true
Reflect也有get方法：Reflect.get(target, prokey, receive)

Reflect.get(proxy, "foo") //同上沒有this的指向

let newobj = {
    foo: "this指向將改變"
}
Reflect.get(proxy, "foo", newobj)  //foo = console.log(receive === proxy)  //true

所以對Reflect.get的第三個參數進行賦值將帶入帶proxy的get的第三個參數中

set

與get類似，這個是賦值時會觸發set方法
proxy: set(target, propKey, value, receiver)

  let obj = {}
  let newobj = {
    a: "123"
  }
  let proxy = new Proxy(obj, {
    set (target, proKey, value, receive) {
      return target[proKey] = `當對proxy進行賦值操作時會觸發這個set函數${value}`
      
    }
  })
  proxy.a = 666      //receive === proxy  true
  Reflect.set(proxy, "a", 888)          //receive === proxy  true
  Reflect.set(proxy, "a", 888, newobj)  //receive === newobj  true

apply

proxy的apply：apply(target, object, args)

  let twice = {
    apply (target, ctx, args) {
      console.log(ctx)    //undefined
      return Reflect.apply(...arguments);
    }
  }
  function sum (left, right) {
    this.num = 888  /如果ctx沒有傳入或者傳入null，則會進行window.num = 888的賦值
    return left + right + this.nm
  }
  let obj = {
   nm: 666
  }
  var proxy = new Proxy(sum, twice);
  console.log(proxy(1, 2)) // 6
  console.log(proxy.apply(obj, [7, 8]))  //ctx則為obj,并改變return

執行流程：proxy觸發函數調用，執行apply的方法，將參數自動帶入，target就是sum函數，ctx沒有傳入為undefined,args為1, 2,接下來將全部參數帶入執行Reflect.apply

has

has比較簡單，是對對象進行in運算，判斷該屬性是否存在對象中，可以是自身也可以是原型鏈上，不管是否可遍歷

construct

在構造函數new時觸發，

  var p = new Proxy(function () {}, {
    construct: function(target, args, newTarget) {
      console.log("called: " + args.join(", "));
      console.log(newTarget === p)
      return { value: args[0] * 10 };
    }
  });

  console.log((new p(1)).value)
  //等價于下面，Reflect.construct(target, args)， args必須是數組
  console.log(Reflect.construct(p, [1]))

ownKeys

返回對象中自身的所有屬性，當然具體還是取決于return 什么內容；

觸發條件：
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.keys()
for...in循環

let target = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.for("secret")]: "4",
};

Object.defineProperty(target, "key", {
  enumerable: false,
  configurable: true,
  writable: true,
  value: "static"
});

let handler = {
  ownKeys(target) {
    return ["a", "d", Symbol.for("secret"), "key"];
  }
};

let proxy = new Proxy(target, handler);
console.log(Object.keys(proxy))    //自動過濾symbol，不存在的屬性，不可遍歷的屬性
console.log(Reflect.ownKeys(proxy)) //返回handler中return的值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100585.html

【資源集合】 ES6 元編程（Proxy & Reflect & Symbol）

摘要：理解元編程和是屬于元編程范疇的，能介入的對象底層操作進行的過程中，并加以影響。元編程中的元的概念可以理解為程序本身。中，便是兩個可以用來進行元編程的特性。在之后，標準引入了，從而提供比較完善的元編程能力。導讀幾年前 ES6 剛出來的時候接觸過元編程（Metaprogramming）的概念，不過當時還沒有深究。今天在應用和學習中不斷接觸到這概念，比如 mobx 5 中就用到了 Pr...

aikin 2019-08-23 11:28 評論0 收藏0
ECMAScript6(12)：Proxy 和 Reflect

摘要：返回一個布爾值攔截操作符，返回一個布爾值攔截操作符，返回一個布爾值攔截遍歷器，返回一個遍歷器攔截，返回一個布爾值攔截，返回一個數組。 Proxy 對象 Proxy 用來修改某些默認操作，等同于在語言層面做出修改。所以屬于一種元編程(meta programming), 即對編程語言進行編程。字面理解為Proxy代理了某些默認的操作。其使用格式如下： var proxy = new Pr...

habren 2019-08-23 11:46 評論0 收藏0
從ES6重新認識JavaScript設計模式(五): 代理模式和Proxy

摘要：此時，鏈家起到的作用就是代理的作用。驗證代理構造函數第二個參數中的方法，可以很方便的驗證向一個對象的傳值。 1 什么是代理模式 showImg(https://segmentfault.com/img/remote/1460000015800706?w=1262&h=464); 為其他對象提供一種代理以控制對這個對象的訪問。在某些情況下，一個對象不適合或者不能直接引用另一個對象，而代理...

verano 2019-08-23 10:27 評論0 收藏0
[譯] ES6 學習筆記：關于 ES2015 特性的詳細概述

摘要：將轉換成常見的使用實現的基于迭代器的迭代。處停止迭代器基于鴨子模型接口這里使用語法僅僅為了說明問題使用支持為了使用迭代器屬性需要引入。生成器是迭代器的子類，包含了附加的與。原文地址：http://babeljs.io/docs/learn-...本文基于Luke Hoban精妙的文章《es6features》，請把star獻給他，你可以在此嘗試這些特性REPL。概述 ECMAScr...

leoperfect 2019-08-20 10:24 評論0 收藏0
重溫ES6核心概念和基本用法

摘要：凡是部署了屬性的數據結構，就稱為部署了遍歷器接口。調用這個接口，就會返回一個遍歷器對象。 ES6在2015年6月就得以批準，至今已兩年了。近一年多以來陸續看過很多ES6的資料，工作項目中也逐步的用上了很多ES6的特性（let,const,promise,Template strings,Class,箭頭函數等等），不得不說，這些特性給開發帶來了非常多的便利。但是做決定我的ES6知識其...

philadelphia 2019-08-20 17:27 評論0 收藏0