JavaScript(js)实现继承的几种方式

1.原型链继承

核心：将父类的实例做为子类的原型对象

//动物类function Animal(name,sex) {this.name = name || 'Animal';this.sex = sex || '未知';this.sleep = function () {console.log(this.name + "在睡觉！");}}//添加原型属性和方法Animal.prototype = {eat: function () {console.log(this.name + "在吃饭!");},play:function (){console.log(this.name+"在玩！");}}function Type(type){this.type=type||'类型';}function Cat(){}//实现原型链继承Cat.prototype=new Animal();
//    Cat.prototype=new Type();Cat.prototype.name="小花";Cat.prototype.sex="公";var scat=new Cat();
//下面这样写  直接成了类的构造属性和方法了
//    scat.name='小花';
//    scat.sex='公';console.log(scat);scat.sleep();scat.eat();scat.play();//等式console.log(scat instanceof  Animal);//true 子类的实例是父类console.log(scat instanceof  Cat);//true   子类的实例是本身

特点：

子类的实例即是本身也是父类

父类新增的原型方法和属性子类对象都可以访问

缺点：

子类添加属性和方法必须在new之后或者直接写在子类里面

不能实现多继承

原型链继承子类的实例上不能直接向父类传递参数

2. 构造继承

使用父类的构造函数来增强子类 ===复制父类的构造属性给子类 (父类的原型复制不到)

//动物类function Animal(name, sex) {this.name = name || 'Animal';this.sex = sex || '未知';this.sleep = function () {console.log(this.name + "在睡觉！");}}//添加原型属性和方法Animal.prototype = {eat: function () {console.log(this.name + "在吃饭!");},play: function () {console.log(this.name + "在玩！");}}//科目类function Type(type) {this.type = type || '类型';}Type.prototype.paTree = function (args) {console.log(args);}function Cat(name, sex, type) {Animal.call(this, name, sex);Type.call(this, type);}var cat = new Cat('小黑', '公', '猫科');cat.sleep();console.log(cat);//子类的实例是本身console.log(cat instanceof  Cat);//trueconsole.log(cat instanceof  Animal);//falseconsole.log(cat instanceof  Type);//false

特点：

创建子类的时候可以向父类传递参数

可以实现多继承

缺点：

子类对象的实例是本身不是父类

只能继承父类的构造属性和方法不能继承原型属性和方法

不是完全的继承类似克隆父类的副本影响性能

3.实例继承

核心：为父类实例添加新特性，作为子类实例返回

 //动物类function Animal(name, sex) {this.name = name || 'Animal';this.sex = sex || '未知';this.sleep = function () {console.log(this.name + "在睡觉！");}}//添加原型属性和方法Animal.prototype = {eat: function () {console.log(this.name + "在吃饭!");},play: function () {console.log(this.name + "在玩！");}}//子类function Mouse(){var animal=new Animal();return animal;}//下面这种写法可以使用//var mouse=new Mouse();var mouse=Mouse();console.log(mouse);//实例继承  子类的实例不是本身  是父类console.log(mouse instanceof  Mouse);//falseconsole.log(mouse instanceof  Animal);//true

特点：

不限制调用方式（不管你是new 还是直接调用函数执行）

缺点

不支持多继承

4.组合继承

核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

//动物类function Animal(name, sex) {this.name = name || 'Animal';this.sex = sex || '未知';this.sleep = function () {console.log(this.name + "在睡觉！");}}//添加原型属性和方法Animal.prototype = {eat: function () {console.log(this.name + "在吃饭!");},play: function () {console.log(this.name + "在玩！");}}function Cat(name,sex){//构造继承Animal.call(this,name,sex);}//原型链继承Cat.prototype=new Animal();var cat=new Cat('小花','公');console.log(cat);cat.eat();console.log(cat instanceof Animal);//trueconsole.log(cat instanceof  Cat);//true

特点：

原型链继承和构造继承相互弥补缺点

缺点：

里面存在两个实例消耗内存

5.寄生继承

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

 function Person(name, age) {this.name = name;this.age = age;}Person.prototype = {sleep: function () {console.log(this.name + "在睡觉！");}}//实例继承function Student(obj) {function fun() {}//寄生到  fun函数的prototype上面fun.prototype = obj;return new fun();}var p = new Person('小明',18);//实例化person//带个壳子function getObj() {var stu=Student(p);stu.work="学习";return stu;}var s = getObj();console.log(s);s.sleep();

特点：

堪称完美

缺点：

实现较为复杂

JavaScript(js)实现继承的几种方式相关推荐

(转)js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式 1.使用对象冒充实现继承(该种实 ...
JavaScript笔记 - 对象继承的几种方式
1)对象冒充 2)call方式 3)apply方式 4)原型链 5)混合方式 1)对象冒充 Js代码 function People(name, age) { this.name = name; th ...
javascript 面向对象(实现继承的几种方式)
欢迎大家关注我的公众号[老周聊架构],Java后端主流技术栈的原理.源码分析.架构以及各种互联网高并发.高性能.高可用的解决方案. 1.原型链继承核心: 将父类的实例作为子类的原型缺点: 父类新增 ...
JS 实现继承的 5 种方式
文章目录继承原型链继承原型链继承的优缺点构造继承构造继承的优缺点复制继承复制继承的优缺点组合继承组合继承的优缺点寄生组合继承参考继承继承作为面向对象语言的三大特性之一(继承. ...
面试--js实现继承的几种方式
基于原型的继承 function father() {this.faName = 'father';this.names=['11','22']}father.prototype.getfaName ...
JS 总结之原型继承的几种方式
在之前的总结中,我们详细分析了原型<JS 总结之原型>,原型很大作用用于模拟继承,这一次,我们来聊原型继承的几种方式. function Person (age) {this.age = ...
js中继承的几种用法总结(apply,call,prototype)
本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助一,js中对象继承 js中有三种继承方式 1.js原型(proto ...
继承有几种方式，分别是什么，想要实现继承可以使用哪些方法
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [继承有几种方式 ...
JS数组遍历的几种方式
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代 ...