Методы объектов и указатель this

Методы объектов и указатель this

Здравствуйте! Мы уже с вами познакомились с объектами, но ничего не говорили о методах объектов. Восполним этот недостаток . И в этом уроке рассмотрим методы объектов они же функции объектов и непосредственно указатель this.

Указатель this в объекте

Методы у объектов

Когда вы объявляете  объект  есть возможность указать свойство в виде функции например:

  name: 'Вася',
  // функция или метод
  sayHi: function() {
    alert( 'Привет Вася!' );
  }

};
// Вызов объекта с методом
user.sayHi();

Свойства-функции принято называть «методами» объектов. Вы можете их добавлять и удалять в любой момент времени:

 var user = { name: 'Вася' }; 
user.sayHi = function() { 
// присвоим метод после создания объекта 
alert('Привет Вася!'); }; 
// Вызов метода: user.sayHi();

Доступ к объекту через this

Иногда для полноценной работы  с объектом метод должен иметь доступ к  его данным. А именно, например вызов user.sayHi() захочет вызвать имя пользователя.
Для доступа к объекту из функции используется ключевое слово this или указатель, который указывает на сам объект  например:

var user = { name: 'Вася', 
sayHi: function() { alert( this.name ); } 
}; 
user.sayHi(); // sayHi в контексте user

В примере при выполнении метода sayHi в указателе this хранится имя объекта в данном случае Вася. Если поменяется значение свойства name то и в методе она автоматически изменится благодаря this.
Через указатель this функция может не только обратиться к свойству объекта, но и передать ссылку на сам объект целиком:

var user = {
  name: 'Вася',
  sayHi: function() {
    showName(this); // передать текущий объект в showName
  }
};
function showName(named) {
  alert( named.name );
}
user.sayHi(); // Вася

Подробнее про this

В принципе каждая функция имеет в себе this. И совершенно неважно, где она объявлена в объекте или вне объекта.
Значение указателя this называется контекстом вызова и определяется в момент вызова функции.
Например:

                       
function say() { alert( this.firstName ); }

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

var user = { name: "Вася" };
var admin = { name: "Админ" };
function func() {
  alert( this.name );
}
user.f = func;
admin.g = func;
// this  будет равен объекту перед точкой:
user.f(); // Вася
admin.g(); // Админ

Итак, как видите значение this не будет зависеть от того, как функция была создана, оно определиться чуть позже в момент вызова.

Читайте также  Создание объектов через оператор "new"

Ссылочный тип

Контекст указателя this никак не привязан к функции, даже если она создана в объявлении объекта. Для того чтобы this передался нужно вызвать функцию через точку, а иначе произойдет потеря контекста.

var user = {
  name: "Вася",
  hi: function() { alert(this.name); },
  bye: function() { alert("Пока"); }
};
user.hi(); // Вася (простой вызов работает)
// а теперь вызовем user.hi или user.bye в зависимости от имени
(user.name == "Вася" ? user.hi : user.bye)(); //undefined

В последней строке примера метод получен в результате выполнения тернарного оператора и тут же вызван. Но вот this при этом теряется.

Итоги.

В объекте можно создавать функции или методы. Причем их можно создавать вне объекта и также удалять.

Для то чтобы получить доступ к свойствам объекта используется указатель this.

Задания

Вызов в контексте массива

Каким будет результат? Почему?

var arr1 = ["a", "b"];
arr1.push(function() {
  alert( this );
})
arr1[2](); // ?

Проверка синтаксиса

Каков будет результат этого кода?

var obj1 = {
  go: function() { alert(this) }
}
(obj1.go)()

Почему this присваивается именно так?

Вызовы (1) и (2) в примере ниже работают не так, как (3) и (4):

"use strict"
var obj, method;
obj = {
  go: function() { alert(this); }
};
obj.go();            // (1) object
(obj.go)();          // (2) object
(method = obj.go)();      // (3) undefined
(obj.go || obj.stop)(); // (4) undefined
В чём дело по вашему? Объясните логику работы this.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: