Jscript объекты. Javascript Object: создание объектов и работа. Все про свойства

Тема урока: «Вставка и удаление элементов массива».

Предмет: Информатика и ИКТ.

Класс: 10 (профиль).

Ключевые слова: информатика, практическая работа, программирование, массивы, вставка, удаление элементов.

Тип урока: практическая работа.

Оборудование: Раздаточный материал; персональные компьютеры.

Литература:

    Попов В.Б. Turbo Pascal для школьников: Учебн. пособие - 3-е доп. изд. – М.: Финансы и статистика, 2004, - 528 с.: ил.

    Семашко Г.Л., Салтыков А.И. «Программирование на языке паскаль», М: «Наука», 1993 г.

    ФароновВ. В. « Turbo Pascal 7.0. Начальный курс», М: «Нолидж», 1997 г.

Цель работы:

    разобрать принципы вставки и удаления элементов в одномерных и двумерных массивах,

    закрепить полученные знания, путем решения задач.

Время выполнения: 2 урока.

Ход урока.

I . Удаление элементов из массива.

Одномерный массив

Двумерный массив

Постановка задачи:

Дан массив A (N ). Удалить элемент, расположенный на месте k .

Дан массив B (N ,M ). Удалить столбец с номером k . (аналогично для удаления строки)

Описание способа удаления:

Сдвинуть весь «хвост» массива, начиная с элемента с номером k +1, на одну позицию влево, т.е. выполняя операцию: a i =a i +1 , где i = k , k +1, …, N -1

Полученный массив будет содержать N -1 элемент.

Сдвинуть все столбцы, начиная с k +1 по m на одну позицию влево, выполнив операции:

Для j от 1 до m -1 делать

a i , j =a i , j +1

Дано: 3 5 7 8 9 N=5, k=2

Операции: a 2 :=a 3 ; a 3 :=a 4 ; a 4 :=a 5

Итог: 3 7 8 9

Дано: N =3, M =4, k =2 Операции: Результат:

1 5 2 7 a 1,2:=a 1,3 ; a 1,3:=a 1,4 ;

8 4 3 5 a 2,2:=a 2,3 ; a 2,3:=a 2,4 ;

0 9 1 4 a 3,2:=a 3,3 ; a 3,3:=a 3,4 ;

Программа

Randomize ;

Writeln (‘Введите количество элементов’);

Readln (n );

Writeln (‘Введите № удаляемого элемента’);

Readln (k );

{формирование массива случайным образом}

For i:=1 to n do begin

a[i]:=random(101)-50;

end ;

writeln ;

{удаление заданного элемента}

For i:=k to n-1 do

{ выводитоговогомассива}

For i:=1 to n-1 do

clrscr; randomize;

writeln(" Введитекол- вострокистолбцов");

writeln(" Введите № удаляемогостолбца");

for i:=1 to n do begin {формируем массив}

for j:=1 to m do begin

b:=51*random-25;

write(b:8:2)

for j:=k to m-1 do { удаляем k- ыйстолбец}

for i:=1 to n do

b:=b;

{выводим получ енный массив}

for i:=1 to n do begin

for j:=1 to m-1 do begin

write(b:8:2)

    В одномерном массиве A (N ) найти min элемент и удалить его.

    В двумерном массиве B (N ,M ) удалить строку с номером k . При этом выполнить проверку: не превышает ли значение k количества строк массива B .

II . Вставка (включение) элементов в массив.

Одномерный массив

Двумерный массив

Постановка задачи:

Дан массив A (N ). Включить на k место в этом массиве элемент, равный m .

Дан массив B (N ,M ). Добавить столбец с номером k . Элементы нового столбца равны элементам массива C (N ).(аналогично для добавления строки)

Описание способа удаления:

Перед включением заданного элемента в массив, необходимо раздвинуть этот массив, т.е. передвинуть «хвост» массива вправо на одну позицию, т.е. выполняя операцию: a i +1 =a i , где i = N , N -1, …, k . Перемещение элементов массива начинаем с конца, в противном случае весь хвост массива заполнится k -ым элементом.

Размер массива увеличится до N +1 элемента.

Сдвинуть все столбцы, начиная с m по k на одну позицию вправо, выполнив операции:

для j от m до k делать

Перебрать все строки с 1 по n , выполнив

a i , j +1 =a i , j

Затем в i =1-ой по n строках a i , k :=c i

В новом массиве будет M -1 столбец.

Важно: при добавлении столбца (строки) в двумерный массив, элементы этого столбца (строки) берутся из дополнительного одномерного массива размером = кол-ву строк двумерного массива (=кол-ву столбцов) либо вводятся с клавиатуры.

