Вам бонус- начислено 1 монета за дневную активность. Сейчас у вас 1 монета

Свои объекты: конструкторы и методы

Лекция



Привет, сегодня поговорим про свои объекты, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое свои объекты, конструкторы, методы класса, this , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend).


  1. Свои методы объектов
  2. Доступ к объекту через this
  3. Функция-конструктор, «new»
  4. Создание методов в конструкторе
  5. Приватные свойства
  6. Итого

До этого мы говорили об объекте лишь как о хранилище значений. Теперь пойдем дальше и поговорим о добавлении в объекты собственных функций (методов), а также о конструкторах — функциях, создающих объекты.

Свои методы объектов

При объявлении в объект можно записать функцию. Она становится его методом, например:

 

   
01 var user = {
02   name: 'Василий',
03  
04   // метод
05   sayHi: function() {
06     alert('Привет!');
07   }
08  
09 };
10  
11 // Вызов метода
12 user.sayHi();

 

Можно создать метод и позже, явным присвоением:

 

   
01 var user = {
02   name: 'Василий'
03 };
04  
05 user.sayHi = function() {
06   alert('Привет!');
07 };
08  
09 // Вызов метода:
10 user.sayHi();

 

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

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

Для доступа к объекту из метода используется ключевое слово this. Значением this является объект, в контексте которого вызван метод, например:

 

   
1 var user = {
2   name: 'Василий',
3  
4   sayHi: function() {
5     alert( this.name );
6   }
7 };
8  
9 user.sayHi();

 

Здесь при выполнении функции user.sayHi() в this будет храниться ссылка на текущий объект user.

В данном случае вместо this можно было бы использовать и переменную: alert( user.name ), но объект user может быть куда-то передан, переменная user перезаписана и т.п. Использование thisгарантирует, что функция работает именно с тем объектом, в контексте которого вызвана.

Через this можно обратиться к любому свойству объекта, а при желании и передать его куда-то:

   
01 var user = {
02   name: 'Василий',
03  
04   sayHi: function() {
05     showName(this); // передать текущий объект в showName
06   }
07 };
08  
09 function showName(obj) {
10   alert( obj.name );
11 }
12  
13 user.sayHi();

 

 

Важность: 5

Создайте объект calculator с тремя методами:

  • readValues() запрашивает prompt два значения и сохраняет их как свойства объекта
  • sum() возвращает сумму двух значений
  • mul() возвращает произведение двух значений

На демо-страничке tutorial/intro/object/calculator.html показан результат кода:

 

1 var calculator = {
2   ... Об этом говорит сайт https://intellect.icu . ваш код...
3 }
4  
5 calculator.readValues();
6 alert( calculator.sum() );
7 alert( calculator.mul() );

 

Решение

tutorial/intro/object/calculator.html

[Открыть задачу в новом окне]

 

 

Важность: 2

Есть объект «лестница» ladder:

01 var ladder = {
02   step: 0,
03   up: function() {  // вверх по лестнице
04     this.step++;
05   },
06   down: function() {  // вниз по лестнице
07     this.step--;
08   },
09   showStep: function() { // вывести текущую ступеньку
10     alert(this.step);
11   }
12 };

 

Сейчас работать с ним скучно:

1 ladder.up();
2 ladder.up();
3 ladder.down();
4 ladder.showStep(); // 1

 

Модифицируйте код, чтобы вызовы можно было делать цепочкой, вот так:

ladder.up().up().down().up().down().showStep();  // 1

 

Такой подход используется, например, во фреймворке jQuery.

Решение

Решение состоит в том, чтобы каждый раз возвращать текущий объект. Это делается добавлением return this в конце каждого метода:

 

   
01 var ladder = {
02   step: 0,
03   up: function() {
04     this.step++;
05     return this;
06   },
07   down: function() {
08     this.step--;
09     return this;
10   },
11   showStep: function() {
12     alert(this.step);
13     return this;
14   }
15 }
16  
17 ladder.up().up().down().up().down().showStep();  // 1

 

[Открыть задачу в новом окне]

 

Функция-конструктор, «new»

Обычный синтаксис {...} позволяет создать один объект. Но зачастую нужно создать много однотипных объектов.

Для этого используют функции, запуская их при помощи специального оператора new.

Конструктором становится любая функция, вызванная через new.

Например:

 

1 function Animal(name) {
2   this.name = name;
3   this.canWalk = true
4 }
5  
6 var animal = new Animal("ежик");

 

