1 Объектно-ориентированное программирование на JavaScript Преподаватель: Танаков А.И. Подготовил Д. А. Быстров.

1 Объектно-ориентированное программирование на JavaScript Преподаватель: Танаков А.И. Подготовил Д. А. Быстров

2 Литература ООП в Javascript: наследование  http://javascript.ru/tutorial/object/inheritance http://javascript.ru/tutorial/object/inheritance Стандарт ECMA-262, 3я редакция  http://javascript.ru/ecma http://javascript.ru/ecma Прототипное программирование  http://ru.wikipedia.org/wiki/Прототипное_программирование http://ru.wikipedia.org/wiki/Прототипное_программирование Большие хитрости JavaScript  http://dklab.ru/chicken/nablas/39.html http://dklab.ru/chicken/nablas/39.html

Объекты Объект в javascript представляет собой обычный ассоциативный массив ("хэш"). Он хранит любые соответствия "ключ => значение" и имеет несколько стандартных методов. Метод объекта в javascript - это просто функция, которая добавлена в ассоциативный массив. 3

Создание объекта var o = new Object() var o = {} 4

Добавление свойств и доступ к ним o.test = 5 o["test"] = 5 alert(o.test) alert(o['test']) 5

Удаление свойств o.test = 5 delete o.test 6

Расширенное создание var o = { test: 5, bla: true } 7

var rabbit = {} rabbit.run = function(n) { alert("Пробежал "+n+" метров!") } rabbit.run(5) // Пробежал 5 метров 8