Дано: 3 8 7 6 5 N=5, k=2, m=4

Операции: a 6 :=a 5 =5; a 5 :=a 4 =6; a 4 :=a 3 =7; a 3 :=a 2 =8

Итог: 3 4 8 7 6 5

Дано: N =3, M =4, k =3 Операции: Результат:

C(N)={6,8,2} a 1,5:=a 1,4 ; a 1,4:=a 1,3 ;

1 5 2 7 a 2,5:=a 2,4 ; a 2,4:=a 2,3 ;

8 4 3 5 a 3,5:=a 3,4 ; a 3,4:=a 3,3 ;

Программа

Var a:array of integer;

n,k,i:byte; m:integer;

Writeln(" Введитеколичествоэлементов");

Writeln(" Введите № включаемогоэлемента");

Readln (k );

Writeln ("Введите значение включаемого эл-та");

{ формируеммассив}

For i:=1 to n do begin

a[i]:=random(101)-50;

end ; writeln ;

{раздвигаем эл-ты массива}

For i:=n downto k do

a :=a ;

{заносим новый эл-т на k-ую позицию}

a :=m ;

{выводим получившийся массив}

For i:=1 to n+1 do

var b:array of real; i,j,m,n,k:byte;

c:array of real;

clrscr; randomize;

writeln ("Введите кол-во строк и столбцов");

readln (n ,m );

writeln ("Введите № добавляемого столбца");

for i:=1 to n do begin {формируем исходный массив}

for j:=1 to m do begin

b:=51*random-25;

write(b:8:2)

end;writeln;end;writeln;

for i:=1 to n do begin {форм. массив доб-го столбца}

c[i]:=51*random-25; write(c[i]:8:2)

end; writeln; writeln;

for j:=m downto k do {раздвигаем столбцы}

for i:=1 to n do

b:=b;

for i:=1 to n do {добавляем столбец}

for i:=1 to n do begin {выводим полученный массив}

for j:=1 to m+1 do begin

write(b:8:2)

end; readln end.

Задачи для самостоятельного решения:

    В одномерном массиве A (N ) найти max элемент и вставить за ним элемент равный 2*max .

    В двумерном массиве B (N ,M ) вставить k -ую строку элементов массива C (M ). При этом выполнить проверку: не превышает ли значение k количества строк массива B .

место пятого - шестой.

X[ 3 ] : =X [ 4 ];

X[ 4 ] : =X [ 5 ];

X[ 5 ] : =X [ 6 ];

Таким образом, все элементы с третьего по пятый надо переместить влево на один - на место i -го элемента нужно записать (i+1) -й. Блок-схема алгоритма представлена на рис. 5.25 .


Рис. 5.25.


Рис. 5.26.


Рис. 5.27.

Теперь рассмотрим более общую задачу: необходимо удалить m -й элемент из массива X , состоящего из n элементов. Для этого достаточно записать элемент (m+1) -й на место элемента c номером m, (m+2) -й элемент - на место (m+1) -го и т. д., n -й элемент - на место (n–1) -го. Процесс удаления элемента из массива представлен на рис. 5.26 .

Алгоритм удаления из массива Х размерностью n элемента с номером m приведён на рис. 5.27 .

После удаления элемента 4А фактически сдвига части массива на один элемент влево из массива изменится количество элементов в массиве (уменьшится на один), и у части элементов изменится индекс . Если элемент удалён, то на место него приходит следующий, передвигаться к которому (путём увеличения индекса на один) нет необходимости. Следующий элемент сам сдвинулся влево после удаления.

Если обрабатывается массив , в котором часть элементов удаляется, то после удаления элемента не надо переходить к следующему (при этом уменьшается количество элементов). В качестве примера рассмотрим следующую задачу.

ЗАДАЧА 5.1. Удалить из массива отрицательные элементы.

Алгоритм решения задачи довольно прост: перебираем все элементы массива, если элемент отрицателен, то удаляем его путём сдвига всех последующих на один влево. Единственное, о чём стоить помнить, - что после удаления элемента не надо переходить к следующему для последующей обработки, он сам сдвигается на место текущего. Блок-схема решения задачи 5.1 представлена на рис. 5.28 .

Ниже представлен текст программы с комментариями.

