1，原型链继承

两个缺点：

1.子类通过其原型prototype对父类实例化，继承了父类。但当父类中的共有属性是引用类型时，会在子类中被所有的实例共用，如此在一个子类实例中更改从父类中继承过来的公有属性时，会影响到其他子类。

2.由于子类是通过原型prototype实例化父类实现继承的，所以在创建父类的时候，无法向父类传递参数，因而在实例化父类的时候无法对父类构造函数内的属性初始化。

function Person(){
this.superType="胡一天";//声明父类
}
Person.prototype.sayName=function(){
alert(this.superType);//为父类添加公有方法
}
function People(name){//声明子类 
this.name=name;
this.age=18;
}
People.prototype=new Person();//继承父类 //将父类对象赋值给子类原型，子类原型可访问父类原型上的属性和方法--类式继承原理  
//子类添加公有方法
People.prototype.userAge=function(){
alert("年龄是："+this.age);
}
var user=new People("徐程");
user.sayName();

2，借用构造函数继承

call方法可以改变函数的作用环境，在子类中调用这个方法就是将子类中的变量在父类中执行，父类中给this绑定属性，因而子类继承了父类的共有属性。

缺点：

这种类型的继承没有涉及原型prototype，所以父类的原型方法不会被子类继承。如想被子类继承就必须放在构造函数中，这样创造的每个实例都会单独拥有一份而不能共用，违背了代码复用原则

function Person(name,age){//声明父类
this.name=name;//引用类型共有属性
this.age=age;//值类型公有属性  
}
//父类声明原型方法  
Person.prototype.showBooks=function(){
console.log("我的姓名"+this.name);
}
//声明子类
function SupClass(name,age){
Person.apply(this,arguments);//继承父类
}
var user=new SupClass("orange");
user.showBooks();//TypeError: ins1.showBooks is not a function 

3，组合继承(原型+借用构造)

缺点：

父类的构造函数执行了两遍：一次在子类的构造函数中call方法执行一遍，一次在子类原型实例化父类的时候执行一遍。

function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.show=function(){
alert("我的姓名"+this.name);
}
function Fale(name,age){
Person.apply(this,arguments);
}
Fale.prototype=new Person();
var user=new Fale("orange");
user.show();

4，原型式继承

缺点：
父类对象的引用类型值被共用。
function People(o){
//声明过渡函数对象
function Person(){};
//过渡对象的原型继承父类
Person.prototype=o;
return new Person();
}
var user={
name:"张继科",
friends:["鬼鬼","景甜"]
}
var anotherPer=People(user);
alert(anotherPer.friends);

5，寄生式继承

function People(o){
//创建一个对象并且添加方法
var clone=Object.create(o);
clone.talk=function(){
alert("你好，"+user.name);
}
return clone;
}
var user={
name:"张继科",
friends:["鬼鬼","景甜"]
}
var anotherPer=People(user);
anotherPer.talk();

6，寄生组合式继承

function SuperType(name) { 
this.name=name;
this.colors=['red','blue','green'] 
} 
SuperType.prototype.sayName=function(){ 
  alert(this.name);
} 
function SubType(name,job) { 
 // 继承属性 
  SuperType.call(this,name);
  this.job=job;
} 
SubType.prototype=Object.create(SuperType.prototype);
SubType.prototype.constructor=SubType;
var instance=new SubType('恍恍惚惚','student');
instance.sayName();

