Jump to content
php.lv forumi
  • 0

Prototype inheritance


Question

Posted

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ē. 

 

8 answers to this question

Recommended Posts

  • 0
Posted (edited)

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 by jurchiks
  • 0
Posted

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.

  • 0
Posted

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. 

  • 0
Posted

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...