Объекты JavaScript (продолжение)

© IGP, декабрь 2024 г.

Объекты обычно создаются, чтобы представлять сущности реального мира

						
// Объект пользователя
let user = {
  name: "Лоханкин",
  age: 30
};
						
					

Так же, как и в реальном мире, пользователь может совершать действия.
Такие действия в JavaScript представлены функциями в свойствах, которые называются методами.

Пример метода

let user = {
  name: "Лоханкин",
  age: 30,
  sayHi: function() {
			consile.log("Привет!");
		}
};
					

Вызов метода:

user.sayHi();	// Привет!			
					

Другой вариант

Свойству с именем sayHi присваивается заранее созданная функция

// Объект пользователя
let user = {
  name: "Лоханкин",
  age: 30
};
function sayHi() {
  alert("Привет!");
}
// добавляем в качестве метода
user.sayHi = sayHi;					
					

Вызов метода:

user.sayHi();	// Привет!			
					

Сокращённая запись метода

// эти объекты делают одно и то же

user = {
  sayHi: function() {
    console.log("Привет");
  }
};
// сокращённая запись выглядит лучше
user = {
  sayHi() { // то же самое, что и "sayHi: function(){...}"
    console.log("Привет");
  }
};
					

Эти две записи не полностью эквивалентны. Есть тонкие различия.

Ключевое слово «this» в методах

this - означает "текущий объект"

let user = {
  name: "Иннокентий",
  age: 30,

  sayHi() {
    console.log(this.name);
  }
};

user.sayHi(); // Иннокентий					
					

«this» не является фиксированным

let user = { name: "Пётр" };
let admin = { name: "Admin" };

function sayHi() {
  console.log( this.name );
}

user.f = sayHi;
admin.f = sayHi;

user.f(); // Пётр  (this == user)
admin.f(); // Admin  (this == admin)
admin['f'](); // Admin					
					

Стрелочные функции

let user = {
  name: "Василий",
  age: 30,
  sayHi: () => {
    console.log("Привет!");
  }
};
user.sayHi(); // Привет!					
				

Стрелочные функции не имеют «собственного» this

Возвращаемые значения

let calc = {
	x: 0
	y: 0
	sum: function (a,b){
		return a+b;
	}
};

console.log(calc.sum(33, 66)); // 99
					

У объекта может быть два типа свойств

• Свойства-данные
• Свойства-аксессоры - это функции, которые используются для присвоения и получения значения

let obj = {
  get propName() {
    // геттер, срабатывает при чтении obj.propName
  },
  set propName(value) {
    // сеттер, срабатывает при записи obj.propName = value
  }
};						
					

let user = {
  name: "Остап",
  surname: "Бендер",

  get fullName() {
    return `${this.name} ${this.surname}`;
  }
};
console.log(user.fullName); // Остап Бендер					
					

let user = {
  name: "Паниковский",
  surname: "Михаил",
  get fullName() {
    return `${this.name} ${this.surname}`;
  },
  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};
user.fullName = "Балаганов Шура";

console.log(user.name); // Балаганов
console.log(user.surname); // Шура
				

Важно

Cвойство объекта может быть либо свойством-аксессором (с методами get/set), либо свойством-данных

let user = {
  name: "Александр",
  surname: "Корейко"
};
Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.name} ${this.surname}`;
  },
  set(value) {
    [this.name, this.surname] = value.split(" ");
  }
});
console.log(user.fullName); // Александр Корейко 
for(let key in user) console.log(key); // name, surname						
					

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;
 }
 
 let u = new User("Райкер", new Date(1966, 10, 03));
 console.log(u.birthday); // 03.10.1966
 console.log(u.name); // Райкер