正式发布的ES6中已经封装实现了其他OO语言中的继承形式,Class Extends,这里主要记录js的原型继承和借用构造函数继承

一、原型链继承

function Super(){this.name="小明";
}
Super.prototype.sayName = function(){alert(this.name)
};
function Sub(){}Sub.prototype = new Super();
var instance = new Sub();
instance.sayName();//小明

原型链继承的问题

//当超类中包含引用类型属性值时,其中一个子类的多个实例中,只要其中一个实例引用属性只发生修改一个修改,其他实例的引用类型属性值也会立即发生改变
//原因是超类的属性变成子类的原型属性
function Super(){this.name="小明";this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){alert(this.name)
};
function Sub(){}Sub.prototype = new Super();
var instance1 = new Sub();
var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]
console.log(instance2.friends);//["小红", "小强", "张三"]

二、借用构造函数继承

function Super(){this.name="小明";this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){alert(this.name)
};
function Sub(){Super.call(this);
}var instance1 = new Sub();
var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]
console.log(instance2.friends);//["小红", "小强"]

借用构造函数的问题

单独使用借用构造函数,没办法继承超类中的原型属性和方法

三、组合式继承(原型继承+借用构造函数继承)

组合式继承也是实际开发中最常用的继承方式

function Super(){this.name="小明";this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){alert(this.name)
};
function Sub(){Super.call(this);
}Sub.prototype = new Super();
var instance1 = new Sub();
var instance2 = new Sub();
instance1.friends.push('张三');
console.log(instance1.friends);//["小红", "小强", "张三"]
console.log(instance2.friends);//["小红", "小强"]
instance1.sayName();//小明
instance2.sayName();//小明

组合式继承的问题

//组合式继承中,超类的构造函数将被调用两次
function Super(){this.name="小明";this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){alert(this.name)
};
function Sub(){Super.call(this);//第二次调用
}Sub.prototype = new Super();//第一次调用
var instance = new Sub();

四、寄生式继承

//在主要考虑对象而不是自己定义类型和构造函数的情况下,寄生式继承是一种有用的模式,但无法做到函数的复用
function createAnother(original){var clone = Object(original);//创建一个新对象,original的副本clone.sayName = function(){ //对象的增强,添加额外的方法alert('hi');}return clone;
}
var person = {name:'小明',friends:['小红','小强']
}
var person1 = createAnother(person);
var person2 = createAnother(person);
person1.friends.push('张三');
console.log(person.friends);//["小红", "小强", "张三"]
console.log(person1.friends);//["小红", "小强", "张三"]
console.log(person2.friends);//["小红", "小强", "张三"]

寄生组合式继承

//寄生组合式继承解决了组合式继承调用两次超类构造函数的问题
function inheritPrototype(sub,superr){var prototype = Object.create(superr.prototype);//ES5中创建对象副本的方法prototype.constructor = superr; //弥补重写原型失去的默认constructor属性sub.prototype = prototype;
}
function Super(name){this.name = name;this.friends = ['小红','小强'];
}
Super.prototype.sayName = function(){alert(this.name);
}
function Sub(name){Super.call(this,name);
}
inheritPrototype(Sub,Super);
var person1 = new Sub('小明');
var person2 = new Sub('小华');
person1.friends.push('张三');
console.log(person1.friends);//["小红", "小强", "张三"]
console.log(person2.friends);//["小红", "小强"]
console.log(person1.sayName());//小明
console.log(person2.sayName());//小华

转载于:https://www.cnblogs.com/tuboshu/p/10752356.html

