Функція-конструктор

Функція-конструктор це функція яка повертає об'єкт.

Синтаксис:

function Name(){ //тіло функції } //застосування new Name();

Параметри:

Name - назва функції-конструктор. У JavaScript принято функцію конструктор називати першу літеру з великої букви, хоча це не обов'язково.

Опис:

Функція-конструктор (конструктор) - це функція яка повертає новостворений об'єкт.

Для отримання екземпляра об'єкту від функції-конструктор потрібно визвати її за допомогою оператора new.

При виклику функції-конструктор оператором new створюється порожній об'єкт, який передається функції-конструктор. На цей об'єкт вказує this, до об'єкту додаються властивості і методи. Даний об'єкт функцією-конструктором повертається автоматично, тобто return this; НЕ потрібно визивати.

function myObj(a){ this.name=a; } var ob=new myObj("тест"); alert( ob.name );

Якщо при виклику функції-конструктор не вказати new то це може привести до помилок, так як this буде посилатися на глобальний об'єкт window.

function myObj(a){ this.hit=a; alert("this = "+this); //[window] } var ob=myObj("тест"); alert( "ob = "+ob ); //undefined alert( "window.hit = "+window.hit );

Функція-конструктор повертає об'єкт на який посилається this, але можна повернути і інший об'єкт за допомогою return:

Повернення об'єкта за допомогою this:

function Test(a,b){ this.name=a; this.text=b; } var ob= new Test('JavaScript','js'); alert(ob.name);

Повернення об'єкта за допомогою return:

function Test(a,b){ var res={}; res.name=a; res.text=b; return res; } var ob= new Test('JavaScript','js'); alert(ob.name);

Якщо повернути за допомогою return не об'єкт а інше значення, то функція-конструктор проігнорує помилку і поверне this:

function myObj(a){ this.name=a; return null; } var ob=new myObj("тест"); alert( ob.name );

Щоб створити метод потрібно властивості об'єкту що повертається присвоювати функцію:

function test(){ this.method=function(x,y){return x+y;} } var b=new test(); alert(b.method(1,1)); function p(name, rn){ this.name=name; this.rn=parseInt(rn); if(this.rn<1900) this.rn=1990; //метод getVik this.getVik=function(){ let d= new Date(); return d.getFullYear()-this.rn; } } var ob= new p('Віра', 1995), ob2 = new p('Катерина', 1997); alert(ob.name+': '+ob.getVik()+' '+ob2.name+': '+ob2.getVik());

Так як функція-конструктор це та ж сама функція щоб визначити чи була функція викликана за допомогою оператора new використовують оператор instanceof:

function Test(){ if( this instanceof Test ) alert("викликано оператором new"); else alert("звичайний виклик функції"); } Test(); new Test();

get і set

Наслідування об'єктів у функції-конструктор:

Наслідування у функції-.конструктор за допомогою Object.__proto__:

function myObj(){ this.name="test"; } function myObj2(){ this.__proto__=new myObj(); this.id="3"; } var ob=new myObj2(); alert( ob.name);

Наслідування у функції-конструктор за допомогою Object.prototype:

function myObject(s){ this.name=s; } function myObj2(){ this.prototype= myObject.apply(this ,arguments); this.toString=function(){return this.name.toString()}; } var ob=new myObj2("тест"); alert( ob); function myObj(){ this.name="test"; } function myObj2(){ this.id="3"; } myObj2.prototype=new myObj(); var ob=new myObj2(); alert( ob.name);

Приклад:

function Obj(x, y, z){ this.x=x; this.y=y; this.z=z; this.toText=function(){ return (this.x?"x="+this.x+" ":"")+( this.y?"y="+this.y+" ":"" )+( this.z?"z="+this.z+" ":""); }; this.toString=function(){ return "x="+this.x+", y="+this.y+", z="+this.z; }; this.suma=function(){ return x+y+z; }; } var ob=new Obj(1, 4, 2); alert( ob.suma() );

Приклад створення об'єкту який зберігає назву події, опис і дату:

function Ev(){ var name = new Array(), desc = new Array(), date = new Array(); this.length=0; //метод додає подію this.add=function(a, b){ name.push(a); desc.push(b); date.push(new Date() ); this.length=name.length; } //текстове представлення події this.toString=function(){ return name.toString(); }; //повертаємо дані про подію за індексом this.item=function(index){ if(index<0 || index>name.length-1) return null; return {name: name[index], description:desc[index], date:date[index]}; }; } var ob= new Ev(); ob.add("старт", "перша подія"); alert(ob.item(0).name);

Приклад створення об'єкту який приймає масив чисел і містить методи для отримання загального добутку, частки, суми, різниці:

function Num(){ this.mas=Array.prototype.slice.call(arguments); this._mas=[]; for(i=0, n; i < this.mas.length; i++){ n=parseFloat(this.mas[i]); if(isNaN(n)==false) this._mas.push(n);} //сума this.sum=function(){ var res=null; for(i=0; i< this._mas.length; i++)res+=this._mas[i]; return res; } //різниця this.riz=function(){ if(this._mas.length==0)return null; var res=this._mas[0]; for(i=1; i< this._mas.length; i++)res-=this._mas[i]; return res;} //добуток this.mul=function(){ if(this._mas.length==0)return null; var res=this._mas[0]; for(i=1; i< this._mas.length; i++)res=res * this._mas[i]; return res;} //частка this.div=function(){ if(this._mas.length==0)return null; var res=this._mas[0]; for(i=1; i< this._mas.length; i++)res=res / this._mas[i]; return res;} this.toString=function(){return this.mas.toString();} } var n=new Num(2, 2, 3); alert(n.sum() );