Ключевое слово this может сбивать с толку при просмотре в JavaScript, и вы, вероятно, отреагируете как мем выше. Как, черт возьми, это это и зачем мне его использовать? Что ж, это важно при использовании объектов в Javascript. Кроме того, всякий раз, когда я использую «это», я выделяю его жирным шрифтом, чтобы вы не запутались в моем буквальном значении этого слова. В любом случае, this используется для обозначения объекта, в котором он находится. Для начала вы увидите, что он используется в конструкторах объектов:
function Dog(name, breed, age) {
this.name = name;
this.breed = breed;
this.age = age;
}
const myDog = new Dog("Marley", "Golden Retriever", 9)
Это функция-конструктор, в которой вы можете создавать новые объекты. В этом контексте this не имеет значения. Он просто используется как замена для последующих создаваемых новых объектов. После этого this становится значением создаваемого нового объекта.
Обычно, кроме функций конструктора, this относится к самому объекту. this получает значение тремя способами:
- Привязка по умолчанию
Это в данном случае, когда никакая другая форма привязки не применяется:
function logThis() {
console.log("default this", this);
};
logThis(); // -> [object Window]
Как видите, this используется в функции. В подобных случаях this просто ссылается на глобальный объект, который представляет собой длинный список ключей и значений, имеющихся в окне. Другими словами, эта функция является привязкой по умолчанию для this.
2. Неявное связывание
Это наиболее распространенный способ использования this.
function myFunc() {
console.log( this.prop );
}
let obj1 = {
prop: 2,
myFunc: myFunc
};
obj1.myFunc(); // -> 2
Это получает свое значение, когда объект владеет вызовом функции. Я определил myFunc, который печатает ключ объекта и передал его объекту. Теперь объект владеет этой функцией, которая, в свою очередь, при выполнении будет использовать this и пытаться увидеть, на какой объект она ссылается. В результате будет напечатано 2. Вы также можете думать об этом как о левом от точки, чтобы увидеть, что это может относиться к.
function myFunc() {
console.log( this.prop );
}
var obj1 = {
prop: 1,
myFunc: myFunc
};
var obj2 = {
prop: 2,
myFunc: myFunc,
obj1: obj1
};
obj2.obj1.myFunc(); // -> 1
В этом примере я просто добавил еще один объект, который совпадает с другим объектом, который принимает другой объект. Но теперь obj1 вложен в obj2. Итак, как мы узнаем, что означает this.prop? Ну просто. Вы помните принцип «слева от точки»? В последнем операторе «obj2.obj1.myFunc ()», непосредственно слева от функции, которая содержит «console.log (this.prop)», это obj1! Таким образом, myFunc () будет использовать obj1.prop, а не obj2.prop. В конечном итоге obj1 владеет myFunc ().
3. Явная привязка
Это когда вы указываете функции, что именно вы хотите использовать для этого. Для управления привязкой есть три встроенные функции: вызов, применение и привязка. Но я перейду только к первым двум, позвоню и подам заявку.
Это синтаксис как для вызова, так и для применения:
function.call(object, arg1, arg2, ...)function.apply(object, [arg1, arg2, ...])
Позвонить
function greet(greeting, punctuation) {
let firstLine = greeting + ', ' + this.name + punctuation;
let secondLine = 'You are a great ' + this.occupation + punctuation;
return firstLine + ' ' + secondLine;
};
let danny = {
name: 'Danny',
occupation: 'Artist'
};
let mikey = {
name: 'Mikey',
occupation: 'CTO'
};
console.log(greet.call(danny, 'Hello', '!'));
// -> "Hello, Danny! You are a great Artist!"
console.log(greet.call(mikey, 'Hey', '...'));
// -> "Hey, Mikey... You are a great CTO..."
Итак, здесь я использую this.name и this.occupation в определении функции greet. В примере с неявной привязкой я использую функцию greet как ключ к объекту, а здесь - нет. В подобных случаях this в функции не ссылается ни на один объект. Следовательно, вы можете явно связать его с помощью функции вызова. Он принимает объект в качестве первого аргумента, а затем любые оставшиеся аргументы функции, такие как приветствие и знаки препинания.
Применить
function greet(greeting, punctuation) {
let firstLine = greeting + ', ' + this.name + punctuation;
let secondLine = 'You are a great ' + this.occupation + punctuation;
return firstLine + ' ' + secondLine;
};
let danny = {
name: 'Danny',
occupation: 'Artist'
};
let mikey = {
name: 'Mikey',
occupation: 'CTO'
};
console.log(greet.apply(danny, ['Hello', '!']));
// -> "Hello, Danny! You are a great Artist"
console.log(greet.apply(mikey, ['Hey', '...']));
// -> "Hey, Mikey... You are a great CTO..."
Apply буквально то же самое, что call, но с той лишь разницей, что call принимает аргументы отдельно, а apply принимает аргументы как массив. Но функционально они оба дают одинаковый результат.
Заключение
По сути, это очень запутанное понятие для понимания в первую очередь. У этого гораздо больше функциональных возможностей, которые я не рассмотрел, но как только вы получите твердое представление обо всем материале, который я рассмотрел здесь, вы также будете хорошо знакомы с основами того, как это вообще работает.
