昔登銅井望法華，蔥蘢螺黛浮蒹葭。今登法華望銅井，湖水迷茫煙色瞑。-- 《登法華寺山頂》

Proxy是什么

Proxy是JS標準內(nèi)置對象中的一個對象。用于創(chuàng)建一個對象的代理。從而實現(xiàn)對對象操作的攔截及自定義，功能類似于Object.defineProperty();

Proxy語法解讀

const?res?=?new?Proxy(target,handler);

• target表示要包裝的目標對象，可以是任意類型數(shù)組，函數(shù)，對象...。
• handler通常是一個函數(shù)作為屬性的對象，比如{get:function(obj,prop){...}}

handler通常有以下幾個方法

• hander.get(target,property,receiver)。target表示目標對象。property表示被獲取的屬性名。receiver表示Proxy或者繼承Proxy的對象。這個方法可以用來攔截屬性值得讀取操作。

const?res?=?new?Proxy({},?{
??get:?function(target,?prop,?receiver)?{
????console.log("called:?"?+?prop);
????return?'test';
??}
});

console.log(res.a);?//?"called:?a"
??????????????????//?test

• handler.set(target, property, val)。target表示目標對象。property表示被設(shè)置的屬性名。val表示新的屬性值。這個方法可以用來設(shè)置屬性值得讀取操作。

const?res?=?new?Proxy({},?{
??set:?function(target,?prop,?val)?{
????target[prop]?=?val
????return?true;
??}
});
res.test?=?'123'
console.log(res.test);//123

Vue中的proxy.js文件

/*?not?type?checking?this?file?because?flow?doesn't?play?well?with?Proxy?*/

import?config?from?'core/config'
import?{?warn,?makeMap?}?from?'../util/index'

let?initProxy

if?(process.env.NODE_ENV?!==?'production')?{
??const?allowedGlobals?=?makeMap(
????'Infinity,undefined,NaN,isFinite,isNaN,'?+
????'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,'?+
????'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,'?+
????'require'?//?for?Webpack/Browserify
??)

??const?warnNonPresent?=?(target,?key)?=>?{
????warn(
??????`Property?or?method?"${key}"?is?not?defined?on?the?instance?but?`?+
??????'referenced?during?render.?Make?sure?that?this?property?is?reactive,?'?+
??????'either?in?the?data?option,?or?for?class-based?components,?by?'?+
??????'initializing?the?property.?'?+
??????'See:?https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.',
??????target
????)
??}

??const?hasProxy?=
????typeof?Proxy?!==?'undefined'?&&
????Proxy.toString().match(/native?code/)

??if?(hasProxy)?{
????const?isBuiltInModifier?=?makeMap('stop,prevent,self,ctrl,shift,alt,meta,exact')
????config.keyCodes?=?new?Proxy(config.keyCodes,?{
??????set?(target,?key,?value)?{
????????if?(isBuiltInModifier(key))?{
??????????warn(`Avoid?overwriting?built-in?modifier?in?config.keyCodes:?.${key}`)
??????????return?false
????????}?else?{
??????????target[key]?=?value
??????????return?true
????????}
??????}
????})
??}

??const?hasHandler?=?{
????has?(target,?key)?{
??????const?has?=?key?in?target
??????const?isAllowed?=?allowedGlobals(key)?||?key.charAt(0)?===?'_'
??????if?(!has?&&?!isAllowed)?{
????????warnNonPresent(target,?key)
??????}
??????return?has?||?!isAllowed
????}
??}

??const?getHandler?=?{
????get?(target,?key)?{
??????if?(typeof?key?===?'string'?&&?!(key?in?target))?{
????????warnNonPresent(target,?key)
??????}
??????return?target[key]
????}
??}

??initProxy?=?function?initProxy?(vm)?{
????if?(hasProxy)?{
??????//?determine?which?proxy?handler?to?use
??????const?options?=?vm.$options
??????const?handlers?=?options.render?&&?options.render._withStripped
??????????getHandler
????????:?hasHandler
??????vm._renderProxy?=?new?Proxy(vm,?handlers)
????}?else?{
??????vm._renderProxy?=?vm
????}
??}
}

export?{?initProxy?}

makeMap()方法。

這個方法創(chuàng)建了一個Map結(jié)構(gòu)，并且返回了一個方法用來檢測指定的key是否在這個Map中。

export?function?makeMap?(
??str:?string,
??expectsLowerCase?:?boolean):?(key:?string)?=>?true?|?void?{
??const?map?=?Object.create(null)
??const?list:?Array?=?str.split(',')for?(let?i?=?0;?i?????map[list[i]]?=?true
??}return?expectsLowerCase
??????val?=>?map[val.toLowerCase()]
????:?val?=>?map[val]
}

接下來判斷瀏覽器是否支持proxy

const?hasProxy?=
????typeof?Proxy?!==?'undefined'?&&
????Proxy.toString().match(/native?code/)

之后將配置中keycodes做一層代理

const?isBuiltInModifier?=?makeMap('stop,prevent,self,ctrl,shift,alt,meta,exact')
????config.keyCodes?=?new?Proxy(config.keyCodes,?{
??????set?(target,?key,?value)?{
????????if?(isBuiltInModifier(key))?{
??????????warn(`Avoid?overwriting?built-in?modifier?in?config.keyCodes:?.${key}`)
??????????return?false
????????}?else?{
??????????target[key]?=?value
??????????return?true
????????}
??????}
????})
??}

之后定義hasHandler和getHandler

const?hasHandler?=?{
????has?(target,?key)?{
??????const?has?=?key?in?target
??????const?isAllowed?=?allowedGlobals(key)?||?key.charAt(0)?===?'_'
??????if?(!has?&&?!isAllowed)?{
????????warnNonPresent(target,?key)
??????}
??????return?has?||?!isAllowed
????}
??}

??const?getHandler?=?{
????get?(target,?key)?{
??????if?(typeof?key?===?'string'?&&?!(key?in?target))?{
????????warnNonPresent(target,?key)
??????}
??????return?target[key]
????}
??}

最后，定義了initProxy方法。

將vue實例vm作為參數(shù)，根據(jù)實例的options.render切換了hander,然后有在vm實例上定義了_renderProxy作為vm的代理。

initProxy?=?function?initProxy?(vm)?{
????if?(hasProxy)?{
??????//?determine?which?proxy?handler?to?use
??????const?options?=?vm.$options
??????const?handlers?=?options.render?&&?options.render._withStripped
??????????getHandler
????????:?hasHandler
??????vm._renderProxy?=?new?Proxy(vm,?handlers)
????}?else?{
??????vm._renderProxy?=?vm
????}
??}

那么問題來了，options.render是個什么鬼？

明天接著看看吧。

最后說兩句

動一動您的小手，「點個贊吧」

都看到這里了，不妨 ?「掃碼加個關(guān)注」

javascript基礎(chǔ)知識總結(jié)

總結(jié)

以上是生活随笔為你收集整理的vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。