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

Proxy是什么

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

Proxy語(yǔ)法解讀

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

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

handler通常有以下幾個(gè)方法

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

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表示目標(biāo)對(duì)象。property表示被設(shè)置的屬性名。val表示新的屬性值。這個(gè)方法可以用來(lái)設(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()方法。

這個(gè)方法創(chuàng)建了一個(gè)Map結(jié)構(gòu)，并且返回了一個(gè)方法用來(lái)檢測(cè)指定的key是否在這個(gè)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]
}

接下來(lái)判斷瀏覽器是否支持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實(shí)例vm作為參數(shù)，根據(jù)實(shí)例的options.render切換了hander,然后有在vm實(shí)例上定義了_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
????}
??}

那么問(wèn)題來(lái)了，options.render是個(gè)什么鬼？

明天接著看看吧。

最后說(shuō)兩句

動(dòng)一動(dòng)您的小手，「點(diǎn)個(gè)贊吧」

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

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

總結(jié)

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

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