存在的差异:
1. 私有数据继承差异
  es5:执行父级构造函数并且将this指向子级
  es6:在构造函数内部执行super方法,系统会自动执行父级,并将this指向子级
2. 共有数据(原型链方法)继承的差异
  es5:子级原型链上的赋值,继承父级原型链上数据
  es6:extend 父级,会自动将父级原型链上的数据给子级
3. 原型链上的共有数据是否可枚举for in
  es5:可以枚举
  es6:不可枚举
4. 构造函数的指向
  es5:需要改变constructor的指向
  es6:不需要改
5. 静态方法的写法差异
  es5:直接在构造函数.静态方法
  es6:static a=1;静态方法——浏览器不支持,要用bable
6. 实例_proto_的指向差异
  es5:ƒ Child5(name)
  es6:class Child6

es6的优点:

  Class在语法上面更加贴近面向对象的写法;

  Class实现继承更加易读、易理解;

  更易于写Java后端等语言的使用;

  ****本质还是语法糖,使用prototype。

es5的方法

    //父级
function Parent5(name) {//构造函数
this.name=name;//私有数据
}
Parent5.prototype.say=function () {//公共数据
console.log(this.name);
}
//子级
function Child5(name) {//构造函数
Parent5.call(this,name)//执行父级的构造函数,并将this指向子级
}
Child5.prototype=new Parent5;//将父级原型上的共有数据给自己
Child5.prototype.constructor=Child5;//改变constructor的指向问题
Child5.prototype.buy=function () {
console.log('buy');
}
var c5=new Child5('邵');//实例
c5.say()//邵
c5.buy()//buy

es6的方法

    //父级
class Parent6{//类
constructor(name){//构造函数
this.name=name;
}
say(){
console.log(this.name);
}
}
class Child6 extends Parent6{//将父级原型上的共有数据给自己
constructor(name){
super(name);//执行父级的构造函数,并将this指向子级
}
buy(){
console.log('buy')
}
}
var c6=new Child6('邵');
c6.say()//邵
c6.buy()//buy

js类的继承,es5和es6的方法的更多相关文章

  1. js类式继承模式学习心得

    最近在学习<JavaScript模式>,感觉里面的5种继承模式写的很好,值得和大家分享. 类式继承模式#1--原型继承 方法 让子函数的原型来继承父函数实例出来的对象 <script ...

  2. JS创建对象、继承原型、ES6中class继承

    面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...

  3. 精读JavaScript模式(八),JS类式继承

    一.前言 这篇开始主要介绍代码复用模式(原书中的第六章),任何一位有理想的开发者都不愿意将同样的逻辑代码重写多次,复用也是提升自己开发能力中重要的一环,所以本篇也将从“继承”开始,聊聊开发中的各种代码 ...

  4. js类(继承)(二)

    1. 定义js类 js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Sh ...

  5. js类的继承

    1.类式继承 首先要做的是创建构造函数.按惯例,其名称就是类名,首字母应该大写.在构造函数中,创建实例属性要用关键字this .类的方法则被添加到prototype对象中.要创建该类的实例,只需结合关 ...

  6. JS 类和继承

    function User(name, pass) { this.name = name this.pass = pass } User.prototype.showName = function ( ...

  7. js类(继承)(一)

    //call() //调用一个对象的一个方法,以另一个对象替换当前对象. //call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) //参数 //thisObj / ...

  8. ES5和ES6数组方法

    ES5 方法 indexOf和lastIndexOf 都接受两个参数:查找的值.查找起始位置不存在,返回 -1 :存在,返回位置.indexOf 是从前往后查找, lastIndexOf 是从后往前查 ...

  9. js原生设计模式——2面向对象编程之继承—new类式继承

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

随机推荐

  1. JQ 向上查找指定 同辈元素 找到后返回

    由于JQ 只有 prev() 和 prevAll() prev()只能找一个 prevAll()把所有的都给找了 我想要的是: 在同辈元素中向上找,直到找到 我指定的元素 后,返回他. 所以自己写了个 ...

  2. leetcode python 030 Substring with Concatenation of All Words

    ## 您将获得一个字符串s,以及一个长度相同单词的列表.## 找到s中substring(s)的所有起始索引,它们只包含所有单词,## eg:s: "barfoothefoobarman&q ...

  3. ubuntu1604使用之旅——启动ssh系列

    ---恢复内容开始--- 1.安装ssh的client和server: sudo apt-get install openssh-server openssh-client 2.然后就要安装key: ...

  4. 我在MySQL免安装版使用过程中遇到的问题记录

    我的MySQL版本为:mysql-5.7.16-winx64 安装时间为:2016年5月10号 由于是免安装版,下载好压缩文件之后解压到特定目录下,再打开命令行运行几行命令即可. 在一次操作中,发现无 ...

  5. keras中VGG19预训练模型的使用

    keras提供了VGG19在ImageNet上的预训练权重模型文件,其他可用的模型还有VGG16.Xception.ResNet50.InceptionV3 4个. VGG19在keras中的定义: ...

  6. golang sync.Cond条件变量的使用

    cond.Wait()的操作实际上是对与cond绑定的锁先进行解锁,在等待通知:接收到通知后,会尝试加锁,加锁成功则唤醒否则继续等待通知: cond.Waite()前必须对关连锁加锁,否则panic ...

  7. js空数组

    首先我们定义一个空的数组: var a = [ ]; 数组a里面是空的没有值,接下来我们打印: console.log(!!a); 因为数组是空的,此处应该为false. 恰好相反,!!a为true. ...

  8. 洛谷1101:单词方阵(DFS)

    题目描述 给一n×nn \times nn×n的字母方阵,内可能蕴含多个"yizhong"单词.单词在方阵中是沿着同一方向连续摆放的.摆放可沿着888个方向的任一方向,同一单词摆放 ...

  9. Web.xml详解分析

    一.首先了解项目加载的优先级 首先可以肯定的是,加载顺序与它们在 web.xml 文件中的先后顺序无关.即不会因为 filter 写在 listener 的前面而会先加载 filter. 最终得出的结 ...

  10. 基于Jmeter的 性能测试

    目标:对南通大学计算机学院网站开展性能测试:(url:http://cs.ntu.edu.cn/) 首先下载jmeter的zip压缩包,解压后进入bin目录,由于我使用的系统是win10,所以要双击执 ...