最近想在重新学下ES6,所以就把自己学到的,记录下加强下自己的理解

首先先简单的聊下ES5和ES6中的继承

1.在es5中的继承:

function parent(a,b){
this a = a;
this b = b;
}
function child(c){
this c = c
};

  通过子集去继承父级:

parent.call(child,1,2)

  而去看call的底层方法可知,继承的过程是通过prototype属性

child.prototype = new parent(1,2);

  又此可知,ES5继承的实质是先创建了子类元素child的的实例对象,然后再把父类元素parent的原型对象中的属性赋值给子类元素child的实例对象里面,从而实现继承

2.ES6中的继承

  在传统JS中,生成对象是通过创建构造函数,然后定义生成对象

function parent(a,b){
this.a = a;
this.b = b;
}

  然后通过prototype增加对应所需方法或属性

parent.prototype.methods = function(){
return 'this is test methods';
}
parent.prototype.attr = 'this is test attr‘;

  而ES6中引入了类的概念,也就是class。通过关键词class去定义对象。
  class是个关键词,语言糖,这样能更清晰的读懂所创建的对象,
  通过属性constructor来接收控制方法传入的参数,如果不写这个属性,默认是没有参数的

class parent{
curstructor(a,b){
this.a = a;
this.b = b;
}
}

  ES6中的继承是基于class类之间继承的。通过关键词extends实现。
  通过super实例化调用父类

class parent{
  constructor(a,b){
    this.a = a;
    this.b = b;
  }
  parentMethods(){
    return this.a + this.b
  }
}
class child extends parent{
  constructor(a,b,c){
    super(a,b);
    this.c = c;
  }
  childMethods(){
    return this.c + ',' + super.parentMethods()
  }
}
const point = new child(1,2,3);
alert(point.childMethods());

  上面的代码,是一套简单的ES6父子类继承。
  相信已经看出来了,虽明显的区别就是在于ES6中,激活父组件的是super方法,而不是新建实例化,也就是说,父类的实例对象是先创建出来的,调用后,再去修改子类的构造函数中的this完善原型对象

总结:

  ES5和ES6继承最大的区别就是在于:
    1.ES5先创建子类,在实例化父类并添加到子类this中
    2.ES6先创建父类,在实例化子集中通过调用super方法访问父级后,在通过修改this实现继承

浅谈ES5和ES6继承和区别的更多相关文章

  1. 浅谈es5和es6中的继承

    首先给大家介绍下在es5中构造函数的继承 function A(){ 2 //构造函数A 3 this.name="我是A函数"; 4 } 5 6 A.prototype={ 7 ...

  2. ES5和ES6继承方式区别?

    ES5定义类以函数形式, 以prototype来实现继承 ES6以class形式定义类, 以extend形式继承

  3. es5与es6继承思考

    es5与es6继承思考 es6继承 class Father{ constructor(name){ this.name = name; } getName(){ console.log(this.n ...

  4. 浅谈JavaScript中的继承

    引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...

  5. 浅谈call和apply的联系&区别&应用匹配

    call和apply的联系和区别在之前查过资料了解了一番,昨天晚上睡不着觉忽然想到了这个问题,发现对于他们的联系和区别理解的还是很模糊.看来还是欠缺整理,知识没有连贯起来.反思一二,详情如下: 1作用 ...

  6. js求和运算在可变参数的情况下ES3、ES5和ES6的写法区别

    //ES3.ES5的写法 function foo(){ var arr = Array.prototype.slice.call(arguments); var sum = 0; arr.forEa ...

  7. 浅谈java中的"=="和eqals区别

    在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str2 = new String(&qu ...

  8. 浅谈 JavaScript 中的继承模式

    最近在读一本设计模式的书,书中的开头部分就讲了一下 JavaScript 中的继承,阅读之后写下了这篇博客作为笔记.毕竟好记性不如烂笔头. JavaScript 是一门面向对象的语言,但是 ES6 之 ...

  9. 浅谈Java中linkedlist和arraylist区别

    在Java中,关于集合框架有这样一个体系结构: 其主要由两个接口派生而出:Collection和Map,然后再衍生出各自的一些实现类(比如Collection接口又被继承与Set和List接口,而他们 ...

随机推荐

  1. HDU 3480 斜率dp

    Division Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 999999/400000 K (Java/Others)Total ...

  2. Codeforces Round #340 (Div. 2) E 莫队+前缀异或和

    E. XOR and Favorite Number time limit per test 4 seconds memory limit per test 256 megabytes input s ...

  3. jquery动态添加的元素绑定的事件不生效的问题

    我们可以通过 $(document).on('click', '#xxx', callback) 这种形式解决. 原因,一般情况下,我们是通过 $('#xxx').click(callback) 这种 ...

  4. libevent文档学习(一)多线程接口和使用

    参考libevent官方提供的文档: http://www.wangafu.net/~nickm/libevent-book/Ref1_libsetup.html 这一篇主要翻译libevent多线程 ...

  5. 基于javaWeb阶段下的Cookie和Session总结

    1. 会话技术   就是用户在使用浏览器浏览界面的时候,去访问多个页面后一次性关闭浏览器,这个过程叫会话,学习会话技术就是在客户端与服务器进行交互的时候为了能更好的保存数据.在java中会话技术只有C ...

  6. 使用L2正则化和平均滑动模型的LeNet-5MNIST手写数字识别模型

    使用L2正则化和平均滑动模型的LeNet-5MNIST手写数字识别模型 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献Tensorflow实战Google深度学习框架 实验平台: T ...

  7. zoj 2314 Reactor Cooling (无源汇上下界可行流)

    Reactor Coolinghttp://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1314 Time Limit: 5 Seconds ...

  8. webapi + windows计划 + mshta 实现定时执行任务

    当然,实现定时任务有更好的操作方式,比如方式一:asp.net mvc+quartz.net +corn +webapi,asp.net mvc做任务管理的平台,使用CronTrigger做定时触发, ...

  9. JAVA中反射机制四

    声明:如需转载请说明地址来源:http://www.cnblogs.com/pony1223 反射四 利用反射获取类的属性 1.通过反射也可以获取到类中的属性,假设我们继续使用Person这个类,然后 ...

  10. mongoDB与sql聚合操作对应图

    SQL Terms, Functions, and Concepts MongoDB Aggregation Operators WHERE $match GROUP BY $group HAVING ...