Вызов, привязка и применение в JavaScript

Привет Пипс, тема, которую мы собираемся обсудить, очень важна для понимания многих концепций в JavaScript и для интервью. Я узнал об этом на канале Akshay Saini на YouTube. Ссылкой на видео я поделюсь в конце поста.

В приведенном ниже примере будет объект name1 и функция PrintFullName, которая будет отображать полное имя. PrintFullName имеет доступ к объекту name1 при условии, что он имеет функцию () {}. То же самое вернет undefined, если вы используете функцию стрелки в качестве функции стрелки, это ключевое слово будет указывать на глобальный, а не на то, где оно вызывается.

var name1 = {
  firstName: "Karthikeyan",
  lastName: "Kaliyamoorthy",
  printFullName: function () {
    // this keyword will have access to name object
    console.log(this.firstName + " " + this.lastName)
 }
}
name1.printFullName();

Теперь, если мы хотим вызвать метод PrintFullName для другого объекта. Мы можем использовать заимствование функций.

Заимствование функций: позволяет нам использовать метод одного объекта для другого объекта без необходимости переопределять тот же метод. Этого можно добиться с помощью call ,bind и apply, которые существуют для явной установки this в методе, который мы заимствуем.

call(): первый аргумент всегда ссылается на this. Мы также можем передать другой параметр из вторых аргументов.

var name1 = {
    firstName: "Karthikeyan",
    lastName: "Kaliyamoorthy",
    printFullName: function () {
        // this keyword will have access to name object
        console.log(this.firstName + " " + this.lastName)
    }
}

name1.printFullName(); // Karthikeyan Kaliyamoorthy

let name2 = {
    firstName: "Sachin",
    lastName: "Tendulkar",
}
name1.printFullName.call(name2) // Sachin Tendulkar

В общем случае метод printFullName извлечет его из объекта name1 и сделает его пригодным для повторного использования.

let printFullName = function () {
    console.log(this.firstName + " " + this.lastName)
}
var name1 = {
    firstName: "Karthikeyan",
    lastName: "Kaliyamoorthy",
}

printFullName.call(name1); // Karthikeyan Kaliyamoorthy

let name2 = {
    firstName: "Sachin",
    lastName: "Tendulkar",
}
printFullName.call(name2) // Sachin Tendulkar

Метод call() с дополнительными аргументами:

let printFullName = function (hometown, state) {
    console.log(this.firstName + " " + this.lastName + " from " + hometown + "," + state)
}
var name1 = {
    firstName: "Karthikeyan",
    lastName: "Kaliyamoorthy",
}

printFullName.call(name1, "Thanjavur", "Tamilnadu");

let name2 = {
    firstName: "Sachin",
    lastName: "Tendulkar",
}
printFullName.call(name2, "Mumbai", "Maharashtra") 

**Output**: 
Karthikeyan Kaliyamoorthy from Thanjavur,Tamilnadu
Sachin Tendulkar from Mumbai,Maharashtra

Apply() : это то же самое, что и метод call(), но единственное отличие состоит в том, что аргументы метода apply() передаются с использованием массива, call() передает аргументы через запятую.

let printFullName = function (hometown, state) {
    console.log(this.firstName + " " + this.lastName + " from " + hometown + "," + state)
}
var name1 = {
    firstName: "Karthikeyan",
    lastName: "Kaliyamoorthy",
}

printFullName.apply(name1, ["Thanjavur", "Tamilnadu"]);

let name2 = {
    firstName: "Sachin",
    lastName: "Tendulkar",
}
printFullName.apply(name2, ["Mumbai", "Maharashtra"])

**Output**: 
Karthikeyan Kaliyamoorthy from Thanjavur,Tamilnadu
Sachin Tendulkar from Mumbai,Maharashtra

Bind(): он создаст копию функции с привязкой объекта, в отличие от метода call(), где он немедленно вызовет функцию с объектом ref. Это единственная разница между call() и bind(). bind не будет напрямую вызывать метод. Он дает вам копию, которую можно вызвать позже, а не напрямую. Bind будет передавать аргументы индивидуально, в отличие от apply();

let printFullName = function (hometown, state) {
    console.log(this.firstName + " " + this.lastName + " from " + hometown + "," + state)
}
var name1 = {
    firstName: "Karthikeyan",
    lastName: "Kaliyamoorthy",
}

let printMyName = printFullName.bind(name1, "Thanjavur", "Tamilnadu");

console.log(printMyName);

printMyName();

**Output**
ƒ (hometown, state) {
    // this keyword will have access to name object
    console.log(this.firstName + " " + this.lastName + " from " + hometown + "," + state)
}
script.js:3 Karthikeyan Kaliyamoorthy from Thanjavur,Tamilnadu

Будет рассказано о продолжении этой темы и о том, где эти концепции использовались в JavaScript.

Ссылки:

Вызов, привязка и применение в JavaScript

Вопросы по теме