Вы когда-нибудь встречали ключевое слово «это» при чтении кода или следовании учебнику? Ха-ха… Я вижу на твоем лице выражение «что, черт возьми, это за «это»». Чтобы мы четко поняли, что делает ключевое слово this, давайте сначала поговорим о том, что такое объект в javascript.
В javascript объект — это просто структура данных, используемая для хранения данных в парах ключ-значение. Объекты в JavaScript являются динамическими, то есть вы можете добавлять, изменять или удалять свойства и методы в любое время.
Таким образом, мы можем представить объекты реальной жизни, такие как пользователь, автомобиль, стол и т. д. Допустим, вы понятия не имеете, что такое объекты, и при написании кода вам нужен способ представить пользователя, который имеет следующие свойства: имя, возраст . Как бы Вы это сделали? Лучший способ — создать пользовательский объект и присвоить ему свойства.
let user = { name: "Bob", age: 20, }
Ключами являются имя и возраст. И значения — Боб и 20. Затем мы можем взять пользовательский объект и делать с ним все, что захотим. Например, мы можем отправить ему тело HTTP-запроса, сохранить его в базе данных или передать в качестве аргумента функции. Делай с ним, что хочешь.
В JavaScript мы можем назначить функцию свойству объекта. Итак, давайте добавим новое свойство с именем приветствие и назначим ему функцию, которая возвращает «Привет».
let user = { name: "Bob", age: 20, greet: function() {return "Hello"} } console.log(user.greet()) ---> Hello
Функция — это блок кода, выполняющий определенную задачу. Например, сложение двух чисел и возврат суммы. Когда функция присваивается свойству объекта, она становится методом этого объекта. Таким образом, метод — это просто функция, назначенная свойству объекта.
Теперь мы хотим добавить свойство name объекта пользователя к «Hello», чтобы вернуть «Hello Bob».
Когда мы попробуем это сделать, мы получим ошибку ссылки.
let user = { name: "Bob", age: 20, greet: function() {return "Hello" + name} } console.log(user.greet()) ---> ReferenceError: name is not defined
Несмотря на то, что имя является свойством объекта пользователя; мы не можем получить к нему доступ, просто вызвав «имя». Именно здесь появляется ключевое слово «этот». «Это» представляет сам объект. Взгляните на console.log «этого»
let user = { name: "Bob", age: 20, greet: function() {return this} } console.log(user.greet()) ---> {name: "Bob", age: 20, greet: [Function greet]}
Чтобы получить доступ к значению свойства name, мы используем this.name. В этом контексте this.name = «Боб»
let user = { name: "Bob", age: 20, greet: function() {return "Hello" + this.name} } console.log(user.greet()) ---> Hello Bob
Мы можем получить доступ к «Бобу», вызвав user.name, но это не рекомендуется. Если объекту присвоено другое имя, user.name выдаст ошибку. Так что давайте придерживаться «этого».
Предполагается, что ключевое слово this должно использоваться в контексте объекта. Он не определен в обычной функции в «строгом режиме» javaScript. В нестрогом режиме он представляет собой глобальный объект «окно». Это ошибка программирования, решаемая строгим режимом.
Мы можем использовать объектный литерал для создания любого количества объектов. Но мы все можем согласиться с тем, что на третьем испытании это станет скучным и однообразным. Лучший способ справиться с этим — использовать класс. Класс — это план объекта. Он не является объектом сам по себе, но содержит свойства, необходимые для создания объекта.
class User { constructor(name, age) { this.name = name; this.age = age; } greet() { return "Hello " + this.name; } }
Приведенный выше класс позволяет нам создавать несколько объектов пользователя. Как и литерал пользовательского объекта, у него есть свойство с именем name, age и метод с именемgreet. Мы можем использовать ключевое слово this в классе, потому что это план объекта.
Чтобы создать объект из класса, мы используем ключевое слово «новое», за которым следует имя класса. Нам также необходимо предоставить любой аргумент, указанный в конструкторе класса. Мы можем получить доступ к свойствам, используя точечную нотацию объекта.
const user1 = new User("Bob", 20); user1.name ---> "Bob" //user1 is an object created using the User blueprint.
Теперь давайте попробуем несколько примеров. Убедитесь, что вы пробуете больше самостоятельно.
const user1 = new User("Bob", 20); const user2 = new User("Tom", 17); console.log(user1.name) ---> Bob console.log(user2.name) ---> Tom console.log(user1.greet()) ---> Hello Bob console.log (user2.greet()) ---> Hello Tom
Напомним, объект — это просто структура данных, используемая для хранения данных в виде пар ключ-значение. В контексте объекта ключевое слово this представляет сам объект, а класс — это план объекта.
Ура!.. ты дошел до конца. А теперь вооружитесь этими знаниями и отправляйтесь покорять мир JavaScript, полный «этого», объектов и классов :)