javascript继承的6种方法相关推荐

  1. 《javascript高级程序设计》第六章 读书笔记 之 javascript继承的6种方法

    本文首发于https://segmentfault.com/a/1190000017840651 ECMAScript只支持实现继承,主要依靠原型链来实现.与实现继承对应的是接口继承,由于script ...

  2. 分析网页 JavaScript Bundles 的几种方法

    分析你网页中的  JavaScript Bundles 大小,并限制网页中的 JavaScript 数量,可以减少浏览器花费在解析.编译和执行 JavaScript 的时间.这可以加快浏览器可以开始响 ...

  3. JavaScript创建对象的4种方法

    JavaScript 创建对象的4种方法 所谓对象就是用来帮助你完成一些事情是,对象是有特征和行为的,是具体特指的某一个事物.使用对象可以使程序更加整洁 通过Object()方法来创建 Object( ...

  4. HTML5动态加载资源方式,动态加载JavaScript文件的两种方法

    这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval ...

  5. html按照字数分页,纯javascript实现分页(两种方法)

    先给大家贴效果图: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用 ...

  6. php javascript分页,纯javascript实现分页(两种方法)

    有的时候页面需要很多不同的表组成的数据,该怎么分页呢?使用数据库分页很简单,那么如何使用js实现分页呢?接下来,小编帮大家解决这个问题,需要的朋友一起来学习吧 先给大家贴效果图: 网上确实有很多分页的 ...

  7. JS教程之 识别 JavaScript 数据类型：两种方法就足够了

    Primitive type原始类型: Null.Undefined.Number.String.Boolean.Symbol.BigInt vObject type 对象类型: Object 你知道 ...

  8. JavaScript数组去重6种方法

    数组去重涉及基础知识较多,总结了以下6个方法: 双重for循环,push新数组: 双重for循环,splice原数组: 单个for循环,遍历对象属性: 单个for循环,sort排序后遍历: ES5,i ...

  9. JavaScript冒泡排序的四种方法

    第一种这种方法冒泡排序 比较相邻的两个元素,如果前一个比后一个大,则交换位置. 第一轮把最大的元素放到了最后面. 由于每次排序最后一个都是最大的,所以之后按照步骤1排序最后一个元素不用比 functi ...

  10. JS继承的6种方法详解以及优缺点对比

    1. 原型链继承 方法 我们知道构造函数.原型对象和实例的关系:每个构造函数都有一个原型对象,原型对象(.prototype)的constructor属性指向构造函数,而实例的 __proto__指向 ...

最新文章

  1. numpy随机生成数组
  2. 谷歌开源 TFGAN，让训练和评估 GAN 变得更加简单
  3. 【dfs】年会小游戏
  4. 北大OJ(POJ 2808)校门外的树
  5. Linux下Exit和_exit函数说明
  6. oracle 12 跟踪,Oracle 12C 块修改跟踪（Block chage tracking） 功能
  7. ad16自动布线设置规则_未来的PCB协同设计制造过程离不开自动化工具
  8. 股票分时数据HTML,股票历史分时数据
  9. MySQL的自定义函数
  10. 华三交换机配置access命令_华三交换机配置中，shutdown这条命令怎么用？
  11. 2022-02-03：有一队人（两人或以上）想要在一个地方碰面，他们希望能够最小化他们的总行走距离。 给你一个 2D 网格，其中各个格子内的值要么是 0，要么是
  12. 叩丁狼学院Java入门 项目代码
  13. 32位计算机支持word系统,Office 32位与64位版本有什么区别？
  14. 世界上最健康的作息时间表健康十不易
  15. Windows11网速慢解决方案
  16. Token登录验证（附图）
  17. html给页面整体添加左右边距_css控制边界与边框示例(内边距、外边距使用方法)...
  18. 基于PHP+MySQL实现注册和登录功能
  19. 计算机一级win10,Win10进入WinRE的四种方法
  20. CocosCreator开源框架（不断更新）

热门文章

  1. 【论文阅读】PerfectDou: Dominating DouDizhu with Perfect Information Distillation
  2. uniapp遮罩_uni-app实现弹窗遮罩
  3. boost::math::binomial_distribution用法的测试程序
  4. android模拟器高德地图,【高德地图电脑版】高德地图电脑版官方下载 含安卓模拟器 车机版-趣致软件园...
  5. 为什么不吃米和面之后，体重掉得比较快？答案或许不是你想的那样
  6. 英特尔CAS缓存加速软件优化SSD性能
  7. 1076: 三位数求解 C语言
  8. 举一个简单的例子，轻松搞懂所谓的“观察者模式”
  9. 小米6内存测试软件,小米6采用的是eMMC还是UFS2.1？来测试一下吧
  10. 【BUG】Python3｜爬虫请求得到的json中的值全是问号