JavaScript является объектно-ориентированным языком . За исключением основных языковых конструкций типа циклов и операций отношения, почти все возможности JavaScript так или иначе реализованы с помощью объектов.
Иногда объекты используются явно для выполнения определенных задач, таких как, например, обработка документов (X)HTML и XML на основе объектной модели документа. В других случаях роль объектов менее очевидна, как, например, роль объекта String при работе с примитивными строковыми данными.
В предыдущих главах уже предлагались примеры, которые явно демонстрировали пользу встроенных объектов, но в этой главе мы приступим к непосредственному изучению объектов JavaScript.
Объекты в JavaScriptОбъекты в JavaScript можно поделить на четыре группы.
Объект — это неупорядоченная совокупность данных, включающая примитивные типы данных, функции и даже другие объекты. Польза объектов заключается в том, -то они концентрируют в одном месте все данные и логику, необходимые для выполнения определенной конкретной задачи. Объект String хранит текстовые данные и предлагает множество функций, необходимых для действий с ними. Хотя присутствие объектов в языке программирования совсем не обязательно (в языке С, например, нет объектов), они определенно упрощают использование языка.
Создание объектовОбъект создается с помощью конструктора — функции специального вида, которая подготавливает новый объект для использования, инициализируя занимаемую Зъектом память. В главе 4 мы видели, что объекты можно создавать, применяя операцию new к их конструкторам. Применение этой операции заставляет конструктор создать новый объект, природа которого определяется вызываемым конструктором. Например, конструктор String () создает объекты String, а конструктор Array () — объекты Array. Именно так задаются имена объектных типов в JavaScript: по имени создающего объект конструктора.
Вот простой пример создания объекта:
var city = new String();
Этот оператор создает новый объект String и размещает ссылку на него в переменной city. Здесь конструктору не предлагается никаких аргументов, поэтому переменная city получит значение по умолчанию — в данном случае это пустая строка. Можно сделать этот пример более интересным, передав конструктору аргумент, задающий начальное значение:
var city = new String("Сан-Диего");
JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a property is an association between a name (or key ) and a value. A property"s value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, functions, and methods, and how to create your own objects.
Objects overviewObjects in JavaScript, just as in many other programming languages, can be compared to objects in real life. The concept of objects in JavaScript can be understood with real life, tangible objects.
In JavaScript, an object is a standalone entity, with properties and type. Compare it with a cup, for example. A cup is an object, with properties. A cup has a color, a design, weight, a material it is made of, etc. The same way, JavaScript objects can have properties, which define their characteristics.
Objects and propertiesA JavaScript object has properties associated with it. A property of an object can be explained as a variable that is attached to the object. Object properties are basically the same as ordinary JavaScript variables, except for the attachment to objects. The properties of an object define the characteristics of the object. You access the properties of an object with a simple dot-notation:
ObjectName.propertyName
Like all JavaScript variables, both the object name (which could be a normal variable) and property name are case sensitive. You can define a property by assigning it a value. For example, let"s create an object named myCar and give it properties named make , model , and year as follows:
Var myCar = new Object(); myCar.make = "Ford"; myCar.model = "Mustang"; myCar.year = 1969; myCar.color; // undefined
Properties of JavaScript objects can also be accessed or set using a bracket notation (for more details see property accessors). Objects are sometimes called associative arrays , since each property is associated with a string value that can be used to access it. So, for example, you could access the properties of the myCar object as follows:
MyCar["make"] = "Ford"; myCar["model"] = "Mustang"; myCar["year"] = 1969;
An object property name can be any valid JavaScript string, or anything that can be converted to a string, including the empty string. However, any property name that is not a valid JavaScript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation. This notation is also very useful when property names are to be dynamically determined (when the property name is not determined until runtime). Examples are as follows:
// four variables are created and assigned in a single go, // separated by commas var myObj = new Object(), str = "myString", rand = Math.random(), obj = new Object(); myObj.type = "Dot syntax"; myObj["date created"] = "String with space"; myObj = "String value"; myObj = "Random Number"; myObj = "Object"; myObj[""] = "Even an empty string"; console.log(myObj);
Please note that all keys in the square bracket notation are converted to string unless they"re Symbols, since JavaScript object property names (keys) can only be strings or Symbols (at some point, private names will also be added as the class fields proposal progresses, but you won"t use them with form). For example, in the above code, when the key obj is added to the myObj , JavaScript will call the obj.toString() method, and use this result string as the new key.
You can also access properties by using a string value that is stored in a variable:
Var propertyName = "make"; myCar = "Ford"; propertyName = "model"; myCar = "Mustang";
Using a constructor functionAlternatively, you can create an object with these two steps:
To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called Car , and you want it to have properties for make, model, and year. To do this, you would write the following function:
Function Car(make, model, year) { this.make = make; this.model = model; this.year = year; }
Notice the use of this to assign values to the object"s properties based on the values passed to the function.
Now you can create an object called mycar as follows:
Var mycar = new Car("Eagle", "Talon TSi", 1993);
This statement creates mycar and assigns it the specified values for its properties. Then the value of mycar.make is the string "Eagle", mycar.year is the integer 1993, and so on.
You can create any number of Car objects by calls to new . For example,
Var kenscar = new Car("Nissan", "300ZX", 1992); var vpgscar = new Car("Mazda", "Miata", 1990);
An object can have a property that is itself another object. For example, suppose you define an object called person as follows:
Function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; }
and then instantiate two new person objects as follows:
Var rand = new Person("Rand McKinnon", 33, "M"); var ken = new Person("Ken Jones", 39, "M");
Then, you can rewrite the definition of Car to include an owner property that takes a person object, as follows:
Function Car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; }
To instantiate the new objects, you then use the following:
Var car1 = new Car("Eagle", "Talon TSi", 1993, rand); var car2 = new Car("Nissan", "300ZX", 1992, ken);
Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects rand and ken as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:
Car2.owner.name
Note that you can always add a property to a previously defined object. For example, the statement
Car1.color = "black";
adds a property color to car1, and assigns it a value of "black." However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the Car object type.
Using the Object.create method See also- To dive deeper, read about the details of javaScript"s objects model .
- To learn about ECMAScript 2015 classes (a new way to create objects), read the JavaScript classes chapter.
Объект – это неупорядоченная коллекция свойств. Свойство – это часть объекта имитирующая переменную. Свойство состоит из имени и значения.
В JavaScript есть три категории объектов:
- Объекты базового типа – это объекты, определённые в спецификации ECMAScript. Например, объекты типа Array , Function , Date или RegExp являются объектами базового типа.
- Объекты среды выполнения – это объекты, определённые в среде выполнения (такой как браузер). Например, объекты типа HTMLElement , являются объектами среды выполнения.
- Пользовательские объекты – это любой объект, созданный в результате выполнения программного кода JavaScript.
Объект можно создать с помощью литерала объекта или оператора new с конструктором.
Литерал объекта – это заключённый в фигурные скобки список из нуля или более свойств (пар имя: значение), разделённых запятыми. Именем свойства может быть любой допустимый идентификатор, строковой литерал (допускается использовать пустую строку) или число. Числовые имена свойств автоматически преобразуются в строки. Значением свойства может быть значение любого типа или выражение (значением свойства в этом случае станет результат вычисления выражения):
// Создание пустого объекта var o = {}; // Создание объекта с тремя свойствами var user = { name: "Homer", "age": 45, 1: true };
Создание объекта с помощью оператора new :
Var o = new Object();
Операции с объектомОсновные операции производимые с объектами – это добавление новых свойств, изменение уже существующих свойств, удаление свойств и обращение к свойствам.
Добавить новое свойство в объект можно присвоив свойству значение. Чтобы присвоить свойству значение, к нему нужно получить доступ. Для доступа к свойству используется один из операторов доступа: . (точка) или (квадратные скобки):
Обращение к свойству и изменение значения осуществляется точно так же (с помощью операторов доступа):
Var o = {x:5}; alert(o.x); // Обращение к свойству alert(o["x"]); // Обращение к свойству o.x = 10; // Изменяем значение
Удаление свойства осуществляется с помощью оператора delete :
Var o = {x:5}; alert("x" in o); // true delete o.x; alert("x" in o); // false
Для перебора свойств объекта используется цикл for-in :
Var obj = {x: 5, y: 10, str: "Hi!"}; for (var prop in obj) { alert(prop); }
Методы объектаСвойство, значением которого является функция, называется методом . Вызов метода осуществляется точно также, как и вызов обычной функции – с помощью оператора () (оператор вызова):
Var o = { sayHi: function() { alert("Hello!"); } }; o.sayHi(); // "Hello!"
Для доступа к свойствам объекта внутри метода используется ключевое слово this . Оно содержит ссылку на объект, с помощью которого был вызван метод:
Var o = { name: "Homer", sayName: function() { alert(this.name); } }; o.sayName(); // "Homer"
Вместо ключевого слова this можно использовать непосредственно имя объекта, но это не очень удобно, так как, если изменится имя объекта, в методах придётся также изменять имя:
Var o = { name: "Homer", sayName: function() { alert(o.name); } }; o.sayName(); // "Homer"
В этой статье я хочу по возможности полно и последовательно рассказать о том, что такое объект в JavaScript, каковы его возможности, какие взаимоотношения могут строиться между объектами и какие способы «родного» наследования из этого вытекают, как это все влияет на производительность и что вообще со всем этим делать:)
В статье НЕ будет ни слова про: эмуляцию традиционной класс-объектной парадигмы, синтаксический сахар, обертки и фреймворки.
Сложность материала будет нарастать от начала к концу статьи, так что для профи первые части могут показаться скучными и банальными, но дальше будет намного интереснее:)
Объекты в JavaScript Во многих статьях встречается фраза «В JavaScript - всё объект». Технически это не совсем верно, однако производит должное впечатление на новичков:)Действительно, многое в языке является объектом, и даже то, что объектом не является, может обладать некоторыми его возможностями.
Важно понимать, что слово «объект» употребляется здесь не в смысле «объект некоторого класса». Объект в JavaScript - это в первую очередь просто коллекция свойств (если кому проще, может называть это ассоциативным массивом или списком), состоящая из пар ключ-значение. Причем ключом может быть только строка (даже у элементов массива), а вот значением - любой тип данных из перечисленных ниже.Итак, в JavaScript есть 6 базовых типов
данных - это Undefined (обозначающий отсутствие значения), Null, Boolean (булев тип), String (строка), Number (число) и Object (объект).
При этом первые 5 являются примитивными
типами данных, а Object - нет. Кроме того, условно можно считать, что у типа Object есть «подтипы»: массив (Array), функция (Function), регулярное выражение (RegExp) и другие.
Это несколько упрощенное описание, но на практике обычно достаточное.
Кроме того, примитивные типы String, Number и Boolean определенным образом связаны с не-примитивными «подтипами» Object: String, Number и Boolean соответственно.
Это означает, что строку "Hello, world", например, можно создать и как примитивное значение, и как объект типа String.
Если вкратце, то это сделано для того, чтобы программист мог и в работе с примитивными значениями использовать методы и свойства, как будто это объекты. А подробнее об этом можно будет прочитать в соответствующем разделе данной статьи.
Продемонстрируем это на примере: test=function () {alert("Hello!" )} //Создадим функцию {alert("Hello!")} (а функция, как мы помним, является полноправным объектом) и сделаем переменную test ссылкой на нее
test_link=test; //test_link теперь тоже ссылается на нашу функцию
test(); //Hello!
test_link(); //Hello!
Как мы видим, и первая ссылка, и вторая дают один и тот же результат.
Необходимо осознать, что у нас нет никакой функции с именем test, и что переменная test не является какой-то «главной» или «основной» ссылкой, а «test_link» - второстепенной.
Наша функция, как и любой другой объект - просто область в памяти, и все ссылки на эту область абсолютно равнозначны. Более того, объект может вообще не иметь ссылок - в таком случае он называется анонимным, и может быть использован только непосредственно сразу после создания (например, передан в функцию), иначе доступ к нему получить будет невозможно и в скором времени он будет уничтожен сборщиком мусора (garbage collection), который и занимается тем, что удаляет объекты без ссылок.
Посмотрим, почему так важно это понимать:
test_link=test; //Создаем еще одну ссылку на этот объект
Alert(test.prop); //sometext
//Изменяем свойство объекта
test_link.prop="newtext"
;
Alert(test.prop); //newtext
alert(test_link.prop); //newtext
/*Можно было бы сказать, что свойство изменилось и там и тут - но это не так.
Объект-то один. Так что свойство изменилось в нем один раз, а ссылки просто продолжают указывать туда, куда и указывают. */
//Добавляем новое свойство и удаляем старое
test.new_prop="hello"
;
delete test.prop;
Alert(test_link.prop); //undefined - такого свойства больше нет
alert(test_link.new_prop);
//Удаляем ссылку
delete test;
alert(test.new_prop);
/*В этом месте скрипт выкинет ошибку, потому что test уже не существует, и test.new_prop не существует тем более */
alert(test_link.new_prop); //hello
/* а вот тут все в порядке, ведь мы удалили не сам объект, а лишь ссылку на него. Теперь на наш объект указывает единственная ссылка test_link */
//Создаем новый объект
test=test_link; //Сперва снова создадим ссылку test
test_link={prop: "sometext"
} //А вот и новый объект
Alert(test_link.prop); //sometext
alert(test.prop); //undefined
/* Cоздание нового объекта разрывает ссылочную связь, и теперь test и test_link указывают на разные объекты.
Фактически, это равносильно удалению ссылки test_link и созданию ее заново, но уже указывающей на другой объект */
alert(test.new_prop); //hello - теперь test содержит ссылку на наш самый первый объект
* This source code was highlighted with Source Code Highlighter .
Такое поведение объектов часто вызывает массу вопросов у начинающих разработчиков, так что надеюсь данный текст внесет некоторую ясность. Если же мы хотим создать действительно новую, независимую копию объекта, а не ссылку - то единственный способ сделать это - создать новый объект и скопировать туда требуемые свойства.
Также стоит отметить, что работа с объектами по ссылке, помимо вышеперечисленных забавных эффектов дает также значительную экономию памяти, что немаловажно при широком использовании одного объекта в различных местах программы.
Примитивные значения Как я упоминал выше, типы данных String и Number могут быть как объектами, так и примитивными значениями.obj=new String("hello" ); //Создаем строку как объект
simple="hello" ; //Создаем примитивное значение
Alert(obj); //hello
alert(simple); //hello - пока все предсказуемо
Alert(obj.length); //6 - у объекта типа String есть свойство length, хранящее длину строки
alert(simple.length); //6
/* Хотя simple - не объект, мы можем обращаться к тому же набору свойств, что и у объекта типа String. Это довольно удобно */
Obj.prop="text"
;
simple.prop="text"
;
Alert(obj.prop); //text - раз obj обычный объект, то мы можем запросто придать ему еще одно свойство
alert(simple.prop); //undefined - а вот simple не объект, и этот номер у нас не пройдет
* This source code was highlighted with Source Code Highlighter .
Все то же самое справедливо и для типа Number, и для Boolean (ну, кроме того, что в них нет свойства length, а есть ряд других замечательных свойств).
Использование строк и чисел как объектов не несет в себе никакой практической пользы, т.к. примитивные значения удобнее в работе, но сохраняют при этом весь необходимый функционал. Тем не менее, для полноты картины необходимо понимать этот механизм.
Не стоит путать использование примитивных значений с использованием литералов - например, независимо от того, создаем мы массив как «test=new Array()» или как «test=», в результате все равно будет один и тот же объект. Никаких примитивных значений мы не получим.
Создание и использование объектов Итак, в отличии от языков, где реализована класс-объектная парадигма, нам не нужно создавать сначала класс, чтобы потом создать объект класса. Мы можем сразу создать объект, что и сделаем в следующем примере:test={
simple_property: "Hello" ,
object_property: {
user_1: "Петя" ,
user_2: "Вася"
},
function_property: function (user) {
alert(this .simple_property + ", " + this .object_property);
}
}
Test.function_property("user_1" ); //Hello, Петя.
* This source code was highlighted with Source Code Highlighter .
Перед нами объект test, имеющий 3 свойства, названия которых, как я надеюсь, говорят сами за себя. Больше всего нас в нем интересует свойство function_property, содержащее функцию. Такую функцию можно назвать методом объекта.
В нашей функции дважды используется ключевое слово this, которое является указателем (т.е. ссылкой) на объект, из которого вызывается функция. Таким образом, this.simple_property=test.simple_property="Hello", а this.object_property=test.object_property="Петя".
Необходимо четко осознавать, this всегда указывает именно на объект, из которого вызвана функция, а не на объект, к которому она принадлежит. Хотя в данном примере это один и тот же объект, это не всегда так.
Test2=new Object(); //Еще одна форма создания нового объекта, аналогичная test2={}
Test.function_property.call(test2, "user_1"
); //ошибка
/* Метод call позволяет вызвать функцию от имени другого объекта. В данном случае, мы вызываем метод function_property объекта test, и его this указывает уже не на объект test, а на объект test2. А т.к. в нем нет свойства object_property, то при попытке получить this.object_propertyскрипт выдаст ошибку */
//попробуем исправить ситуацию
test2.simple_property="Good day"
;
test2.object_property=test.object_property; //В данном случае воспользуемся указанием объекта по ссылке, чтобы не дублировать код
Test.function_property.call(test2, "user_1" ); //Good day, Петя.
* This source code was highlighted with Source Code Highlighter .
Из примера также должно быть видно, что нет четких этапов создания и использования объекта. Объект может быть как угодно модифицирован в любое время - до, после и даже во время использования. Это тоже важное отличие от «традиционного» ООП.Конструктор В примере выше мы создавали 2 объекта, обладающих некой схожестью. И там и там имелись свойства simple_property и object_property. Очевидно, что при написании реального кода также нередко встает задача создания одинаковых или просто похожих объектов. И разумеется, мы не должны каждый такой объект создавать вручную.
На помощь нам придет конструктор. Конструктор в JavaScript - это не часть класса (потому что здесь нет классов), а просто самостоятельная функция. Самая обычная функция.
make_me=function (_name) {alert("меня запустили" );
this .name=_name;
}
/* Давайте разберемся, что здесь происходит. Интерпретатор видит оператор new и проверяет, что находится справа от него. Т.к. make_me - это функция, и она может быть использована в качестве контруктора, то создается новый объект в памяти и запускается на выполнение функция make_me, причем ее this указывает как раз на этот новый объект. Далее этому объекту добавляется свойство name, которому присваивается значение из аргумента _name, и метод show_name. Также (не знаю в какой именно момент, но это и не важно) переменная child начинает указывать на наш новенький, только что рожденный объект */
Alert(child.name); //Вася
child.show_name(); //Вася
child2.show_name(); //Петя
Child2.show_name=function
() {alert("Не буду говорить свое имя"
);} //Не забываем, что можем изменять наши объекты в любой момент
child2.show_name(); //Не буду говорить свое имя
Child.show_name(); //Вася - дети никак не влияют друг на друга
* This source code was highlighted with Source Code Highlighter .
Также можно сравнить конструктора с отцом - он порождает ребенка, наделяя его определенными качествами, но сразу после создания ребенок становится полностью независим от родителя и может стать очень непохожим на своих братьев.
Если мы вспомним про описание типов данных в начале статьи, то становится понятно, что Object и его подтипы (Function, Array и другие) - это на самом деле конструкторы, придающие создаваемому объекту возможности функции, массива и т.д.
Итак, это уже намного лучше. У нас теперь есть возможность создавать объекты по некоторому образцу. Однако, не все еще хорошо. Во-первых, каждый созданный нами объект и все его свойства и методы занимают отдельное место в памяти, хотя во многом они повторяются. Во-вторых, как быть, если мы хотим сохранить связь между родителем и ребенком, и иметь возможность менять все дочерние объекты разом. На помощь нам придет прототип.Прототип Как у каждого ребенка есть отец и мать (хотя бы в биологическом смысле), также они есть и у каждого объекта в JavaScript. И если отец, как мы определелись, работает конструктором, то мать - это как раз прототип. Посмотрим, как это происходит:
make_me=function (_name) {
alert("меня запустили" );
this .name=_name;
this .show_name=function () {alert(this .name);}
}
/*
Видя ключевое слово function, интерпретатор проверяет код справа от него, и т.к. все ок - создает новый объект в памяти, который одновременно является нашей функцией. Затем, автоматически (без участия программиста) для этой функции создается свойство prototype, ссылающееся на пустой объект. Если бы мы это делали вручную, это выглядело бы как make_me.prototype=new Object();
Затем, данному объекту (на который указывает свойство prototype) также автоматически добавляется свойство constructor, указывающее обратно на функцию. Получается такая вот циклическая ссылка.
Теперь этот объект, который можно описать как {constructor: ...здесь ссылка на фунцию...} - и есть прототип функции.
*/
//Object - действительно, объект
alert(typeof
make_me.prototype.constructor); //Function - это наша функция
alert(make_me.prototype.constructor === make_me); //true
//Добавляем в прототип функции make_me новый метод
Child=new
make_me("Вася"
); //меня запустили
/* Теперь помимо всего того, что описано в предыдущем примере, дополнительно в объекте child создается скрытое свойство [], которое указывает на тот же объект, что и make_me.prototype. Т.к. свойство скрыто, мы не можем ни просмотреть его значение, ни изменить его - однако оно играет важную роль в дальнейшей работе */
Alert(child.name); //Вася
child.show_name(); //Вася
Child.set_name("Коля"
);
/* Сначала, интерпретатор ищет метод set_name в объекте child. Так как его там нет, он продолжает поиск в свойстве child.[], находит его там и запускает. */
child.show_name(); //Коля - теперь Васю зовут Коля:)
Make_me.prototype.show_name2=function () {alert("Привет, " + this .name;} //Т.к. прототип - это обычный объект, мы точно также можем его менять на лету
Child2=new
make_me("Петя"
);
child2.show_name2(); //Привет, Петя
child.show_name2(); //Привет, Коля - изменения в прототипе влияют не только на вновь созданные объекты, но и на все старые
Child2.show_name2=function
() {alert("Не буду говорить свое имя"
);} //Мы по прежнему можем изменить сам объект, при этом новый метод show_name2 в данном объекте (и только в нем) как бы "затрет" старый метод из прототипа
child2.show_name2(); //Не буду говорить свое имя - т.к. у нас теперь есть собственный метод show_name2, то он и вызывается, и поиск в прототипе не происходит
Child.show_name2(); //Привет, Коля - здесь все по прежнему
Make_me.prototype={prop: "hello" } //Попробуем пересоздать прототип заново
Alert(child.prop); //undefined
child.show_name2(); //Привет, Коля
/* Если вспомнить, что такое работа по ссылке, то все понятно. Пересоздание прототипа рвет связь, и теперь свойство [] у объектов child и child2 указывают на один объект (который раньше был прототипом функции make_me), а свойство make_me.prototype - на другой объект, который является новым прототипом функции make_me */
Child3=new
make_me("Олег"
);
alert(child3.prop); //hello - что и следовало ожидать
* This source code was highlighted with Source Code Highlighter .
Как видно из примера, пока отец сохраняет верность матери (т.е. пока протип функции остается прежним), все дети зависят от матери и чутко реагируют на все изменения в ней. Однако, стоит только родителям развестись (конструктор меняет прототип на другой) - дети тут же разбегаются кто куда и больше связи с ними нет.
Немного о терминологии
До тех пор, пока первичная связь между конструктором и прототипом не разорвана, мы можем наблюдать следующую картину:
alert("меня запустили" );
this .name=_name;
this .show_name=function () {alert(this .name);}
}
Make_me.prototype.set_name=function
(_name) {this
.name=_name;}
child=new
make_me("Вася"
);
Alert(typeof
make_me.prototype); //object - у функции есть свойство prototype
alert(typeof
child.prototype); //undefined - у созданного объекта НЕТ свойства prototype
alert(child.constructor.prototype === make_me.prototype); //true - зато у объекта есть свойство constructor, которое указывает на функцию-конструктор make_me, у которой, в свою очередь, есть свойство prototype
* This source code was highlighted with Source Code Highlighter .
Как я заметил после чтения многочисленных форумов на эту тему, основные проблемы возникают у людей, когда они путают свойство prototype у функции и скрытое свойство [] у объекта, созданного с помощью этой функции.
Оба этих свойства являются ссылкой на один и тот же объект (до тех пор, пока первичная связь прототипа с конструктором не нарушена), но это тем не менее разные свойства, с разными именами, одно из них доступно для программиста, а другое нет.
Необходимо всегда четко понимать, что если речь идет о прототипе конструктора - то это всегда свойство prototype, а если о прототипе созданного объекта - то это скрытое свойство [].
Наследование Теперь мы знаем, что у каждого объекта есть скрытая ссылка на прототип, а каждый прототип - это обычный объект.Наиболее чуткие читатели уже уловили запах рекурсии:)
Действительно, т.к. прототип - это обычный объект, то и он в свою очередь имеет ссылку на свой прототип, и так далее. Таким образом реализуется иерархия прототипов.
bird=function () {} //Это конструктор птички
bird.prototype.cry=function (){alert("Кри!" );} //Птичка умеет кричать
bird.prototype.fly=function (){alert("Я лечу!" );} //и летать
Duck=function
() {}
duck.prototype=new
bird();
duck.prototype.cry=function
(){alert("Кря-кря!"
);} //Утка кричит по другому
duck.prototype.constructor=duck; //Принудительно устанавливаем свойство prototype.constructor в duck, т.к. иначе оно будет ссылаться на bird
Billy = new
duck(); //Билли - это наша утка
billy.fly(); //Я лечу! - Билли может летать, потому что он птица
billy.cry(); //Кря-кря! - Билли кричит кря-кря, потому что он утка
* This source code was highlighted with Source Code Highlighter .
Так можно реализовывать иерархию любого уровня вложенности. Задача на звездочку Теперь, раз уж мы столько знаем обо всем этом, давайте попробуем разобраться, сколько всего происходит в этих трех строчках
make_me=function () {}
child=new make_me();
alert(child.toString()); //выводит
* This source code was highlighted with Source Code Highlighter .
В первой строке мы создаем новую функцию и переменную make_me, которая указывает на эту функцию. При этом создается прототип функции, make_me.prototype, в котором содержится свойство constructor, указывающее на make_me.
Но это далеко не все:)
Т.к. функция make_me - это тоже объект, то он в свою очередь имеет папу и маму, т.е. конструктор и прототип. Его конструктор - это родная функция языка Function(), а прототип - объект, содержащий в себе методы call, apply и т.д. - именно благодаря этому прототипу мы и можем пользоваться этими методами в любой функции. Таким образом, у функции make_me появляется свойство [], указывающее на Function.prototype.
В свою очередь, прототип конструктора Function - тоже объект, конструктором которого является (сюрприз!) Object (т.е. Function.prototype.[].constructor===Object), а прототипом - объект, содержащий стандартные свойства и методы объекта, такие как toString, hasOwnProperty и другие (другими словами - Function.prototype.[]["hasOwnProperty"] - это как раз тот самый метод, которым мы можем пользоваться во всех производных объектах - причем это именно собственной метод данного объекта, а не наследованный). Вот таким вот интересным образом мы обнаруживаем, что все виды объектов являются производными от Object.
Можем ли мы продолжить дальше? Оказывается, нет. Object.prototype именно потому и содержит базовые свойства объекта, что не имеет собственного прототипа. Object.prototype.[]=null; В этом месте путешествие по цепочке прототипов в поиске свойства или метода прекращается.
Еще один интересный факт - конструктором Object является Function. Т.е. Object.[].constructor===Function.
Налицо еще одна циклическая ссылка - конструктор Object это Function, а конструктор Function.prototype - это Object.
Вернемся к нашему примеру. Как создается функция мы уже поняли, теперь перейдем ко второй строке. Там мы создаем объект child, конструктором которого является функция make_me, а прототипом - make_me.prototype.
Ну и в третей строчке мы видим, как интепретатор поднимается по цепочке, от child к child.[] (он же make_me.prototype), затем к child.[].[] (он же Object.prototype), и уже там находит метод toString, который и запускает на выполнение.
Примеси Может показаться, что наследование через прототипы - единственный способ, возможный в JavaScript. Это не так.Мы имеем дело с очень гибким языком, который предоставляет не столько правила, сколько возможности.
Например, при желании мы можем вообще не использовать прототипы, а программировать с помощью концепции примесей. Для этого нам пригодятся наши старые добрые друзья - конструкторы.
man=function () {
this .live=function (){alert("Я живу" );} //Человек умеет жить
this .walk=function (){alert("Я иду" );} //Человек умеет ходить
}
//Это конструктор поэта
poet=function
(){
this
.kill=function
(){alert("Поэт убил человека"
);} //Поэт может убить человека
this
.live=function
(){alert("Я мертв"
);} //От этого человек умрет
}
Vladimir=new
man(); //Владимир - человек
vladimir.live(); //Я живу - он жив
vladimir.walk(); //Я иду - он ходит
Poet.call(vladimir); //Выполняем конструктор poet для объекта vladimir
vladimir.kill(); //Поэт убил человека
vladimir.live(); //Я мертв
//А теперь фокус
man.call(vladimir);
vladimir.live(); //Я живу
* This source code was highlighted with Source Code Highlighter .
Что мы видим в данном примере? Во-первых, это возможность наследования от нескольких объектов, не находящихся в одной иерархии. В примере их 2, но может быть сколько угодно.
Во-вторых, это отсутствие какой-либо иерархии вообще. Переопределение свойств и методов определяется исключительно поряком вызова конструкторов.
В-третьих, это возможность еще более динамически менять объект, причем именно отдельный объект, а не всех потомков, как при изменении прототипа.
Причем вопрос о цене довольно нетривиален, особенно если мы говорим о разработке под браузер Internet Explorer 6 и 7 версий.
1. Память - тут все просто. Во всех браузерах наследование на прототипах отнимает в разы меньше памяти, чем при создании методов через конструкторы. Причем, чем больше методов и свойств у нас есть, тем больше разница. Однако, стоит помнить, что если у нас не тысяча одинаковых объектов а всего лишь один, то расходы памяти в любом случае будут небольшими, т.к. здесь стоит учитывать другие факторы.
2. Процессорное время - здесь основные тонкости связанны именно с браузерами от Microsoft.
С одной стороны, объекты, где методы и свойства создаются через конструктор - могут создаваться в разы (в некоторых случаях в десятки и сотни раз) медленнее, чем через прототип. Чем больше методов - тем медленнее. Так что если у вас в IE замирает на несколько секунд во время инициализации скрипта - есть повод копать в эту сторону.
С другой стороны, собственные методы объекта (созданные через конструктор) могут выполняется немного быстрее, чем прототипные. В случае, если позарез необходимо ускорить именно выполнение какого-то метода в этом браузере, то нужно это учесть. Имейте ввиду, ускоряется именно вызов метода (т.е. поиск его в объекте), а не его выполнение. Так что если сам метод у вас выполняется секунду, то особого увеличения быстродействия вы не заметите.
В других браузерах подобных проблем наблюдается, там время создания объектов и вызова их методов примерно одинаково для обоих подходов.
P.S. Обычно в статьях подобного рода автор предлагает некую обертку, либо пытающуюся реализовать класс-объектное наследование на базе прототипного, либо просто синтаксический сахар для прототипного наследования. Я не делаю этого намеренно, т.к. считаю, что человек, понявший смысл данной статьи, способен сам для себя написать любую обертку, и еще много интересных вещей:)
Теги: Добавить метки
Условие задачи :
1. Есть три объекта (три автомобиля) : first_Car , second_Car и third_Car .
2. Каждый из объектов (автомобилей) имеет набор свойств и соответствующих им значений (характеристики автомобиля ).
3. Рассмотрим один из объектов:
var
first_Car = {
make:
"VAZ"
,
/* производитель */
model:
2106
,
/* модель */
year:
1980
,
/* год выпуска */
color:
"beige"
,
/* цвет */
passengers:
5
,
/* число пассажиров */
convertible: false,
/* откидной верх */
mileage:
80000
/* пробег */
}
Свойства make и color имеют строковые значения;
Свойства model , year , passengers и mileage - числовые значения;
Свойство convertible принимает булево значение.
Нужно сделать следующее :
Написать функцию, которая проверяет автомобиль по двум параметрам (год выпуска и пробег) и возвращает булево значение true или false .
Подробности :
1. Функция имеет один параметр car , в качестве которого получает один из 3-х объектов. Например, выше рассмотренный автомобиль first_Car .
2. Функция должна работать с любым подобным объектом.
Функция для проверки объекта - true или false
/* 1-ый объект */
var first_Car = {
make: "VAZ",
model: 2106,
year: 1980
,
color: "beige",
passengers: 5,
convertible: false,
mileage: 80000
}
/* 2-ой объект */
var second_Car = {
make: "VW",
model: "Passat b3",
year: 1990
,
color: "neptune",
passengers: 5,
convertible: false,
mileage: 160000
}
/* 3-ий объект */
var third_Car = {
make: "Hyundai",
model: "Solaris",
year: 2012
,
color: "wet asphalt",
passengers: 5,
convertible: false,
mileage: 15000
}
function good_Car(car) {
if (car.
year <
2000
){
return false;
}
else if (car.
mileage >
50000
){
return false;
}
else{
return true;
}
}
/* Вызов функции и Вывод результата */
var result =
good_Car
(
third_Car
);
document . write ( result );
Комментарии к решению:
- Итак, мы имеем три объекта (три автомобиля) , каждый из которых можно проанализировать при помощи функции good_Car .
- Функция good_Car имеет один параметр car , в качестве которого может выступать любой из объектов (автомобилей) : first_Car , second_Car или third_Car : function good_Car(car) .
- В теле Функции good_Car
составлено условие, согласно которому:
Если значение свойства year объекта car меньше 2000 (другими словами : если год выпуска автомобиля меньше 2 000) , то функция возвращает false;
Иначе, если значение свойства mileage объекта car больше 50000 (если пробег автомобиля больше 50 000) , то функция возвращает false;
Иначе функция возвращает true .
- Далее мы вызываем функцию и в качестве параметра указываем объект third_Car
(третий автомобиль)
, который успешно проходит проверку. Результат работы функции заносится в переменную
result
:
var result = good_Car(third_Car); . - Переменная result выводится на экран;
- Два других объекта (автомобиля) не будут соответствовать требованиям условия.
Продолжим работать с объектами в javascript .
Итак, рассмотренная выше функция при проверке объектов (автомобилей) выдает в результате true или false (истину или ложь) .
Можно немного улучшить качество восприятия решения рассмотренной задачи, то есть вместо true или false выводить какой-либо текст. Для этого составим условие для анализа результата.
/* 1-ый объект */
var first_Car = {
make: "VAZ",
model: 2106,
year: 1980
,
color: "beige",
passengers: 5,
convertible: false,
mileage: 80000
}
/* 2-ой объект */
var second_Car = {
make: "VW",
model: "Passat b3",
year: 1990
,
color: "neptune",
passengers: 5,
convertible: false,
mileage: 160000
}
/* 3-ий объект */
var third_Car = {
make: "Hyundai",
model: "Solaris",
year: 2012
,
color: "wet asphalt",
passengers: 5,
convertible: false,
mileage: 15000
}
/* Функция для проверки объекта */
function good_Car(car) {
if (car.
year <
2000
){
return false;
}
else if (car.
mileage >
50000
){
return false;
}
else{
return true;
}
}
var result =
good_Car
(
third_Car
);
if(result) {
document
.
write
("У Вас неплохой автомобиль: " +
third_Car
.
year
+ " год выпуска, с пробегом " +
third_Car
.mileage
+ " км."
);
}
else{
document
.
write
("Не будем говорить о Вашем автомобиле...."
);
}
Решение с условием для результата - Результат...
Условие для анализа результата составлено следующим образом.
- Выражение if(result)
является сокращенной формой записи выражения
if(result == true) . - Если результат работы функции good_Car
является истинным true
, то мы выводим на экран фразу: «У Вас неплохой автомобиль: 2012
год выпуска, с пробегом 15000
км.», где
2012 и 15000 - это значения свойств year и mileage объекта third_Car .
- Если же условие для проверки результата выдаст ложное значение false , то мы увидим: «Не будем говорить о Вашем автомобиле....». То есть рассматриваемый объект (автомобиль) не прошел проверку.
Но и это еще не все. Посмотрите внимательно на фрагмент кода для вызова функции и анализа результата:
/* Вызов функции и Анализ результата */
var result = good_Car(
third_Car
);
if(result) {
document.write("У Вас неплохой автомобиль: " + third_Car
.year
+ " год выпуска, с пробегом " + third_Car
.mileage
+ " км.");
}
else{
document.write("Не будем говорить о Вашем автомобиле....");
}
Здесь объект third_Car (третий автомобиль) указывается трижды:
- Первый раз при вызове функции good_Car он указан в качестве ее параметра: good_Car(third_Car) .
- И далее он фигурирует еще дважды, когда мы к нему обращаемся для указания его свойств: third_Car.year и third_Car.mileage .
Мне это не понравилось, так как при анализе другого объекта (автомобиля) нам придется его имя также указывать трижды !!!
Чтобы добиться одноразового указания анализируемого объекта, нужно и результат работы функции good_Car и анализ этого результата (то есть весь ) занести в еще одну функцию.
/* 1-ый объект */
var first_Car = {
make: "VAZ",
model: 2106,
year: 1980
,
color: "beige",
passengers: 5,
convertible: false,
mileage: 80000
}
/* 2-ой объект */
var second_Car = {
make: "VW",
model: "Passat b3",
year: 1990
,
color: "neptune",
passengers: 5,
convertible: false,
mileage: 160000
}
/* 3-ий объект */
var third_Car = {
make: "Hyundai",
model: "Solaris",
year: 2012
,
color: "wet asphalt",
passengers: 5,
convertible: false,
mileage: 15000
}
/* Функция для проверки объекта */
function good_Car(car
)
{
if (car
.year
< 2000){
return false;
}
else if (car
.mileage
> 50000){
return false;
}
else{
return true;
}
}
/* Заносим результат работы функции good_Car и Анализ результата в еще одну функцию */
function itog(car
){
var result
= good_Car(car
);
If(result
) {
document.write("У Вас неплохой автомобиль: " + car
.year
+ " год выпуска, с пробегом " + car
.mileage
+ " км.");
}
else{
document.write("Не будем говорить о Вашем автомобиле....");
}
}
itog( third_Car );
Решение с использованием еще одной функции - Результат...
У Вас неплохой автомобиль: 2012 год выпуска, с пробегом 15000 км.