program upor_massiv; var i, n, j: byte; X: array [ 1.. 100 ] of real; begin writeln (’введите размер массива ’); readln (n); {Ввод массива.} for i:=1 to n do begin write (’X[ ’, i, ’ ]= ’); readln (X[ i ]); end; writeln (’массив X ’); for i:=1 to n do write (x [ i ] : 5: 2, ’ ’); writeln; i: = 1; while (i<=n) do {Если очередной элемент массива X[i] отрицателен, то} if x [ i ]<0 then begin {удаляем элемент массива с номером i.} for j:= i to n_1 do x [ j ] : = x [ j + 1 ]; {Уменьшаем размер массива.} {Не надо переходить к следующему элементу массива.} n:=n -1; end else {Если элемент не удалялся, то переходим к следующему элементу массива.} i:= i +1; writeln (’Изменённый массив ’); for i:=1 to n do {Вывод преобразованного массива.} write (X[ i ] : 5: 2, ’ ’); writeln; end.


Рис. 5.28.

Результаты работы программы представлены на рис. 5.29 .


Рис. 5.29.

5.9 Вставка элемента в массив

Рассмотрим несложную задачу: вставить число b в массив X(10) , между третьим и четвёртым элементами.

Для решения этой задачи необходимо все элементы массива, начиная со четвёртого, сдвинуть вправо на один элемент. Затем в четвёртый элемент массива нужно будет записать b (X:=b;) . Но чтобы не потерять соседнее значение , сдвигать на один вправо нужно сначала десятый элемент, затем девятый, восьмой и т. д. до четвёртого. Блок-схема алгоритма вставки приведена на рис. 5.30 .


Рис. 5.30.

В общем случае блок-схема вставки числа b в массив X(N) , между элементами c номерами m и m+1 представлена на рис. 5.31 .


Рис. 5.31.

Ниже представлен фрагмент программы, реализующий этот алгоритм 5При описании массива необходимо предусмотреть достаточный размер для вставки одного элемента. .

var i, n,m: byte; X: array [ 1.. 100 ] of real; b: real; begin writeln (’N= ’); readln (n); for i:=1 to n do begin write (’X[ ’, i, ’ ]= ’); readln (X[ i ]); end; writeln (’Массив X ’); for i:=1 to n do write (x [ i ] : 5: 2, ’ ’); writeln; writeln (’m= ’); readln (m); writeln (’ b= ’); readln (b); for i:=n downto m+1 do x [ i +1]:=x [ i ]; x :=b; n:=n+1; writeln (’Изменённый массив ’); for i:=1 to n do write (X[ i ] : 5: 2, ’ ’); writeln; end.

5.10 Использование подпрограмм для работы с массивами

Рассмотрим, как можно передавать массивы в подпрограмму. Как известно (см. главу 4), чтобы объявить переменные в списке формальных параметров подпрограммы, необходимо указать их имена и типы. Однако типом любого параметра в списке может быть только стандартный или ранее объявленный тип. Поэтому для того, чтобы передать в подпрограмму массив , необходимо вначале описать его тип 6Тип данных массива, объявление массива см. в п. 2.4.9. Подробно работа с массивами описана в данной главе. , а затем объявлять процедуру:

тип_массива = array [ список_индексов ] of тип;

procedure

имя_процедуры(имя_массива: тип_массива);

Например:

type vector=array [ 1.. 10 ] of byte; matrica=array [ 1.. 3, 1.. 3 ] of real; procedure proc (A: matrica; b: vector; var x: vector);

Понятно, что передача в подпрограмму строки вида

имя_переменной: string [ длина_строки ];

которая фактически является массивом 7Тип данных "строка", объявление строки см. в п. 2.4.9 , должна осуществляться аналогично:

тип_строки = string [ длина_строки ];

procedure

имя_процедуры(имя_строки: тип_ строки);

Например:

type stroka_5=string [ 5 ]; stroka_10=string [ 1 0 ]; function fun (S t r: stroka_5) : stroka_10;

Массивы в подпрограмму можно передавать, используя понятие открытого массива. Открытый массив - это массив 8Тип данных "массив", объявление массива, обращение к массиву см. в п. 2.4.9. , при описании которого указывается тип элементов, из которых он состоит, но не определяются границы изменения индексов:

имя_открытого_массива: array of array of... тип;

Например:

var massiv_1: array of real; massiv_2: array of array of char; massiv_3: array of array of array of byte;

Распределение памяти и указание границ индексов

Вставка и удаление в массиве

Основным достоинством массива является прямой доступ к его элементам: для использования элемента нужно указать только имя массива и индекс (или индексы), которые преобразуются в физический адрес элемента. Скорость доступа не зависит от положения элемента в структуре.

