Объектная модель в JavaScript Объектная модель в языке JavaScript основана на прототипах в противоположность объектной модели, основанной на классах. - презентация

1 Объектная модель в JavaScript Объектная модель в языке JavaScript основана на прототипах в противоположность объектной модели, основанной на классах.

2 Создание объекта function myClass() function myClass(){ this.property1=""; this.property1=""; this.property2=3; this.property2=3; this.func=new Function("return('resu ltat function')"); this.func=new Function("return('resu ltat function')"); }; }; Объект – это сложный тип данных, который включает в себя множество переменных (свойств) и функций (методов) для управления этими переменными.

3 Работа с объектом Для создание объекта используется оператор new с указанием имени класса: =new (); =new (); var obj; obj=new myClass(); obj=new myClass(); С помощью имени объекта можно обращаться к свойствам и методам объекта:... (). () obj.property1="текст"; obj.property1="текст"; obj.func(); obj.func();

4 Наследование и подклассы В JavaScript наследование осуществляется с применением объектов –прототипов в сочетании с конструкторами функций. function myClass1(){ this.property1="p1"; this.property1="p1"; this.property2="p2"; this.property2="p2"; }; }; function myClass2(){ function myClass2(){ this.property3=["p31","p32","p33"]; this.property3=["p31","p32","p33"]; }; }; myClass2.prototype=new myClass1;

5 Пример m3.html m3.html m3.html

6 Задание иерархии объектов myClass2.prototype= new myClass1; myClass2.prototype= new myClass1; myClass3.prototype= new myClass1; myClass3.prototype= new myClass1; myClass4.prototype= new myClass2; myClass4.prototype= new myClass2; myClass5.prototype= new myClass2; myClass5.prototype= new myClass2; myClass1 myClass2 myClass4myClass5 myClass3

7 Описание объектов function myClass1(){ function myClass1(){ this.property1="p1"; this.property1="p1"; this.property2="p2"; this.property2="p2"; }; }; function myClass2(){ function myClass2(){ this.property3=["p31", this.property3=["p31", "p32","p33"]; "p32","p33"]; }; }; function myClass3(){ this.property4=["p41", function myClass3(){ this.property4=["p41", "p42"]; "p42"]; }; }; function myClass4(){ this.property5="p5"; this.property5="p5"; this.property6="p6"; this.property6="p6"; }; }; function myClass5(){ this.property7="p7"; this.property7="p7"; this.property8="p8"; this.property8="p8"; }; };

8 Наследование свойств var obj1,obj2,obj3,obj4,obj5; obj1=new myClass1(); obj1=new myClass1(); obj2=new myClass2(); obj2=new myClass2(); obj2.property3[1]="o32"; obj2.property3[1]="o32"; obj5=new myClass5(); obj5=new myClass5();

9 document.write("obj1="+obj1.property1+obj1.property2");obj1=p1p2 document.write("obj2="+obj2.property1+obj2. property2+obj2.property3); obj2=p1p2p31,o32,p33 obj2=p1p2p31,o32,p33document.write("obj5="+obj5.property1+obj5.property2+obj5.property3+obj5.property7+obj5.property8);obj5=p1p2p31,p32,p33p7p8

10 Добавление новых свойств myClass1.prototype.property11="p11"; myClass1.prototype.property11="p11"; obj1.property12="pp12"; obj1.property12="pp12"; document.write("obj1="+obj1.property1+obj1.property2+ obj1.property11+obj1.property12); obj1=p1p2p11pp12 document.write("obj2="+obj2.property1+obj2.property2+ obj2.property3+obj2.property11+obj2.property12); obj2=p1p2p31,o32,p33p11undefined obj2=p1p2p31,o32,p33p11undefined document.write("obj5="+obj5.property1+obj5.property2+ obj5.property3+obj5.property7+obj5.property8+ obj5.property11+obj5.property12); obj5=p1p2p31,p32,p33p7p8p11undefined obj5=p1p2p31,p32,p33p7p8p11undefined

11 Пример m44.html m44.html m44.html

12 Создание объекта и массива var obj=new Array(100); var obj=new Array(100); function myClass(p1,p2,p3){ function myClass(p1,p2,p3){ this.property1=p1; this.property1=p1; this.property2=p2; this.property2=p2; this.property3=p3; this.property3=p3; }; };

13 Функция для создания нового объекта function p1() { var n,v; var n,v; n=document.f1.t1.value;//ячейка n=document.f1.t1.value;//ячейка v=document.f1.t2.value; //значение v=document.f1.t2.value; //значение obj[n]=new myClass(v,22,33); obj[n]=new myClass(v,22,33);}

14 Функция для вывода свойст объекта function p2() { var n; n=document.f1.t3.value;//ячейка n=document.f1.t3.value;//ячейка document.f1.t4.value=obj[n].property1; //значение }

15 Форма для записи и чтения данных из объекта ЯЧЕЙКА ЯЧЕЙКА ЗНАЧЕНИЕ ЗНАЧЕНИЕ ЯЧЕЙКА ЯЧЕЙКА ЗНАЧЕНИЕ ЗНАЧЕНИЕ

16 Пример работыf10_1.html f10_1.html