Эта запись в блоге предназначена для разработчиков, которые уже знают, как писать программное обеспечение, и хотят узнать больше о Javascript. Я не учу вас писать программы, потому что предполагаю, что вы можете программировать на другом языке. К тому же я надеюсь, что Getify это не прочитает
- Синтаксический сахар
- Шаблоны JavaScript / Объекты в JavaScript
- Функции в JavaScript
- это как указание на это»
- ООП (объектно-ориентированное программирование)
В начале девяностых объектно-ориентированное программирование наделало шума в индустрии программного обеспечения. Идея не была на самом деле новой, но ей хватило импульса, чтобы начать и сдвинуть дело с мертвой точки. Писались книги, читались курсы, разрабатывались языки программирования. Внезапно все стали экспертами по объектной ориентации, с энтузиазмом применяя ее к каждой проблеме, убежденные, что нашли лучший способ написания программ. Действительно?
Как следует из названия, объектно-ориентированный язык связан с объектами. До сих пор мы использовали объекты как свободные агрегаты значений, добавляя и изменяя их свойства всякий раз, когда считали нужным. Начнем с первого шаблона под названием прототип.
Javascript-прототип
Что такое прототип? Вы можете назвать прототип планом для экземпляров объекта. Каждый раз, когда вы создаете функцию или класс, вы создаете план прототипа. Класс фактически объявлен как функция в Javascript.
var Person = function(attributes) {
// here you create a prototype - "blueprint"
// the class name has a capital letter
this.something = attributes.something;
this.method = function(){ return a value; }
} // declare an instance of type Person and instantiate the method every single time you create a new instance.
var michel = new Person("Michel","Herszak");
Поэтому, когда вы создаете экземпляр класса Person, вы создаете прототип. Прототип — это объект (вид JSON), который содержит методы, которыми будет делиться каждый экземпляр. Каждый экземпляр может использовать одни и те же методы, потому что при вызове они будут вызываться в контексте этого экземпляра. Чтобы на самом деле поделиться, нам нужно немного реорганизовать наш код:
var Person = function(attributes) {
this.something = attributes.something;
}
Person.prototype.sayHello = function() {
console.log("Hi, I own those + this.arguments);
};
var bob = new Person({
firstName: "Bob",
lastName: "Ject",
age: 33,
address: {
street: "123 Memory Ln",
apt: "0x7fff9575c05f",
zip: "01101",
city: "Browser Town",
state: "Mozilla"
}
});
var ella = new Person({
firstName: "Ella",
lastName: "Siff",
age: 1,
address: {
street: "8362 Ram Rd",
apt: "0x7fff8637c02f",
zip: "10101",
city: "Tab City",
state: "Webkitesota"
}
});
Так что же делает это новое ключевое слово? Он просматривает все связанные прототипы и назначает их экземпляру.
Где я могу разместить свои статические свойства?
Иногда методы не принадлежат конкретному экземпляру, а принадлежат самому классу. Раньше мы называли эти методы статическими или классовыми.
Person.bob = function(healthy, sick) {
sick.person != healthy;
}
Помните, что классы — это просто функции, и они первоклассные. Те могут получить свойства через точечную нотацию. Это означает, что мы просто определяем свойство самой функции «Класс».
Давайте добавим инструмент для создания «наследования» между классами. Этот инструмент просто должен будет сделать одну единственную вещь: клонировать прототип из исходного прототипа:
/**
* This is exactly where the magic happens! By cloning the prototype, we transfer all
* members and functions to the new class.
* @param child
* @param parent
*/
var inheritsFrom = function (child, parent) {
child.prototype = Object.create(parent.prototype);
};
Как мы используем его, используя принципы ООП?
var Employee = function(attributes,employeeId) {
this.something = attributes.something;
this.employeeId = employeeId;
}
Есть одна проблема: всякий раз, когда мы создаем экземпляр новой переменной, мы перезаписываем другое специальное свойство, называемое конструктором. Способ ее решения показан в следующем фрагменте:
var inheritsFrom = function (child, parent) {
// before
child.prototype = Object.create(parent.prototype);
// after with reseting the constructor.
child.prototype.prototype = child;
};
Вы часто будете видеть это в коде. Итак, теперь давайте создадим новый класс, используя тип Employee.
/**
* Lets extend the
* @param attributes
* @param employeeId
* @constructor
*/
var Employee = function(attributes,employeeId) {
/**
* Now we have the ability to call our Person class
* with the this pointer and and extend Employee class.
*/
Person.call(this,arguments);
this.employeeId = employeeId;
}
Когда мы вызываем эту функцию, мы получаем свойства не только от Employee, но и от Person. Здорово! Итак, как нам вызвать суперкласс, если мы хотим перезаписать объектную функцию?
Employee.prototype.sayHello = function () {
/**
* This is a very object oriented pattern.
*/
var personArgument = Person.prototype.sayHello().call(this);
/**
* You call the super class Person and extend the function by concatenation.
*/
return personArgument + this.employeeId;
}
Это тоже фантастика и сногсшибательно. Но что, если мы хотим отслеживать содержащиеся переменные? Мы выбираем анонимно-автоматически выполняемую функцию и шаблон модуля, чтобы использовать его возможности API:
var Person = (function () {
var num = 3; // private variable
var Person = function () {
};
Person.findOne = function () {
}
return Person;
})();
Мы создаем класс внутри модуля и выставляем только общедоступные методы в качестве ссылки на API. Я думаю, что это, вероятно, не то, но это пока.
Что мы узнали:
Электронная почта — [email protected]
Твиттер — @MHerszak (twitter.com/MHerszak)
Хотите узнать о том, как я работаю? Отлично, вы можете начать с обзора того, как я подхожу к проекту прямо здесь.
Первоначально опубликовано на www.browserstudios.com 21 декабря 2015 г.