Недостаток связан с операциями вставки и удаления элементов. Допустим, одномерный массив arrTable используется для хранения в своих элементах полезной информации, причем содержат информацию только начальные элементы, число которых равно Count. Эти «занятые» элементы называются активными , активные элементы имеют индексы в диапазоне . Очевидно, LastIndex = Count - 1. Если, например, в массив нужно вставить новую информацию в элемент с индексом ind, то все элементы с индексами, начиная с ind и до конца активной части, потребуется переместить на одну позицию, чтобы освободить место под вставляемый элемент NewElement. Эта операция может быть описана следующим фрагментом:

For i:= LastIndex DownTo indDo

arrTable := arrTable [i];

arrTable := NewElement;

Inc(Count); Inc(LastIndex);

Сдвиг части элементов означает их физическое перемещение в памяти. Логическая схема операции вставки показана на рисунке 5.4

Рисунок 5.4 - Вставка в вектор нового элемента: а - до вставки, б - после вставки

Объем памяти, который будет затронут при вставке нового элемента, зависит от значения n и количества сдвигаемых элементов. Время, требуемое на выполнение вставки, зависит от числа активных элементов в массиве: чем больше это количество, тем больше (в среднем) потребуется времени на сдвиг.

Тот же ход рассуждений справедлив и для операции удаления активного элемента из вектора. В случае удаления элемента с индексом ind, все элементы, начиная с элемента arrTable, должны быть перенесены на одну позицию к началу вектора, чтобы «закрыть» образовавшуюся от удаления элемента «дыру». Логическая схема операции удаления приводится на рисунке 5.5. Программный фрагмент удаления может иметь вид:

For i:= ind + 1 To LastIndexDo

arrTable := arrTable [i];

Dec(Count); Dec(LastIndex);

Таким образом, можно сделать вывод: операции вставки и удаления в массиве выполняются медленнее при увеличении количества элементов.

Другой важный недостаток массива связан с фиксацией его размеров. Если необходимо вставить новый элемент в статический массив, который полностью заполнен активными элементами, то произойдет ошибка времени выполнения. Решением проблемы является использование динамического массива, однако приходится все время контролировать текущее число элементов и применять процедуру SetLength при вставке в полностью заполненный массив.

Когда нужно произвести какие-то изменения в массиве, метод JavaScript splice может прийти на помощь. Он позволяет осуществлять вставку, удаление и замену элементов в массиве JavaScript .

Рассмотрим аргументы, передаваемые в метод splice() .

Array.splice (start_index, number_of_elements_to_remove) :

  • start_index — индекс в массиве, с которого начинается вставка или удаление элементов;
  • number_of_elements_to_remove — задает количество элементов, которое необходимо удалить, начиная со star_index .

Все элементы, следующие за number_of_elements_to_remove , будут вставлены в массив, начиная с start_index . Они могут быть любого типа, включая строки, числа, булевы значения, объекты, функции, NULL , undefined , и т.д.

Для более детального изучения параметров метода Array.prototype.splice() Javascript воспользуйтесь MDN .

Давайте начнем с простого примера, демонстрирующего, как вставить число в массив с помощью метода Array.splice() .

Представьте, что у нас есть массив , и мы хотим вставить в него 2 между 1 и 3 . Пример реализации:

var my_array = ; var start_index = 1; var number_of_elements_to_remove = 0; my_array.splice(start_index, number_of_elements_to_remove, 2); console.log(my_array); //;

Обратите внимание, что JavaScript array splice воздействует непосредственно на массив. Таким образом, вызванный my_array метод splace() вместо того, чтобы вернуть новый массив, обновит my_array .

Пример удаления элемента из массива в JavaScript :

var my_array = ["a","b","c","k","d"]; var start_index = 3 var number_of_elements_to_remove = 1; var removed_elements = my_array.splice(start_index, number_of_elements_to_remove); console.log(removed_elements); //["k"] console.log(my_array); //["a","b","c","d"];

Обратите внимание, что в этом примере метод Array.splice() возвращает массив из удаленных элементов.

Взглянем на пример замены элементов в массиве JavaScript с помощью метода splice JavaScript :

var my_array = ["бейсбол", "баскетбол", "теннис", "гольф"]; var start_index = 1 var number_of_elements_to_remove = 2; var removed_elements = my_array.splice(start_index, number_of_elements_to_remove, "бокс", "боулоинг", "волейбол"); console.log(removed_elements); //["теннис", "гольф"] console.log(my_array); //["бейсбол", "бокс", "боулинг", "волейбол", "гольф"];

