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. 机器学习 Generative Learning Algorithm (A)

    引言 前面几讲,我们主要探讨了如何对 p(y|x;θ) (即y 相对于x的条件概率)进行建模的几种学习算法,比如,logistic regression 对 p(y|x;θ) 进行建模的假设函数为 h ...

  2. 【leetcode刷题笔记】Roman to Integer

    Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 t ...

  3. Qt Create 4.6.2无法自动生成Android Kit

    开发环境: OS,Microsoft Windows [Version 10.0.17134.523] Qt,5.11.1 Qt Creator,4.6.2 JDK,1.8.0_181 Android ...

  4. luoguP1941福赖皮波德

    #include<iostream> #include<cstdio> #include<cstdlib> #include<cstring> #inc ...

  5. E比昨天更多的棒棒糖(Easy+Hrad)(华师网络赛)(DP||母函数||背包优化)

    Time limit per test: 2.0 seconds Memory limit: 512 megabytes 唐纳德先生的某女性朋友最近与唐纳德先生同居.该女性朋友携带一 baby.该 b ...

  6. 【整理】如何选取后缀数组&&后缀自动机

    后缀家族已知成员         后缀树         后缀数组         后缀自动机         后缀仙人掌         后缀预言         后缀Splay ? 后缀树是后缀数 ...

  7. C/C++面试题总结(2)

    C++部分: 1.static(静态)变量有什么作用? 2.virtual关键字用法 3.const有哪些作用 或<王道程序员求职宝典>P95 4.new/delete与malloc/fr ...

  8. select元素选择时间以及jQuery对select的属性操作

    <select class="input04" id="1" name="in_class1" onchange="setc ...

  9. poj 2105 IP Address(水题)

    一.Description Suppose you are reading byte streams from any device, representing IP addresses. Your ...

  10. 在Altium Designer 2009下如何添加Logo图

    最近用Altium Designer 2013(14.2)绘制PCB,之后想在板子上放置一个LOGO图.要是用Altium Designer10以前的版本,过程也很简单,可在用Altium Desig ...