Proxy در جاوا اسکریپت

JavaScript Proxy یک object است که یک object دیگر را wrap می کند و عملیات های اساسی object هدف را intercepts می کند.

عملیات های اساسی می تواند جستجوی property ، تخصیص(assignment)، شمارش، فراخوانی تابع و غیره باشد.

ایجاد یکproxy object

برای ایجاد یک proxy object جدید،شما باید از syntax زیر استفاده کنید:

let proxy = new Proxy(target, handler);

1	let proxy = new Proxy(target, handler);

در این syntax :

target – همان object هدف که wrap شده است.
handler – یک object است که شامل متدهایی برای کنترل رفتارهای target است. متدهای داخل handler، در واقع traps نامیده می شوند.

یک مثال ساده از proxy

ابتدا یک object به نام user تعریف کنید:

const user = {
    firstName: 'John',
    lastName: 'Doe',
    email: 'john.doe@example.com',
}

const user = {

firstName: 'John',

lastName: 'Doe',

email: 'john.doe@example.com',

}

سپس یک handler object تعریف کنید:

const handler = {
    get(target, property) {
        console.log(`Property ${property} has been read.`);
        return target[property];
    }
}

const handler = {

get(target, property) {

console.log(`Property ${property} has been read.`);

return target[property];

}

در سومین گام،یک proxy ایجاد کنید:

const proxyUser = new Proxy(user, handler);

1	const proxyUser = new Proxy(user, handler);

proxyUser از user object برای ذخیره داده ها استفاده می کند. ProxyUser می تواند به تمام properties های user دسترسی داشته باشد.

سپس، از طریق proxyUser به properties های firstName و lastName شی user دسترسی پیدا کنید:

console.log(proxyUser.firstName);
console.log(proxyUser.lastName);

1 2	console.log(proxyUser.firstName); console.log(proxyUser.lastName);

خروجی :

Property firstName has been read.
John
Property lastName has been read.
Doe

Property firstName has been read.

John

Property lastName has been read.

Doe

زمانی که از طریق proxyUser به یک property از user object دسترسی پیدا می کنید،متد ()get در handler object فراخوانی می شود.

اگر شما user object را تغییر دهید،این تغییرات در proxyUser نیز منعکس و اعمال می شود:

user.firstName = 'Jane';
console.log(proxyUser.firstName);

1 2	user.firstName = 'Jane'; console.log(proxyUser.firstName);

خروجی:

Property firstName has been read.
Jane

1 2	Property firstName has been read. Jane

به طور مشابه، تغییر در proxyUser در object اصلی (user) منعکس خواهد شد:

proxyUser.lastName = 'William';
console.log(user.lastName);

1 2	proxyUser.lastName = 'William'; console.log(user.lastName);

خروجی:

William

William

Proxy Traps

`get()` trap

هنگامی که یک property از target object از طریق proxy objectقابل دسترسی باشد، ()get فراخوانی می شود.

در مثال قبلی، زمانی که یک property از user object توسط proxyUser object دسترسی پیدا می کند، پیامی چاپ می شود.

به طور کلی، شما می توانید یک منطق(logic) سفارشی را در get() trap هنگام دسترسی به یک property توسعه دهید.

به عنوان مثال، می توانید از get() trap برای تعریف computed properties برای target object استفاده کنید. computed properties ،در واقع properties هایی هستند که مقادیر آنها بر اساس مقادیر properties های موجود محاسبه می شود.

user object دارای یک property به نام fullName نیست، می توانید ازget() trap برای ایجاد fullName بر اساس propertiesهای firstName و lastName استفاده کنید:

const user = {
    firstName: 'John',
    lastName: 'Doe'
}
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/javascript-inheritance/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/Inheritance-in-javascript-300x210.jpg" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">وراثت(Inheritance) در جاوا اسکریپت</div></div></div><div class="ctaButton"></div></div></a></div>
const handler = {
    get(target, property) {
        return property === 'fullName' ?
            `${target.firstName} ${target.lastName}` :
            target[property];
    }
};

const proxyUser = new Proxy(user, handler);

console.log(proxyUser.fullName);

const user = {

firstName: 'John',

lastName: 'Doe'

}

const handler = {

get(target, property) {

return property === 'fullName' ?

`${target.firstName} ${target.lastName}` :

target[property];

}

};

const proxyUser = new Proxy(user, handler);

console.log(proxyUser.fullName);

خروجی :

John Doe

John Doe

`set()` trap

set() trap رفتار و عملیات مربوط به ایجاد و تعریف یک property برای target object را کنترل می کند.

فرض کنید سن کاربر باید بیشتر از 18 سال باشد. برای اعمال این محدودیت، یکset() trap به صورت زیر باید ایجاد کنید:

const user = {
    firstName: 'John',
    lastName: 'Doe',
    age: 20
}

const handler = {
    set(target, property, value) {
        if (property === 'age') {
            if (typeof value !== 'number') {
                throw new Error('Age must be a number.');
            }
            if (value < 18) {
                throw new Error('The user must be 18 or older.')
            }
        }
        target[property] = value;
    }
};

const proxyUser = new Proxy(user, handler);

const user = {

firstName: 'John',

lastName: 'Doe',

age: 20

}

const handler = {

set(target, property, value) {

if (property === 'age') {

if (typeof value !== 'number') {

throw new Error('Age must be a number.');

}

if (value < 18) {

throw new Error('The user must be 18 or older.')

}

target[property] = value;

}

};

const proxyUser = new Proxy(user, handler);

ابتدا سن کاربر رو به جای عدد یک string در نظر بگیرید:

proxyUser.age = 'foo';

1	proxyUser.age = 'foo';

خروجی:

Error: Age must be a number.

1	Error: Age must be a number.

سپس، سن کاربر را 16 در نظر بگیرید:

proxyUser.age = '16';

1	proxyUser.age = '16';

خروجی:

The user must be 18 or older.

1	The user must be 18 or older.

در سومین مرحله، سن کاربر را 21 در نظر بگیرید:

proxyUser.age = 21;

1	proxyUser.age = 21;

هیچ خطایی رخ نمی دهد.

`apply()` trap

متد ()handler.apply یک trap برای فراخوانی تابع است.syntax آن مشابه زیر است:

let proxy = new Proxy(target, {
    apply: function(target, thisArg, args) {
        //...
    }
});

let proxy = new Proxy(target, {

apply: function(target, thisArg, args) {

//...

}

});

به مثال زیر توجه کنید:

const user = {
    firstName: 'John',
    lastName: 'Doe'
}

const getFullName = function (user) {
    return `${user.firstName} ${user.lastName}`;
}


const getFullNameProxy = new Proxy(getFullName, {
    apply(target, thisArg, args) {
        return target(...args).toUpperCase();
    }
});

console.log(getFullNameProxy(user)); //

const user = {

firstName: 'John',

lastName: 'Doe'

}

const getFullName = function (user) {

return `${user.firstName} ${user.lastName}`;

}

const getFullNameProxy = new Proxy(getFullName, {

apply(target, thisArg, args) {

return target(...args).toUpperCase();

}

});

console.log(getFullNameProxy(user)); //

خروجی:

JOHN DOE

JOHN DOE

دیگر trap ها

موارد زیر trap های بیشتری هستند که می توانید بنا بر نیاز از آن ها استفاده کنید:

construct
getPrototypeOf
setPrototypeOf
isExtensible
preventExtensions
getOwnPropertyDescriptor

Proxy در جاوا اسکریپت

ایجاد یکproxy object

یک مثال ساده از proxy

Proxy Traps

`get()` trap

`set()` trap

`apply()` trap

دیگر trap ها

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

ایجاد یکproxy object

یک مثال ساده از proxy

Proxy Traps

get() trap

set() trap

apply() trap

دیگر trap ها

مطالب زیر را حتما مطالعه کنید

Reflection در جاوا اسکریپت

()includes در جاوا اسکریپت

endsWith در جاوا اسکریپت

startsWith در جاوا اسکریپت

()Object.is در جاوا اسکریپت

()Object.assign در جاوا اسکریپت

دیدگاهتان را بنویسید لغو پاسخ

`get()` trap

`set()` trap

`apply()` trap