js 中的五种继承方法相关推荐

  1. java中的五种排序方法_用Java排序的五种有用方法

    java中的五种排序方法 Java排序快速概述: 正常的列表: private static List VEGETABLES = Arrays.asList("apple", &q ...

  2. 构造函数的五种继承方法

    1.使用call或apply绑定构造函数 animal.apply(this.arguments) 2.使用prototype属性 Cat.prototype=new Animal(); Cat.pr ...

  3. 《『EcmaScript』之理顺Js中的四种继承

    文章目录 一.开篇前谈 二.什么是继承 三.实现继承 1. 原型链继承 2. 借用构造器继承 3. 组合继承 4. 寄生组合继承 四.总结 一.开篇前谈  这一段时间不小心中招

  4. js中的4种函数调用模式:函数调用、方法调用、构造器调用、间接调用

    全栈工程师开发手册 (作者:栾鹏) js系列教程4-函数.函数参数教程全解 js中的4种函数调用模式 javascript一共有4种调用模式:函数调用模式.方法调用模式.构造器调用模式和间接调用模式. ...

  5. python list方法说明_对python中list的五种查找方法说明

    Python中是有查找功能的,五种方式:in.not in.count.index,find 前两种方法是保留字,后两种方式是列表的方法. 下面以a_list = ['a','b','c','hell ...

  6. python list find函数_对python中list的五种查找方法说明

    Python中是有查找功能的,五种方式:in.not in.count.index,find 前两种方法是保留字,后两种方式是列表的方法. 下面以a_list = ['a','b','c','hell ...

  7. 判断JS数据类型的五种方法

    JavaScript 中常见的几种数据类型: 目录 JavaScript 中常见的几种数据类型: 一.分类 二.判断 1.typeof null既然属于基本数据类型,为什么用typeof返回的是obj ...

  8. JavaScript中的几种继承方式及优缺点,你知道多少呢?

    原文连接:JavaScript中的几种继承方式及优缺点,你知道多少呢? 继承也是前端里面的重要的一个知识点,在实际工作中或者面试中也会经常的遇到,那么通过这篇文章我们详细的了解一下继承的几种方式以及各 ...

  9. JavaScript 异步 实现异步的五种实现方法

    JavaScript实现异步的五种实现方法 文章目录 JavaScript实现异步的五种实现方法 前言 一.同步和异步是什么? 1.同步任务: 2.异步任务: 二.异步方法有哪些(5种): 1.web ...

最新文章

  1. 上交2017计算机专业就业,上海交通大学计算机科学与工程系(CSE)
  2. 科研人员多维度测试GPT-3发现:它并不是一名“好学生”
  3. 设计模式 — 创建型模式 — 建造者模式
  4. 在计算机系统中使用防病毒软件的作用,防病毒软件的作用是 江苏省网络与信息安全技能竞赛题库(5)...
  5. 计算机网络实验仿真系统设计,计算机网络实验课程仿真系统平台的研究与设计...
  6. javax.jdo.option.ConnectionURL配置的问题
  7. 两个用于Eclipse的TCK –开源到底有什么?
  8. python自定义函数参数_python自定义函数的参数之四种表现形式
  9. 【CodeForces - 205B 】Little Elephant and Sorting (思维)
  10. 1g等于多少mb计算机网络,手机流量1G等于多少MB ,如何产生,怎么节省
  11. inotifypropertychanged接受不执行_scp客户端现多个漏洞,可执行恶意脚本
  12. Mysql查看某个表大小
  13. Delphi unit单元文件结构
  14. python dict批量选择_这一定是你见过最全面的python重点
  15. CSS Reset的相关概念及实例
  16. 《中国人工智能学会通讯》——4.40 什么是类人概念学习?
  17. php网站建设和外包
  18. 计算机组成大题分析(五)
  19. 《解忧杂货店》读书笔记
  20. 1.python自动化登录12306

热门文章

  1. apache synapse使用(1)
  2. 基于OHCI的USB主机 —— UFI数据结构1
  3. 实模式和保护模式区别及寻址方式
  4. 汇编语言笔记14-端口
  5. request.getParameter()与request.setAttribute()的区别
  6. django 快速实现session的操作
  7. WPF DataGrid、ListView 简单绑定
  8. 后台开发经典书籍--Redis深度历险:核心原理和应用实践
  9. 最大公因数、最小公倍数、因式分解
  10. DevOps笔记-10:金融行业分支策略的建议