Prototype inheritance

[Blitz]

Kautkā neizdodas uztvert JS prototype inheritance mehānismu. 

Gribu realizēt mantošanu 3 līmeņos (piemēram)

var A=function(paramsA) {
    this.paramsA=paramsA;
    this.init();
};

A.prototype={
    paramsA:null,
    init: function() {
        console.log(this.paramsA);
    },
};

var B=function(paramsB, paramsA) {
    this.prototype=Object.create(A, {paramsA: { writable: true, configurable: true, value: paramsA },})
    this.paramsB=paramsB;
};

B.prototype={
    paramsB: null,
    click: function() {
        console.log(this.paramsB);
    }
};

var C=function(paramsC, paramsB, paramsA) {
    this.prototype=Object.create(C, {
        paramsA: { writable: true, configurable: true, value: paramsA },
        paramsB: { writable: true, configurable: true, value: paramsB },
    })
    this.paramsC=paramsC;
};

C.prototype={
    paramsC: null,
    render: function() {
        console.log(this.paramsC);
    },
};

var Obj=new C(1,2,3); //console.log => 3
Obj.render(); //console.log => 1
Obj.click(); //console.log => 2

Vēlamais output konsolē:

3
1
2

Sobrīd dabūju konsolē:

1
Obj.click is not a function

Nevaru saprast īsti kā realizēt šādu inheritance JS vidē. 

 

[briedis]

Pa manam, izskatās, ka tu vienkārši pārraksti visu prototipa objektu pa virsu. Bet principā vajadzētu pārrakstīt tikai to, kas mainās, ko vēlies overraidot.

x.proto = {};
x.proto.a = 1;

x.proto = { b: 2}; // Šeit taču pazūd iepriekšējais {a:1}, jo vienkārši pārraksti.
vs
x.proto.b = 2; // Šajā gadījumā tu pievieno jaunu metodi, vecā paliek.

Varbūt kļūdos. Nekad īsti neesmu vairāk par 1 līmeni manotjis prototipus.

[Blitz]

Tā izskatās, prātu man sačakarē arī tas, ka katram objektam ir vajadzīgs konstruktors, un to definē kā funkciju (cik sparotu), savukārt paša objekta body ir kā funkcijas prototips. Rezultātā man vajadzīgs lai protopips extendojas no cita prototipa. Varbūt kautkas pašā būtībā ir galīgi šķersām. 

[briedis]

JS OOP ir pašā būtībā līka padarīšana.

 

Šis izskatās normāls manuālis (arī citām JS lietām): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

[Blitz]

Jā n reižu pārlasīts bet tā pat nevaru saprast kā to implementēt. Ja taisu bez konstruktoriem, plain objektus, tad no problems. 

[daGrevis]

Paņem ES6 un izmanto `class`.

[Blitz]

Class jau ir tikai syntactic sugar, to vajadzētu atrisināt arī ar es5. Pašlaik problēmu risinu ar injektojot A un B instances iekš C, bet roku taisnumam tas nepalidz

[jurchiks]

var A = function (paramsA)
{
	this.paramsA = paramsA;
	this.init();
};

A.prototype = {
	paramsA: undefined,
	init: function ()
	{
		console.log(this.paramsA);
	}
};

var B = function (paramsB, paramsA)
{
	A.call(this, paramsA);
	this.paramsB = paramsB;
};

B.prototype = Object.create(A.prototype, {
	paramsB: {
		writable: true,
		configurable: true,
		enumerable: true,
		value: undefined
	},
	click: {
		// not writable/configurable/enumerable
		value: function ()
		{
			console.log(this.paramsB);
		}
	}
});
B.prototype.constructor = B;

var C = function (paramsC, paramsB, paramsA)
{
	B.call(this, paramsB, paramsA);
	this.paramsC = paramsC;
};

C.prototype = Object.create(B.prototype, {
	paramsC: {
		writable: true,
		configurable: true,
		enumerable: true,
		value: undefined
	},
	render: {
		// not writable/configurable/enumerable
		value: function ()
		{
			console.log(this.paramsC);
		}
	}
});
C.prototype.constructor = C;

var obj = new C(3, 2, 1); //console.log => 1
obj.click(); //console.log => 2
obj.render(); //console.log => 3

Sources:

https://developer.mozilla.org/en/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty- writable/configurable/enumerable explanations

Edited October 19, 2015 by jurchiks

[Blitz]

Paldies, tas ir tas ko vajag.