js继承有5种实现方式:

  • 继承第一种方式:对象冒充
 function Parent(username){
this.username = username;
this.hello = function(){
document.write(this.username);
}
}
function Child(username,password){
//通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承
//第一步:this.method是作为一个临时的属性,并且指向Parent所指向的对象,
//第二步:执行this.method方法,即执行Parent所指向的对象函数
//第三步:销毁this.method属性,即此时Child就已经拥有了Parent的所有属性和方法
this.method = Parent;
this.method(username);//最关键的一行
delete this.method; this.password = password;
this.world = function(){
document.write(this.password);
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();
  • 继承第二种方式:call()方法方式      

call方法是Function类中的方法
        call方法的第一个参数的值赋值给类(即方法)中出现的this
        call方法的第二个参数开始依次赋值给类(即方法)所接受的参数

 function test(str){
document.write(this.name + " " + str);
}
var object = new Object();
object.name = "zhangsan";
test.call(object,"langsin");//此时,第一个参数值object传递给了test类(即方法)中出现的this,而第二个参数"langsin"则赋值给了test类(即方法)的str function Parent(username){
this.username = username;
this.hello = function(){
document.write(this.username);
}
}
function Child(username,password){
Parent.call(this,username);
this.password = password;
this.world = function(){
document.write(this.password);
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();
  • 继承的第三种方式:apply()方法方式 

apply方法接受2个参数:
            A、第一个参数与call方法的第一个参数一样,即赋值给类(即方法)中出现的this
            B、第二个参数为数组类型,这个数组中的每个元素依次赋值给类(即方法)所接受的参数

 function Parent(username){
this.username = username;
this.hello = function(){
document.write(this.username);
}
}
function Child(username,password){
Parent.apply(this,new Array(username));
this.password = password;
this.world = function(){
document.write(this.password);
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();
  • 继承的第四种方式:原型链方式,即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child,从而实现了继承
 function Person(){
}
Person.prototype.hello = "hello";
Person.prototype.sayHello = function(){
document.write(this.hello);
} function Child(){
}
//这行的作用是:将Parent中将所有通过prototype追加的属性和方法都追加到Child,从而实现了继承
Child.prototype = new Person();
Child.prototype.world = "world";
Child.prototype.sayWorld = function(){
document.write(this.world);
}
var c = new Child();
c.sayHello();
c.sayWorld();
  • 继承的第五种方式:混合方式 ,混合了call方式、原型链方式 
 function Parent(hello){
this.hello = hello;
}
Parent.prototype.sayHello = function(){
document.write(this.world);
}
function Child(hello,world){
Parent.call(this,hello);//将父类的属性继承过来
this.world = world;//新增一些属性
}
//将父类的方法继承过来
Child.prototype = new Parent();
//新增一些方法
Child.prototype.sayWorld = function(){
document.write(this.world);
}
var c = new Child("zhangsan","lisi");
c.sayHello();
c.sayWorld();

js继承的更多相关文章

  1. js继承之call,apply和prototype随谈

    在js中,call,apply和prototype都可以实现对象的继承,下面我们看一个例子: function FatherObj1() { this.sayhello = "I am jo ...

  2. js继承精益求精之寄生式组合继承

    一.混合/组合继承的不足 上一篇JS继承终于混合继承,认真思考一下,发现其还是有不足之处的: 空间上的冗余:在使用原型链的方法继承父类的原型属性(Animal.prototype)的同时,也在子类的原 ...

  3. 老生常谈--Js继承小结

    一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.net/stoy ...

  4. Js继承小结

    Js继承小结 一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.n ...

  5. js继承实现

    JS实现继承可以分为:对象冒充和原型链继承 其中对象冒充又包括:临时变量,call 和 apply 临时变量方法: function Person(name,sex){ this.name = nam ...

  6. js继承之借用构造函数继承

    我的上一篇文章介绍了,原型链继承模式.但是单纯的原型链模式并不能很好地实现继承. 一.原型链的缺点 1.1 单纯的原型链继承最大的一个缺点,来自于原型中包含引用类型的值. 本来,我们没有通过原型链实现 ...

  7. js继承之原型链继承

    面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针, ...

  8. js继承的常用方法

    写在前面的话:这篇博客不适合对面向对象一无所知的人,如果你连_proto_.prototype...都不是很了解的话,建议还是先去了解一下JavaScript面向对象的基础知识,毕竟胖子不是一口吃成的 ...

  9. JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)

    一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...

随机推荐

  1. 关于mysql数据库字符集优先级问题

    mysql数据库可以分别设置数据库字符集.表字符集和表字段字符集. 1.数据库字符集 < 表字符集 < 表字段(列)字符集. 例如数据库字符集为gbk -- GBK Simplified ...

  2. Selenium自动化测试框架介绍

    Selenium自动化测试框架介绍 1.测试架构作用 a.可维护性 b.提高编写脚本效率 c.提高脚本的可读性 2.框架的几大要素: Driver管理,脚本,数据,元素对象,LOG,报告,运行机制,失 ...

  3. http请求的开销

    很多人都说要减少http请求,可关注为什么要减少请求的人却少很多,本文是对我在几篇博客以及知乎上看到的内容的整理. http请求头的数据量 每次请求都会带上一些额外的信息进行传输,当请求的资源很小,比 ...

  4. 用ajax实现评论刷新

    前台代码: <script src="jquery-1.8.3.js"></script> <script type="text/javas ...

  5. Javascript--装饰器模式和观察者模式

    装饰器模式 (function(){//装饰一棵树,装饰器模式通过对对象的属性进行改变来装饰对象.需要一个设置属性的方法 var tree={}; tree.decorate=function(){ ...

  6. android ListView 九大重要属性详细分析、

    android ListView 九大重要属性详细分析. 1.android ListView 一些重要属性详解,兄弟朋友可以参考一下. 首先是stackFromBottom属性,这只该属性之后你做好 ...

  7. c#窗体去掉borderstyle进行拖动

    private void BaseCForm_Load(object sender, EventArgs e)        {            DrawStyle(); this.panel1 ...

  8. gslX680驱动的移植实践

    将gslX680触摸屏驱动移植到自己的开发板上(对应的源码文件gslX680.c),并且实现可以使用make menuconfig进行动态的加载和卸载 因为触摸屏设备属于一种典型的输入设备,所以他的驱 ...

  9. 第8章 BOM

    8.1 window对象 window有双重的角色,既可以通过JavaScript访问浏览器窗口的接口,又是ECMAScript规定的Global对象. 全局作用域中声明的变量.函数都会变成windo ...

  10. 移动端bug整理,随时更新

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545 } p.p2 { margin: 0.0p ...