متد bind در جاوا اسکریپت

در این آموزش متد bind() را با مثال های کاربردی منحصربه‌فرد بررسی می کنیم.

تنظیم مقدار this برای یک تابع

یکی از کاربردهای اولیه متد ()bind تنظیم مقدار this یک تابع به یک Object خاص بدون تغییر تابع اصلی است. این به ویژه زمانی مفید است که می خواهید یک تابع با یک Object خاص کار کند اما نمی خواهید خود تابع را تغییر دهید.

const projects = new Projects()
projects.display()

const studentA = {
    name: 'Sophia',
    score: 85,
    result() {
        console.log(`${this.name}'s score is ${this.score}.`)
    }
}

const studentB = {
    name: 'Lucas',
    score: 92
}

const boundResult = studentA.result.bind(studentB)

boundResult() // Lucas's score is 92.

در این مثال، یک Object studentA با متد result() داریم که از کلمه کلیدی this برای اشاره به Object استفاده می کند. ما همچنین یک Object دیگر، studentB، با ویژگی های name و score داریم. با فراخوانی متد ()bind در studentA.result()، studentB را به عنوان مقدار this ارسال می کنیم و آن را به طور موثر به studentB متصل می کنیم. هنگامی که boundResult() فراخوانی می شود، کلمه کلیدی this در تابع به جای studentA به studentB اشاره می کند.

ایجاد تابع با آرگومان های از پیش تعیین شده

متد bind() به شما امکان می دهد یک تابع جدید با آرگومان های از پیش تایین شده ایجاد کنید. این می تواند زمانی مفید باشد که به یک تابع نیاز دارید که همیشه از آرگومان های خاص بدون تغییر تابع اصلی استفاده کند.

function multiply(x, y) {
    return x * y
}

const multiplyByFive = multiply.bind(null, 5)

console.log(multiplyByFive(3)) // 15
console.log(multiplyByFive(4)) // 20

در این مثال، تابع multiply() دو آرگومان را می گیرد و حاصل جمع آنها را برمی گرداند. سپس یک تابع جدید، multiplyByFive() با فراخوانی bind() روی multiply() ایجاد می کنیم. ما null را به عنوان مقدار this و 5 را به عنوان اولین آرگومان پاس می کنیم. این تضمین می کند که وقتی multiplyByFive() فراخوانی می شود، همیشه آرگومان ارسال شده را در 5 ضرب می کند، بدون نیاز به تغییر تابع multiply() اصلی.

استفاده از bind() با کنترل کننده رویداد

متد bind() همچنین می‌تواند هنگام کار با event handler ها مفید باشد، زیرا به شما امکان می‌دهد مقدار this را در تابع handler تنظیم کنید. این می تواند به ویژه هنگام استفاده از متد های Object به عنوان event handler مفید باشد.

const buttonController = {
    button: document.getElementById('myButton'),
    message: 'Button clicked!',
    handleClick() {
        console.log(this.message)
    },
    init() {
        this.button.addEventListener('click', this.handleClick.bind(this))
    }
}

buttonController.init()

در این مثال، ما یک Object buttonController داریم که شامل متد handleClick() برای ثبت پیام در هنگام کلیک روی دکمه است. با استفاده از bind() برای تنظیم مقدار this در متد handleClick()، اطمینان حاصل می کنیم که this.message به مقدار message آبجکت buttonController اشاره می کند.

کاربرد جزئی bind()

متد ()bind به شما اجازه می دهد تا به طور جزئی از آرگومان ها استفاده کنید و شما را قادر می سازد که تعداد مشخصی از آرگومان ها را برای یک تابع بصورت ثابت ارسال کنید، در حالی که بقیه آرگومان ها را بعداً ارسال کنید. این می تواند برای ایجاد نسخه های تخصصی تر از توابع معمولی کاربردی باشد.

function product(a, b, c) {
    return a * b * c
}

const doubleProduct = product.bind(null, 2)

console.log(doubleProduct(3, 4)) // 24 (2 * 3 * 4)
console.log(doubleProduct(5, 6)) // 60 (2 * 5 * 6)

در این مثال یک تابع product() داریم که یه آرگومان می گیرد و حاصل ضرب آنها را برمی گرداند. سپس تابع doubleProduct() با فراخوانی bind() روی product() اولین آرگومان را بصورت 2 ثابت ارسال می کند. و این باعث می شود دو آرگان بعدی را بعدا ارسال و حاصل ضرب آنها را برگرداند.