js实现继承的5种方式

js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式
1.使用对象冒充实现继承(该种实现方式可以实现多继承)
实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值

  1. function Parent(firstname)
  2. {
  3. this.fname=firstname;
  4. this.age=40;
  5. this.sayAge=function()
  6. {
  7. console.log(this.age);
  8. }
  9. }
  10. function Child(firstname)
  11. {
  12. this.parent=Parent;
  13. this.parent(firstname);
  14. delete this.parent;
  15. this.saySomeThing=function()
  16. {
  17. console.log(this.fname);
  18. this.sayAge();
  19. }
  20. }
  21. var mychild=new  Child("李");
  22. mychild.saySomeThing();

2.采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

  1. function Parent(firstname)
  2. {
  3. this.fname=firstname;
  4. this.age=40;
  5. this.sayAge=function()
  6. {
  7. console.log(this.age);
  8. }
  9. }
  10. function Child(firstname)
  11. {
  12. this.saySomeThing=function()
  13. {
  14. console.log(this.fname);
  15. this.sayAge();
  16. }
  17. this.getName=function()
  18. {
  19. return firstname;
  20. }
  21. }
  22. var child=new Child("张");
  23. Parent.call(child,child.getName());
  24. child.saySomeThing();

3.采用Apply方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

  1. function Parent(firstname)
  2. {
  3. this.fname=firstname;
  4. this.age=40;
  5. this.sayAge=function()
  6. {
  7. console.log(this.age);
  8. }
  9. }
  10. function Child(firstname)
  11. {
  12. this.saySomeThing=function()
  13. {
  14. console.log(this.fname);
  15. this.sayAge();
  16. }
  17. this.getName=function()
  18. {
  19. return firstname;
  20. }
  21. }
  22. var child=new Child("张");
  23. Parent.apply(child,[child.getName()]);
  24. child.saySomeThing();

4.采用原型链的方式实现继承
实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承

  1. function Parent()
  2. {
  3. this.sayAge=function()
  4. {
  5. console.log(this.age);
  6. }
  7. }
  8. function Child(firstname)
  9. {
  10. this.fname=firstname;
  11. this.age=40;
  12. this.saySomeThing=function()
  13. {
  14. console.log(this.fname);
  15. this.sayAge();
  16. }
  17. }
  18. Child.prototype=new  Parent();
  19. var child=new Child("张");
  20. child.saySomeThing();

5.采用混合模式实现继承

    1. function Parent()
    2. {
    3. this.sayAge=function()
    4. {
    5. console.log(this.age);
    6. }
    7. }
    8. Parent.prototype.sayParent=function()
    9. {
    10. alert("this is parentmethod!!!");
    11. }
    12. function Child(firstname)
    13. {
    14. Parent.call(this);
    15. this.fname=firstname;
    16. this.age=40;
    17. this.saySomeThing=function()
    18. {
    19. console.log(this.fname);
    20. this.sayAge();
    21. }
    22. }
    23. Child.prototype=new  Parent();
    24. var child=new Child("张");
    25. child.saySomeThing();
    26. child.sayParent();

js怎样实现继承的更多相关文章

  1. 浅谈JS中的继承

    前言 JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属 ...

  2. JS创建对象、继承原型、ES6中class继承

    面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...

  3. js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。

    js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...

  4. js模拟实现继承功能

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. js中实现继承的几种方式

    首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...

  6. js怎么实现继承?

    3. js怎么实现继承? 1. 使用原型prototype 这个问题其实之前总结过了……但是面试时候有点忘……主要思想是记得的,但是不会写,还是基础太不牢靠,写的太少了.一开始因为不知道怎么能继承父类 ...

  7. [js]js原型链继承小结

    这是之前总结的, 发现有很多的毛病,就是重点不突出,重新翻看的时候还是得耗费很长时间去理解这玩意. js中的继承 js中什么是类 1,类是函数数据类型 2.每个类有一个自带prototype属性 pr ...

  8. js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法。

    js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA ...

  9. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  10. JS中的继承(上)

    JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...

随机推荐

  1. Java自定义分页标签的实现

    主要字段含义: 页号 pagaNo页面大小 pageSize总记录条数 recordCount计算本次一共分多少页 myPageSize页号显示开始 start 页号显示结束 end PageTag需 ...

  2. freeMarker(十六)——FAQ

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 1.JSP 和 FreeMarker ? 我们比较 FreeMarke ...

  3. freeMarker(十)——模板语言之内建函数

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 1.字符串内建函数 这些内建函数作用于表达式左侧的字符串值. 如果左侧 ...

  4. bzoj3573米特运输

    题意: 给定一棵树上的边和点权 改动点权使得每个父节点u容量为子节点容量的d[u](子节点个数)倍 考察点: 1.这是一道语文题 2.点权很大 直接算会爆 有一种优化办法:取log(醉 这是什么优化) ...

  5. bzoj 1242 弦图判定 MCS

    题目大意: 给定一张无向图,判断是不是弦图. 题解: 今天刚学了<弦图与区间图> 本来写了一个60行+的学习笔记 结果因为忘了保存重启电脑后被还原了... 那就算了吧. MCS最大势算法, ...

  6. bzoj 3572: [Hnoi2014]世界树 虚树

    题目: Description 世界树是一棵无比巨大的树,它伸出的枝干构成了整个世界.在这里,生存着各种各样的种族和生灵,他们共同信奉着绝对公正公平的女神艾莉森,在他们的信条里,公平是使世界树能够生生 ...

  7. How to manage concurrency in Django models

    How to manage concurrency in Django models The days of desktop systems serving single users are long ...

  8. django基础PROJECT APP View template

    project 和 app 的区别就是一个是配置另一个是代码: 一个project包含很多个Django app以及对它们的配置. 一个project的作用是提供配置文件,比方说哪里定义数据库连接信息 ...

  9. NSArray用法

    //类方法初始化一个数组对象 [array count] : 得到这个数组对象的长度. [array objectAtIndex index]: 传入数组的索引(index) 得到数据对象. [arr ...

  10. linux下 vi 命令大全

    引用:http://www.cnblogs.com/88999660/articles/1581524.html 进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi ...