Объектно-ориентированное программирование очень просто для большинства языков OOP, но JavaScript немного отличается.
Учитывая функцию Game Creator, мы хотим расширить Игра объект, так что у него есть некоторые дополнительные методы для увеличения оценки Game.ScorePoint () Отказ
Вы можете использовать ES6Console Чтобы запустить наши эксперименты.
Давайте посмотрим код:
function GameCreator(score) {
this.score = score;
}
GameCreator.prototype.scorePoint = function() {
function incrementScore() {
this.score++;
}
incrementScore();
};
GameCreator.prototype.endGame = function() {
console.log(`Game has finished ${this.score}`)
};
let game = new GameCreator(0);
game.scorePoint();
После выполнения этого кода вы заметите, что game.score все еще 0 Отказ Но почему? Что случилось? Наш код неправильно?
Да, это неправильно (но это выглядит хорошо, верно?). Сначала давайте понять, почему это неправильно. Оказывается это от This.Score ++ представляет окно объект не Игра пример. ДА! Попался! Это означает, что наш Оценка где-то потерян в окно Отказ
Итак, идея с этим примером состоит в том, чтобы понять, что Вложенная функция не будет смотреть на экземпляр, в нашем случае Игра пример. Представьте на мгновение, что Оценка не только имеет Приращение Но и PrintScore , но, почему не также другая функция endgamewhenmaxscore Отказ Видеть? Функция может быть разделена на небольшие, что является чем-то великим, так как она помогает организовать код, каждая функция реценна для одной мелочей.
Теперь, чтобы исправить проблему … Мы можем использовать Функции стрелки :
function GameCreator(score) {
this.score = score;
}
GameCreator.prototype.scorePoint = function() {
const incrementScore = ()=> {this.score++};
incrementScore();
};
GameCreator.prototype.endGame = function() {
console.log(`Game has finished ${this.score}`)
};
let game = new GameCreator(0);
game.scorePoint();
Используя Функция стрелки Мы указываем на то, что мы хотим использовать Игра экземпляр вместо окно Отказ
Сейчас game.score; вернется 1 Отказ
Использование метода конструктора:
function GameCreator(score) {
constructor (score) {
this.score = score;
}
increment() {
this.score++;
}
endGame(){
console.log(`Game has finished ${this.score}`)
}
}
let game = new GameCreator(0);
game.increment();
game.endGame();
Использование классов ES6 Классы – JavaScript | MDN :
class Game {
constructor (score) {
this.score = score;
}
increment() {
this.score++;
}
endGame(){
console.log(`Game has finished ${this.score}`)
}
}
let game = new Game(0);
game.increment();
game.endGame();
Смотрите код Бег здесь
Разве это не красиво? Мне это нравится, тебе это нравится, все делают.
Итак, мы узнали, что это Может быть очень сложно, все еще управляемым. Вам просто нужно понять это на каждом контексте.
Попробуйте экспериментировать с это Ключевое слово на разные контексты и анализировать результаты. Это поможет вам понять, как это работает. В конце вы избежите больших ошибок, и вы станете лучшим разработчиком JS!