Любую функцию можно вызвать при помощи new. При этом она работает несколько иным образом, чем обычно:

  1. Автоматически создается новый, пустой объект.
  2. Специальное ключевое слово this получает ссылку на этот объект.
  3. Функция выполняется. Как правило, она модифицирует this, добавляет методы, свойства.
  4. Возвращается this.

Так что результат выполнения примера выше — это объект:

1 animal = {
2   name: "ежик",
3   canWalk: true
4 }

 

О создаваемом объекте говорят, что это «объект класса(или типа) Animal».

Термин «класс» здесь является профессиональным жаргоном. Во многих других языках программирования есть специальная сущность «класс». В JavaScript ее нет, но кое-что похожее организовать можно, поэтому так и называют.

 

Функция может возвратить другой объект вместо this

Если функция явно возвращает объект, то будет возвращен он, а не this.

Например:

   
1 function BigAnimal() {
2  
3   this.name = 'Мышь';
4  
5   return { name: 'Годзилла' };  // <-- будет возвращено
6 }
7  
8 alert( new BigAnimal().name );  // Годзилла

 

Если функция возвращает не объект, к примеру, число, то такой вызов return ни на что не повлияет. Например:

   
1 function BigAnimal() {
2  
3   this.name = 'Мышь';
4  
5   return 'Годзилла'// не объект, такой return в режиме new ни на что не влияет
6 }
7  
8 alert( new BigAnimal().name );  // Мышь

 

Эта особенность работы new прописана в стандарте, знать о ней полезно, но используется она весьма редко.

 

 

Названия функций, которые предназначены создавать объекты, как правило, начинают с большой буквы.

 

 

Кстати, при вызове new без аргументов скобки можно не ставить:

var animal = new BigAnimal; // <-- без скобок
// то же самое что
var animal = new BigAnimal();

 

 

 

Важность: 2

Возможны ли такие функции A и B в примере ниже, что соответствующие объекты a,b равны (см. код ниже)?

 

1 function A() { ... }
2 function B() { ... }
3  
4 var a = new A;
5 var b = new B;
6  
7 alert( a == b ); // true

 

Если да — приведите пример кода с такими функциями.

Решение

Да, возможны.

Они должны возвращать одинаковый объект. При этом если функция возвращает объект, то this не используется.

Например, они могут вернуть один и тот же объект obj, определенный снаружи:

 

   
1 var obj = {};
2  
3 function A() { return obj; }
4 function B() { return obj; }
5  
6 var a = new A;
7 var b = new B;
8  
9 alert( a == b ); // true

К сожалению, в одной статье не просто дать все знания про свои объекты. Но я - старался. Если ты проявишь интерес к раскрытию подробностей,я обязательно напишу продолжение! Надеюсь, что теперь ты понял что такое свои объекты, конструкторы, методы класса, this и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Из статьи мы узнали кратко, но содержательно про свои объекты
создано: 2014-10-07
обновлено: 2021-03-13
132480



Рейтиг 9 of 10. count vote: 2
Вы довольны ?:


Поделиться:

Найди готовое или заработай

С нашими удобными сервисами без комиссии*

Как это работает? | Узнать цену?

Найти исполнителя
$0 / весь год.
  • У вас есть задание, но нет времени его делать
  • Вы хотите найти профессионала для выплнения задания
  • Возможно примерение функции гаранта на сделку
  • Приорететная поддержка
  • идеально подходит для студентов, у которых нет времени для решения заданий
Готовое решение
$0 / весь год.
  • Вы можите продать(исполнителем) или купить(заказчиком) готовое решение
  • Вам предоставят готовое решение
  • Будет предоставлено в минимальные сроки т.к. задание уже готовое
  • Вы получите базовую гарантию 8 дней
  • Вы можете заработать на материалах
  • подходит как для студентов так и для преподавателей
Я исполнитель
$0 / весь год.
  • Вы профессионал своего дела
  • У вас есть опыт и желание зарабатывать
  • Вы хотите помочь в решении задач или написании работ
  • Возможно примерение функции гаранта на сделку
  • подходит для опытных студентов так и для преподавателей



Комментарии


Оставить комментарий
Если у вас есть какое-либо предложение, идея, благодарность или комментарий, не стесняйтесь писать. Мы очень ценим отзывы и рады услышать ваше мнение.
To reply

Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Термины: Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)