Приведенный выше пример заменяет «баскетбол » и «теннис » на «бокс «, «боулинг » и «волейбол «. Он может показаться немного запутанным из-за всех проведенных операций. Разберем все операции шаг за шагом. Для начала мы сообщаем методу splace() начальную позицию my_array . Затем number_of_elements_to_remove задаем 2, поэтому метод удаляет my_array и my_array . И, наконец, начиная со start_index my_array , вставляем в массив my_array элементы.

Метод JavaScript splace хорош, когда нужно вставить или удалить значения из массива t . Если массив уже отсортирован, метод splace() подходит, чтобы явно расположить новые значения в массиве. Он также хорошо работает, когда нужно удалить значения из массива по индексу. Обратите внимание на то, что метод splace() действует непосредственно на массив и возвращает только те значения, которые были удалены или вырезаны из массива.

Перевод статьи “Insert, Remove, and Replace elements with Array.splice() ” был подготовлен дружной командой проекта .

Хорошо Плохо

В этой статье я хочу по возможности полно и последовательно рассказать о том, что такое объект в 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={prop: "sometext" } //Создаем объект со свойством prop
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 всегда указывает именно на объект, из которого вызвана функция, а не на объект, к которому она принадлежит. Хотя в данном примере это один и тот же объект, это не всегда так.

test.function_property("user_1" ); //Hello, Петя.

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 .

Как видно из примера, пока отец сохраняет верность матери (т.е. пока протип функции остается прежним), все дети зависят от матери и чутко реагируют на все изменения в ней. Однако, стоит только родителям развестись (конструктор меняет прототип на другой) - дети тут же разбегаются кто куда и больше связи с ними нет.

Немного о терминологии
До тех пор, пока первичная связь между конструктором и прототипом не разорвана, мы можем наблюдать следующую картину:

make_me=function (_name) {
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, но может быть сколько угодно.
Во-вторых, это отсутствие какой-либо иерархии вообще. Переопределение свойств и методов определяется исключительно поряком вызова конструкторов.
В-третьих, это возможность еще более динамически менять объект, причем именно отдельный объект, а не всех потомков, как при изменении прототипа.

Upd: Замыкания и приватные свойства

Чтобы не раздувать эту и без того немаленькую статью, даю ссылку на пост Замыкания в JavaScript , где про это довольно подробно написано.

Что теперь со всем этим делать

Как я уже говорил выше, и произвольное изменение отдельных объектов, и использование конструкторов, и примеси, и гибкость прототипов - это лишь инструменты, возможности, которые позволяют программисту создать как ужасный, так и прекрасный во всех отношениях код. Важно лишь понимать, какие задачи мы решаем, какими средствами, какие цели достигаем и какую цену платим за это.

Причем вопрос о цене довольно нетривиален, особенно если мы говорим о разработке под браузер Internet Explorer 6 и 7 версий.
1. Память - тут все просто. Во всех браузерах наследование на прототипах отнимает в разы меньше памяти, чем при создании методов через конструкторы. Причем, чем больше методов и свойств у нас есть, тем больше разница. Однако, стоит помнить, что если у нас не тысяча одинаковых объектов а всего лишь один, то расходы памяти в любом случае будут небольшими, т.к. здесь стоит учитывать другие факторы.
2. Процессорное время - здесь основные тонкости связанны именно с браузерами от Microsoft.
С одной стороны, объекты, где методы и свойства создаются через конструктор - могут создаваться в разы (в некоторых случаях в десятки и сотни раз) медленнее, чем через прототип. Чем больше методов - тем медленнее. Так что если у вас в IE замирает на несколько секунд во время инициализации скрипта - есть повод копать в эту сторону.

С другой стороны, собственные методы объекта (созданные через конструктор) могут выполняется немного быстрее, чем прототипные. В случае, если позарез необходимо ускорить именно выполнение какого-то метода в этом браузере, то нужно это учесть. Имейте ввиду, ускоряется именно вызов метода (т.е. поиск его в объекте), а не его выполнение. Так что если сам метод у вас выполняется секунду, то особого увеличения быстродействия вы не заметите.

В других браузерах подобных проблем наблюдается, там время создания объектов и вызова их методов примерно одинаково для обоих подходов.

P.S. Обычно в статьях подобного рода автор предлагает некую обертку, либо пытающуюся реализовать класс-объектное наследование на базе прототипного, либо просто синтаксический сахар для прототипного наследования. Я не делаю этого намеренно, т.к. считаю, что человек, понявший смысл данной статьи, способен сам для себя написать любую обертку, и еще много интересных вещей:)

Теги: Добавить метки