Javascript --- kind of inheritance

Posted on 2009-11-07 filed under: AJAX (RSS) 54 views

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

//第一种方式,冒充对象的方式.(利用js里的每一个方法名都是一个Function对象)
function Parent(username){
	this.username = username;
	this.say = function(){
		alert(this.username);
	}
}

function Child(username,password){
	
	this.temp = Parent;//temp指向Parent所指向的地方 。 利用js里的每一个方法名都是一个Function对象,指向一个方法。
	this.temp(username);//初始化方法里的内容
	delete this.temp;//temp没有用了。可以直接删除掉.this不可以丢了
	
	
	//Parent(username);//这样写表面看起来是正确的，其实是错误的。因为只有new出来的对象才有this,所以调用Parent里的this就没有值了
	
	
	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()函数是Function对象的一个函数
//具体用法如 
function test(str){
	alert(this.username + ","  + str);
}

var o = new Object();
o.username = "zhangsan";
test.call(o,"123456");//zhangsan,123456 .因为每个Function 对象都有一个call()方法，而函数名就是一个Function对象.call()函数的第一个参数是test函数里的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

//第三种实现方式:apply()函数方式，apply()和call()是一样的，只不过参数传递不同而已,apply的参数为数组
//所以继承可以这样实现

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 ();

//原型链实现继承
function Parent(){
}
Parent.prototype.hello = "hello";
Parent.prototype.sayHello = function(){
	alert(this.hello);
}

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

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 ();

//混合模式实现继承
function Parent(hello){
	this.hello = hello;
}
Parent.prototype.sayHello = function(){
	alert(this.hello);
}

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

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

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