Javascript --- kind of inheritance

Nov 7 posted in AJAX (RSS), comments.

This article is reproduced in: http://ttitfly.javaeye.com/blog/194252

1. The first approach, posing as the way the object. (Using js in the name of each method is a Function object)

Java code

/ / The first approach, posing as the way the object. (Using js in the name of each method is a Function object)
function Parent (username) (
this. username = username;
this. say = function () (
alert (this. username);
)
)
function Child (username, password) (
this. temp = Parent; / / temp to the point where Parent. Js in the use of each method name is a Function object, point to a method.
this. temp (username); / / initialization method where the content of
delete this. temp; / / temp is not used. Can be removed. This can not be lost
/ / Parent (username); / / write the surface this appears to be correct, in fact, is wrong. Because only the new object is out of this, so call the Parent in the value of this would be no
this. password = password;
this. hello = function () (
alert (this. password);
)
)
var parent = new Parent ( "zhangsan");
parent.say ();// zhangsan
var child = new Child ( "lisi", "123456");
child.say ();// lisi
child.hello ();// 123456

// The first way  , Fake objects  .( Use js in each method name is a function object  )
function Parent(username){
	this.username = username;
	this.say = function(){
		alert(this.username);
	}
}

function Child(username,password){
	
	this.temp = Parent;//temp  Point to the place pointed to by the Parent. Use js in each method name is a function object  , Point to a method.  
	this.temp(username);// The contents of the initialization method  
	delete this.temp;//temp No use. You can directly deleted  .this Not lost  
	
	
	//Parent(username);// Write on the surface appear to be correct, is wrong. Because only the new out of the object will have this  , So call in this respect there is no value for the  
	
	
	this.password = password;
	this.hello = function(){
		alert(this.password);
	}
}

var parent = new Parent("zhangsan");
parent.say();//zhangsan

var child = new Child("lisi","123456");
child.say();//lisi
child.hello();//123456

2. The second way: call () function the way

call () function is a function of the Function object, the specific use of the following

Java code

/ / call () function is a function object Function
/ / Specific use, such as
function test (str) (
alert (this. username + "," + str);
)
var o = new Object ();
o.username = "zhangsan";
test.call (o, "123456 ");// zhangsan, 123456. because everyone has a Function Object call () method, and the function name is a Function object. call () function's first parameter is the test function in of this.

//call() A function is a function object in a function  
// Specific usage such as  
function test(str){
	alert(this.username + ","  + str);
}

var o = new Object();
o.username = "zhangsan";
test.call(o,"123456");//zhangsan,123456 . Because every Function object has a call  () The method and the name of the function is a function object  .call() The function of the first parameter is the test function in this  .

Therefore, the succession can be achieved by:

Java code

function Parent (username) (
this. username = username;
this. say = function () (
alert (this. username);
)
)
function Child (username, password) (
Parent.call (this, username);
this. password = password;
this. hello = function () (
alert (this. password);
)
)
var parent = new Parent ( "zhangsan");
parent.say ();// zhangsan
var child = new Child ( "lisi", "123456");
child.say ();// lisi
child.hello ();// 123456

function Parent(username){
	this.username = username;
	this.say = function(){
		alert(this.username);
	}
}
function Child(username,password){
	Parent.call(this,username);
	this.password = password;
	this.hello = function(){
		alert(this.password);
	}
}
var parent = new Parent("zhangsan");
parent.say();//zhangsan

var child = new Child("lisi","123456");
child.say();//lisi
child.hello();//123456

3. The third way to achieve: apply () function of the way, apply () and call () is the same, only different parameter, apply for an array of parameters

Java code

/ / Third ways: apply () function of the way, apply () and call () is the same, only different parameter, apply for an array of parameters
/ / Therefore, the realization of the succession can be
function Parent (username) (
this. username = username;
this. say = function () (
alert (this. username);
)
)
function Child (username, password) (
Parent.apply (this, new Array (username));
this. password = password;
this. hello = function () (
alert (this. password);
)
)
var parent = new Parent ( "zhangsan");
parent.say ();// zhangsan
var child = new Child ( "lisi", "123456");
child.say ();// lisi
child.hello ();// 123456

// The third approach  :apply() How to apply the function  () And call  () Is the same, but different arguments passed  ,apply The parameter is an array  
// So this can be inherited  

function Parent(username){
	this.username = username;
	this.say = function(){
		alert(this.username);
	}
}
function Child(username,password){
	Parent.apply(this,new Array(username));
	this.password = password;
	this.hello = function(){
		alert(this.password);
	}
}
var parent = new Parent("zhangsan");
parent.say();//zhangsan

var child = new Child("lisi","123456");
child.say();//lisi
child.hello();//123456

4. The first four kinds of ways: the prototype chain of succession

Java code

/ / The prototype chain of succession
function Parent () (
)
Parent.prototype.hello = "hello";
Parent.prototype.sayHello = function () (
alert (this. hello);
)
function Child () (
)
Child.prototype = new Parent ();// key
Child.prototype.world = "world";
Child.prototype.sayWorld = function () (
alert (this. world);
)
var child = new Child ();
child.sayHello ();
child.sayWorld ();

// The prototype chain implementation inheritance  
function Parent(){
}
Parent.prototype.hello = "hello";
Parent.prototype.sayHello = function(){
	alert(this.hello);
}

function Child (){
}
Child.prototype = new Parent();// Key  

Child.prototype.world = "world";
Child.prototype.sayWorld = function(){
	alert(this.world);
}

var child = new Child();
child.sayHello();
child.sayWorld();

5. Fifth ways: mixed mode of succession

Java code

/ / Mixed-mode of succession
function Parent (hello) (
this. hello = hello;
)
Parent.prototype.sayHello = function () (
alert (this. hello);
)
function Child (hello, world) (
this. world = world;
Parent.call (this, hello); / / key
)
Child.prototype = new Parent (); / / key
Child.prototype.sayWorld = function () (
alert (this. world);
)
var child = new Child ( "hello", "world");
child.sayHello ();
child.sayWorld ();

// Mixed-mode implementation inheritance  
function Parent(hello){
	this.hello = hello;
}
Parent.prototype.sayHello = function(){
	alert(this.hello);
}

function Child(hello,world){
	this.world = world;
	Parent.call(this,hello);// Key  

}
Child.prototype = new Parent(); // Key  
Child.prototype.sayWorld = function(){
	alert(this.world);
}

var child = new Child("hello","world");
child.sayHello();
child.sayWorld();