当前位置: 首页 > news >正文

javascript 几种常用继承方法和优缺点分析

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1.原型链继承(最简单)

核心 (实现思路):用父类的实例充当子类原型对象

function Person(name) {
    this.name = name;
    this.fav = ['basketball', 'football'];
    this.detail = {country : '中国', city : '江苏'}
}
function Man(name) {
    this.say = function(){console.log('I am man')};
}
Man.prototype = new Person(); //核心
var sam = new Man('sam');
console.log(sam.fav);         //'basketball', 'football'

优点

1.简单,容易理解,容易实现

缺点:

1.创建子类实例时无法向父类传参(创建Man时无法传递name信息)

2.引用类型的属性(数组和对象),被所有实例共享,接着上面的代码举个例子

var tyler = new Man('tyler');
tyler.fav.push('badminton');
tyler.rela.area = '建业区'
//修改tyler实例的信息,间接地修改了sam实例的属性
console.log(sam.fav)        // "basketball", "football", "badminton"
console.log(sam.rela)       // {country:'中国',city:'江苏',area:'建邺区'}

2.借用构造函数(经典继承)

为了解决原型链继承的两个问题,所以就有了借用构造函数的继承方法。

核心 (实现思路):借父类的构造函数,补充子类的构造函数,相当于把父类的实例属性拷贝一份给子类的实例

function Person(name) {
    this.name = name;
    this.fav = ['basketball', 'football'];
    this.say = function(){console.log('I love china')}
}
function Man(name) {
    Person.call(this, name);     //核心
}
var sam = new Man('sam');
var tyler = new Man('tyler');
tyler.fav.push('badminton');
console.log(sam.name);        //sam
console.log(tyler.name);      //tyler
console.log(sam.fav);         //'basketball', 'football'
console.log(tyler.fav);       //'basketball', 'football', 'badminton'

console.log(sam.say == tyler.say)  //false

优点:

1.解决了原型链继承中 实例共享引用类型属性的问题

2.修改了原型链继承中 子类构建无法向父类传递参数的问题

缺点:

1.代码的最后一行显示两个子类实例中的方法并非同一个,即无法实现函数复用,如果实例多的情况下影响性能

3.组合继承(常用)

原型链继承和借用构造函数继承的组合

核心 (实现思路):把实例函数都放在父类的原型对象上面,实现函数复用,同时保留借用构造函数的实现思路。

function Person(name) {
    this.name = name;
    this.fav = ['basketball', 'football'];
}
Person.prototype.say = function(){console.log('I love china')}
function Man(name) {
    Person.call(this, name);     //核心
}
Man.prototype = new Person();
var sam = new Man('sam');
var tyler = new Man('tyler');
tyler.fav.push('badminton');
console.log(sam.name);        //sam
console.log(sam.fav);         //'basketball', 'football'

console.log(sam.say == tyler.say)  //true

优点:

1.没有实例共享引用类型的属性的问题

2.子类构造实例时可以通过父类传递参数

3.实现了函数复用

缺点:

1.唯一缺点就是创建一个子类实例时,会调用两次父构造函数,从上面的代码中sam 和Man.prototype 中都包含 fav属性

4.寄生组合式继承(最佳)

为了解决组合继承中的不足,计生组合式继承应运而出了

核心 (实现思路):使用壳函数切掉了原型对象上多余的父类属性

//代码1
function Person(name) {
    this.name = name;
    this.fav = ['basketball', 'football'];
}
Person.prototype.say = function(){console.log('I love china')}
function Man(name) {
    Person.call(this, name);     
}
//关键三步代码
var F = function () {};
F.prototype = Person.prototype;
Man.prototype = new F();

var sam = new Man('sam');
console.log(sam.name);        



//代码2 :对继承的关键三部进行封装
function Person(name) {
    this.name = name;
    this.fav = ['basketball', 'football'];
}
Person.prototype.say = function(){console.log('I love china')}
function Man(name) {
    Person.call(this, name);     
}

function create(o) {
    function F(){};
    F.prototype = o;
    return new F();
}
function inheritFunc(child, parent) {
    var newPrototype = create(parent.prototype);
    //如果没有下面一行代码,sam.constructor会变称Person 而不是Man
    newPrototype.constructor = child;
    child.prototype = newPrototype;
}

var sam = new Man('sam');
console.log(sam.name); 

优点:

没有任何缺点就是优点(如果使用麻烦不算缺点的话)

缺点:

理解起来比较绕,使用比较麻烦

 

转载于:https://my.oschina.net/kimyeongnam/blog/3006004

相关文章:

  • Python零基础学习笔记(三十六)—— 递归
  • 『高级篇』docker之课程管理dubbo入门操练(14)
  • 离家46年 志愿者助94岁老兵回乡
  • updateByPrimaryKeySelective更新失败
  • MySQL5.6主从复制最佳实践
  • 关于STL库中的max min swap
  • 前端技术选型的遗憾和经验教训
  • 吴昕曝最新写真 百变风格引领冬日风尚
  • js---通过arguments来获取指定参数
  • 洛谷P1117 优秀的拆分
  • fzyzojP3979 -- [校内训练20180914]魔法方阵
  • 对话 CTO〡听神策数据 CTO 曹犟描绘数据分析行业的无限可能
  • yum命令详解
  • 《天龙八部3D》Unity技术方案揭秘
  • PAT A1050
  • 78. Subsets
  • JS创建对象模式及其对象原型链探究(一):Object模式
  • k个最大的数及变种小结
  • Python语法速览与机器学习开发环境搭建
  • React 快速上手 - 06 容器组件、展示组件、操作组件
  • Ruby 2.x 源代码分析:扩展 概述
  • swift基础之_对象 实例方法 对象方法。
  • text-decoration与color属性
  • Vue实战(四)登录/注册页的实现
  • 分布式事物理论与实践
  • 关于Android中设置闹钟的相对比较完善的解决方案
  • 回流、重绘及其优化
  • 少走弯路,给Java 1~5 年程序员的建议
  • 听说你叫Java(二)–Servlet请求
  • 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
  • 新版博客前端前瞻
  • 一起来学SpringBoot | 第十篇:使用Spring Cache集成Redis
  • 智能合约开发环境搭建及Hello World合约
  • 《天龙八部3D》Unity技术方案揭秘
  • 阿里云重庆大学大数据训练营落地分享
  • 宾利慕尚创始人典藏版国内首秀,2025年前实现全系车型电动化 | 2019上海车展 ...
  • ​软考-高级-系统架构设计师教程(清华第2版)【第1章-绪论-思维导图】​
  • #在 README.md 中生成项目目录结构
  • $L^p$ 调和函数恒为零
  • (16)UiBot:智能化软件机器人(以头歌抓取课程数据为例)
  • (2021|NIPS,扩散,无条件分数估计,条件分数估计)无分类器引导扩散
  • (附源码)python房屋租赁管理系统 毕业设计 745613
  • (附源码)spring boot儿童教育管理系统 毕业设计 281442
  • (十)DDRC架构组成、效率Efficiency及功能实现
  • (五)c52学习之旅-静态数码管
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .net core 连接数据库,通过数据库生成Modell
  • .Net Core缓存组件(MemoryCache)源码解析
  • .Net IOC框架入门之一 Unity
  • .NET 表达式计算:Expression Evaluator
  • .NET/C# 利用 Walterlv.WeakEvents 高性能地中转一个自定义的弱事件(可让任意 CLR 事件成为弱事件)
  • .Net小白的大学四年,内含面经
  • .net专家(张羿专栏)
  • [Ariticle] 厚黑之道 一 小狐狸听故事
  • [c]扫雷