Перебор свойств объекта for(var key in object) { // key - название свойства // object[key] - значение свойства... } 9

Перебор свойств объекта for(prop in object) { // пропускаем свойства прототипа if ( ! object.hasOwnProperty(prop) ) continue; //... } 10

Свойства класса Object сonstructor – ссылка на функцию-конструктор prototype – ссылка на объект-прототип var o = new Complex(1,2); if ((typeof o == "object") && (o.constructor == Complex)){ // точно знаем, что o «класса» Complex } 11

Методы класса Object toString() – строковое представление объекта valueOf() – примитивное значение объекта watch() – добавляет точку наблюдения unwatch() – удаляет точку наблюдения hasOwnProperty() – определено ли неунаследованное свойство isPrototypeOf() – является ли свойство объектом-прототипом 12

Ключевое слово this как функция  func(параметры)this = window как метод  obj.func(параметры)this = obj  obj[“func”](параметры) apply/call  func.apply(obj, [параметры])this = obj  func.call(obj, параметры) Конструктор  new func (параметры)this = новый объект 13

14 В мире животных Animal RabbitBirdHamster

15 Прототипное программирование Объект создаётся путём клонирования другого объекта – прототипа Языки программирования: Self, JavaScript, Lua и т.д. Два метода создание объектов:  клонирование существующего объекта  «с нуля» Делегирование Каскадирование

16 Создание объекта. Функция-конструктор function Animal(name) { this.name = name; this.canWalk = true; } var animal = new Animal("скотинка") ; alert( animal.name); // => 'скотинка' alert( animal.canWalk); // => true alert(animal instanceof Animal); // => true

17 Кролик – это животное function Rabbit(name) { this.name = name } Rabbit.prototype = animal; big = new Rabbit('Chuk'); small = new Rabbit('Gek'); alert(big.name); // Chuk alert(small.name); // Gek alert(big.canWalk); // true

18 Свойство prototype и прототип Скрытое свойство прототип [[prototype]] function Rabbit(name) {…} Rabbit.prototype = animal;

19 Перекрытие свойств родителя animal.canWalk = false; small.canWalk = true; alert(big.canWalk); // false; alert(small.canWalk); // true

20 Методы объекта Animal.prototype.move = function(n) { this.distance = n; alert(this.distance); } var animal = new Animal("животное"); animal.move(3); // => 3 animal.move(4); // => 4...

21 Добавление методов объекту в его конструкторе function Animal(n) { // конструируем объект..... // добавляем методы this.move = function(n) { this.distance = n; alert(this.distance); }

22 Свойства неэлементарных типов. Проблема function Hamster() { } Hamster.prototype = { food: [], found: function(something) { this.food.push(something) }

23 Свойства неэлементарных типов. Решение function Hamster() { this.food = []; } Hamster.prototype = { food: [], found: function(something) { this.food.push(something) }

24 Наследование на классах function Animal(name){…} Animal.prototype = {…} function Rabbit(name){…} Rabbit.prototype = new Animal(); Rabbit.prototype.run = function(..) {... }

25 Наследование на классах. Проблема function Animal(name){…} Animal.prototype = {…} function Rabbit(name){…} Rabbit.prototype = new Animal(); Rabbit.prototype.run = function(..) {... }

26 Наследование на классах. Функция extend function extend(Child, Parent) { var F = function() { }; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.superclass = Parent.prototype; }

27 Функция extend. Использование function Animal(...) {... } Animal.prototype.move = function(…) {…} function Rabbit(...) {... }; extend(Rabbit, Animal); Rabbit.prototype.run = function(...) {... } rabbit = new Rabbit(…); rabbit.move(3); rabbit.run(5);

28 Вспомогательный объект F function extend(Child, Parent) { var F = function() { }; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.superclass = Parent.prototype; }

29 Меняем F.prototype function extend(Child, Parent) { var F = function() { }; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.superclass = Parent.prototype; }

30 Prototype для дочернего класса function extend(Child, Parent) { var F = function() { }; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.superclass = Parent.prototype; } Child.prototype.[[prototype]] = (new F).[[prototype]] = Parent.prototype

31 Поправить свойство constructor function extend(Child, Parent) { var F = function() { }; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.superclass = Parent.prototype; } function Z() {} alert(Z.prototype.constructor); // => функция Z z = new Z(); alert(z.constructor); // => функция Z

32 Сохранить суперкласс function extend(Child, Parent) { var F = function() { }; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.superclass = Parent.prototype; }

33 Вызов родительских методов function Rabbit(…) { … Rabbit.superclass.constructor.apply(this, arguments);... } Rabbit.prototype.move = function(...) { Rabbit.superclass.move.apply(this,...); }

34 Оператор instanceOf alert(animal instanceof Animal); // => true Алгоритм оператора instanceOf: function instanceOf(object, constructor) { var o=object; while (o.__proto__ != null) { if (o.__proto__ === constructor.prototype) return true; o = o.__proto__; } return false; }

35 Фабрика объектов function Animal(name) { var speed = 10; var me = { name: name, run: function(dist) {return dist / speed;} }; me.constructor = arguments.callee; return me; } pet1 = Animal(); pet2 = Animal();

Приватные члены класса function Animal(name, walkSpeed) { // объявить приватную переменную var speed = walkSpeed; // объявить открытую переменную this.distance = 0; // добавить метод, использующий private speed this.walk = function(time) { this.distance = this.distance + time*speed; } …. 36

Protected члены класса Нет такого способа для JavaScript Реализуются указанием в названии открытых методов, что их можно использовать только в наследниках, например так:  this._protectedMethod = function(…){} 37

41 Фабрика объектов. Создание потомка function Rabbit(name) { var me = Animal(name); var jumps = 0; me.jump = function() { jumps++ } me.getJumps = function() { return jumps } me.constructor = arguments.callee; return me }

46 Фабрика объектов. instanceOf Оператор instanceOf при таком наследовании не работает Проверка на нужный метод if (arr.splice) { … arr.splice(…); … }

47 Вызов свойств родителя function Rabbit(name) { var me = animal(name); var jumps = 0; me.jump = function() { jumps++ } me.getJumps = function() { return jumps } var super_run = me.run; me.run = function(distance) { this.jump(); return super_run.call(this, distance); } return me; }

Множественное наследование function SomeClass(_Arg1, _Arg2){ Parent1.call(this, Arg1); Parent2.call(this, Arg2); // далее, собственные методы и свойства SomeClass } 50

51 Вопросы

1 Объектно-ориентированное программирование на JavaScript Преподаватель: Танаков А.И. Подготовил Д. А. Быстров.

Similar presentations

Presentation on theme: "1 Объектно-ориентированное программирование на JavaScript Преподаватель: Танаков А.И. Подготовил Д. А. Быстров."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

1 Объектно-ориентированное программирование на JavaScript Преподаватель: Танаков А.И. Подготовил Д. А. Быстров.

Similar presentations

Presentation on theme: "1 Объектно-ориентированное программирование на JavaScript Преподаватель: Танаков А.И. Подготовил Д. А. Быстров."— Presentation transcript:

Similar presentations

About project

Feedback