js五种继承方式（在别的博客上面看的,然后自己稍微整理一下）
2013-01-06 14:10
363 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!-- 继承的几种方式js继承有5种实现方式： -->
<script language="javascript">
//1、继承第一种方式：对象冒充
function Parent1(username,password){
this.username=username;
this.password=password;
this.hello=function (){
alert("您好：我的名字是："+username+"密码："+password);
}
}
function Child1(username,password,sex){
//通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承
//第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象，
//第二步：执行this.method方法，即执行Parent所指向的对象函数
//第三步：销毁this.method属性，即此时Child就已经拥有了Parent的所有属性和方法
this.method=Parent1;
this.method(username,password);//最关键的一行
//this.method(password);
delete this.method;
this.sex=sex;
this.say=function(){
alert("您好：我的名字是："+username+"密码是："+password+"性别是："+sex);
}
}
function method1(){
var myParent=new Parent1("张三","123456");
var myChild=new Child1("李四","654321","男");
myParent.hello();
myChild.hello();
myChild.say();
}
//1、继承第一种方式：对象冒充
//2、继承第二种方式：call()方法方式
/*call方法是Function类中的方法
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数 */
//注意 该parent类只需要传一个参数就够了，如果给了多个，只会取第一个，不会报错
function Parent2(username){
this.username = username;
this.hello = function(){
alert(this.username);
}
}
function Child2(username,password){
Parent2.call(this,username,"bbb");//就这一句子类就拥有父类的方法了,非常方便
this.password = password;
this.world = function(){
alert(this.password);
}
}
function method2(){
var parent = new Parent2("zhangsan");
var child = new Child2("lisi","123456");
alert("子类拥有的属性有：名字："+child.username+"密码："+child.password);
parent.hello();
child.hello();
child.world();
}
//2、继承第二种方式：call()方法方式
//3、继承的第三种方式：apply()方法方式 与call()方法差不多
/* apply方法接受2个参数，
A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this
B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数
*/
//注意 该parent3 类只需要传一个参数就够了，如果给了多个，只会取第一个，不会报错
function Parent3(username){
this.username = username;
this.hello = function(){
alert(this.username);
}
}
function Child3(username,password){
//Parent.call(this,username);//就这一句子类就拥有父类的方法了,非常方便
Parent3.apply(this,new Array(username,"aaa"));
this.password = password;
this.world = function(){
alert(this.password);
}
}
function method3(){
var parent = new Parent3("zhangsan");
var child = new Child3("lisi","123456");
alert("子类拥有的属性有：名字："+child.username+"密码："+child.password);
parent.hello();
child.hello();
child.world();
}
//3、继承的第三种方式：apply()方法方式
//4、继承的第四种方式：原型链方式，即子类通过prototype
//将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承
function Person4(){
}
Person4.prototype.hello = "hello";
Person4.prototype.hello1 = "hello1";
Person4.prototype.hello2 = "hello2";
Person4.prototype.hello3 = "hello3";
Person4.prototype.sayHello = function(){
alert("hello:"+this.hello+",hello1:"+this.hello1+",hello2:"+this.hello2+",hello3:"+this.hello3);
}
function Child4(){
}
Child4.prototype = new Person4();//这行的作用是：将Parent中将所有通过prototype追加的属性和方法都追加到Child，从而实现了继承
Child4.prototype.world = "world";
Child4.prototype.sayWorld = function(){
alert(this.world);
}
function method4(){
var c = new Child4();
c.sayHello();
c.sayWorld();
}
//4、继承的第四种方式：原型链方式，即子类通过prototype
//将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承
//5、继承的第五种方式：混合方式
// 混合了call方式、原型链方式
function Parent5(hello,say){
this.hello = hello;
this.say=say;
}
Parent5.prototype.sayHello = function(){
alert("hello:"+this.hello+",say:"+this.say);
}
function Child5(hello,world){
//Parent5.call(this,hello);//将父类的属性继承过来
Parent5.call(this,hello,world);
this.world = world;//新增一些属性
}
Child5.prototype = new Parent5();//将父类的方法继承过来
Child5.prototype.sayWorld = function(){//新增一些方法
alert(this.world);
}
function method5(){
var c = new Child5("zhangsan","lisi");
c.sayHello();
c.sayWorld();
}
//5、继承的第五种方式：混合方式
// 混合了call方式、原型链方式
</script>
<body>
<input type="button" value="方式一" onclick="method1()" /><br/>
<input type="button" value="方式二" onclick="method2()" /><br/>
<input type="button" value="方式三" onclick="method3()" /><br/>
<input type="button" value="方式四" onclick="method4()" /><br/>
<input type="button" value="方式五" onclick="method5()" /><br/>
</body>
</html>
原文：来自于：
http://yahaitt.iteye.com/blog/250338 js继承的五种
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!-- 继承的几种方式js继承有5种实现方式： -->
<script language="javascript">
//1、继承第一种方式：对象冒充
function Parent1(username,password){
this.username=username;
this.password=password;
this.hello=function (){
alert("您好：我的名字是："+username+"密码："+password);
}
}
function Child1(username,password,sex){
//通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承
//第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象，
//第二步：执行this.method方法，即执行Parent所指向的对象函数
//第三步：销毁this.method属性，即此时Child就已经拥有了Parent的所有属性和方法
this.method=Parent1;
this.method(username,password);//最关键的一行
//this.method(password);
delete this.method;
this.sex=sex;
this.say=function(){
alert("您好：我的名字是："+username+"密码是："+password+"性别是："+sex);
}
}
function method1(){
var myParent=new Parent1("张三","123456");
var myChild=new Child1("李四","654321","男");
myParent.hello();
myChild.hello();
myChild.say();
}
//1、继承第一种方式：对象冒充
//2、继承第二种方式：call()方法方式
/*call方法是Function类中的方法
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数 */
//注意 该parent类只需要传一个参数就够了，如果给了多个，只会取第一个，不会报错
function Parent2(username){
this.username = username;
this.hello = function(){
alert(this.username);
}
}
function Child2(username,password){
Parent2.call(this,username,"bbb");//就这一句子类就拥有父类的方法了,非常方便
this.password = password;
this.world = function(){
alert(this.password);
}
}
function method2(){
var parent = new Parent2("zhangsan");
var child = new Child2("lisi","123456");
alert("子类拥有的属性有：名字："+child.username+"密码："+child.password);
parent.hello();
child.hello();
child.world();
}
//2、继承第二种方式：call()方法方式
//3、继承的第三种方式：apply()方法方式 与call()方法差不多
/* apply方法接受2个参数，
A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this
B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数
*/
//注意 该parent3 类只需要传一个参数就够了，如果给了多个，只会取第一个，不会报错
function Parent3(username){
this.username = username;
this.hello = function(){
alert(this.username);
}
}
function Child3(username,password){
//Parent.call(this,username);//就这一句子类就拥有父类的方法了,非常方便
Parent3.apply(this,new Array(username,"aaa"));
this.password = password;
this.world = function(){
alert(this.password);
}
}
function method3(){
var parent = new Parent3("zhangsan");
var child = new Child3("lisi","123456");
alert("子类拥有的属性有：名字："+child.username+"密码："+child.password);
parent.hello();
child.hello();
child.world();
}
//3、继承的第三种方式：apply()方法方式
//4、继承的第四种方式：原型链方式，即子类通过prototype
//将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承
function Person4(){
}
Person4.prototype.hello = "hello";
Person4.prototype.hello1 = "hello1";
Person4.prototype.hello2 = "hello2";
Person4.prototype.hello3 = "hello3";
Person4.prototype.sayHello = function(){
alert("hello:"+this.hello+",hello1:"+this.hello1+",hello2:"+this.hello2+",hello3:"+this.hello3);
}
function Child4(){
}
Child4.prototype = new Person4();//这行的作用是：将Parent中将所有通过prototype追加的属性和方法都追加到Child，从而实现了继承
Child4.prototype.world = "world";
Child4.prototype.sayWorld = function(){
alert(this.world);
}
function method4(){
var c = new Child4();
c.sayHello();
c.sayWorld();
}
//4、继承的第四种方式：原型链方式，即子类通过prototype
//将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承
//5、继承的第五种方式：混合方式
// 混合了call方式、原型链方式
function Parent5(hello,say){
this.hello = hello;
this.say=say;
}
Parent5.prototype.sayHello = function(){
alert("hello:"+this.hello+",say:"+this.say);
}
function Child5(hello,world){
//Parent5.call(this,hello);//将父类的属性继承过来
Parent5.call(this,hello,world);
this.world = world;//新增一些属性
}
Child5.prototype = new Parent5();//将父类的方法继承过来
Child5.prototype.sayWorld = function(){//新增一些方法
alert(this.world);
}
function method5(){
var c = new Child5("zhangsan","lisi");
c.sayHello();
c.sayWorld();
}
//5、继承的第五种方式：混合方式
// 混合了call方式、原型链方式
</script>
<body>
<input type="button" value="方式一" onclick="method1()" /><br/>
<input type="button" value="方式二" onclick="method2()" /><br/>
<input type="button" value="方式三" onclick="method3()" /><br/>
<input type="button" value="方式四" onclick="method4()" /><br/>
<input type="button" value="方式五" onclick="method5()" /><br/>
</body>
</html>
原文：来自于：
http://yahaitt.iteye.com/blog/250338 js继承的五种
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 整理一下自己手撸的博客
- 整理了一下自己的博客分类
- CNN卷积理解初步概念理解（对于别人的博客的自己打开方式）
- 今天想给自己博客备份一下，可是没找到文章，太累了，算了...
- 终于有自己的博客了，感叹一下！
- 整理一下页面跳转的几种实现方式
- 博客开通，记一下自己的用户名由来
- 在软件工程里面，我们知道这些知识点吗？我稍微整理了一下！
- 我是博客专家了, 鼓励自己一下
- 在Github上面搭建一个自己域名的Hexo博客
- 整理一下自己用到的网页性能优化（一）
- 从今天开始，开一下自己的博客，希望自己能够坚持下去
- 今天整理了一下博客
- 测试一下准备建立自己的博客
- 整理一下自己的知识体系 确认一下目标
- 博客写了有两三个月了，，访问量终于到了10000~~~谈一下自己的感想
- 自己祝贺一下开这个博客- -！
- 有必要写一下博客整理一下知识
- 决定有计划的写写博客，总结一下自己
- 在做mes系统时，利用D7 IdMessage&IdSMTP发送邮件,从盒子上学习了不少的东西，自己整理了一下，想share给新手，学习参考!