es5 写法:

function Person(name){
this.name = name;
} Person.prototype.sayName = function() {
alert(this.name);
} function VipPerson(name,level){
  Person.call(this,name);
  this.level = level;
}  
// 组合继承(缺点是prototype这一层多了一些无用的undefined属性)
// VipPerson.prototype = new Person();
// VipPerson.prototype.constructor = VipPerson; //重写construtor // 寄生组合继承
VipPerson.prototype = Object.create(Person.prototype, {
constructor: { //重写construtor
value: VipPerson,
enumerable: false,
configurable: true,
writable: true
}
}) var vipPerson = new VipPerson('amie',3);

es6的写法:

相比于es5,es6的写法简化了很多,extends、super就可以完成上面寄生组合继承的效果

super,可以看成 Person.call(this, name)

class Person{
constructor(name){
this.name = name;
}
sayName(){
alert(this.name);
}
} class VipPerson extends Person{
constructor(name,level){
super(name);
this.level = level;
}
} var person2 = new VipPerson('rick',3)

继承之es5对比es6的更多相关文章

  1. js类的继承,es5和es6的方法

    存在的差异:1. 私有数据继承差异 es5:执行父级构造函数并且将this指向子级 es6:在构造函数内部执行super方法,系统会自动执行父级,并将this指向子级2. 共有数据(原型链方法)继承的 ...

  2. 多角度对比 ES5与ES6的区别

    ES5与ES6的对比不同点整理 本文关键词:ES6,javascript, 1.Default Parameters(默认参数) es6之前,定义默认参数的方法是在一个方法内部定义 var link ...

  3. ES5与ES6对比

    ES5与ES6对比 1. 模块引用 1.在ES5里,引入React包基本通过require进行,代码类似这样: // ES5 var React = require('react'); var { C ...

  4. React入门 (1)—使用指南(包括ES5和ES6对比)

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  5. ES5和ES6中对于继承的实现方法

    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

  6. 详解ES5和ES6的继承

    ES5继承 构造函数.原型和实例的关系:每一个构造函数都有一个原型对象,每一个原型对象都有一个指向构造函数的指针,而每一个实例都包含一个指向原型对象的内部指针, 原型链实现继承 基本思想:利用原型让一 ...

  7. ES5与ES6中的继承

    ES5继承在ES5中没有类的概念,所以一般都是基于原型链继承,具体的继承方法有以下几种: 父类: function Father (name) { this.name = name || 'sam' ...

  8. es5与es6继承思考

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

  9. ES5和ES6中的继承

    看到一篇写的非常好的关于js继承的文章,其中对构造函数.原型.实例之间的关系的描述十分透彻,故转载作者文章以随时学习,并供大家共同进步! ES5 ES5中的继承,看图: function Super( ...

随机推荐

  1. Android 學習之旅!(2)

    早幾天因爲學車,弄了幾天時間和精力過去,今天終於考過了(科目二,還是補考的...)嗯..不管這麼多了..今天又開始我的android 學習之旅!! 筆記: platform-tools目錄下的文件: ...

  2. Fake NP CodeForces - 805A (思维)

    Tavak and Seyyed are good friends. Seyyed is very funny and he told Tavak to solve the following pro ...

  3. hg命令

    hg常用命令 hg命令跟git命令大同小异 hg version 查看hg版本 hg clone url 克隆代码仓库 hg branch newBranch 创建分支 hg update other ...

  4. PAT 1023 组个最小数

    https://pintia.cn/problem-sets/994805260223102976/problems/994805298269634560 给定数字0-9各若干个.你可以以任意顺序排列 ...

  5. VM虚拟机—JVM内存

    JVM在运行时将数据划分为了5个区域来存储,这5个区域图示如下: 其中方法区和堆对是所有线程共享的内存区域:而java栈.本地方法栈和程序员计数器是运行时线程私有的内存区域. 首先我们熟悉一下一个 J ...

  6. 解决因为本地代码和远程代码冲突,导致git pull无法拉取远程代码的问题

    一.问题 当本地代码和远程代码有冲突的时候,执行git pull操作的时候,会提示有冲突,然后直接终止本次pull,查了些资料没有找到强制pull的方式,但是可以使用如下方式解决. 二.解决思路 可以 ...

  7. Jquery ajax ajaxStart()和ajaxStop()加载前的优雅表现

    Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函 ...

  8. Node 表单query

    //#使用nodejs编写动态的web服务器//1:加载需要模块 fs http urlconst fs = require("fs");const http = require( ...

  9. 好文章之——PHP系列(一)

    注:最近实习的公司是一家做电商企业,后台主要是php开发,好久不怎么接触php的我看了几篇相关文章,提高下对它的认识与理解,发现里面的学习思路还是非常好的,当然也会重新拾一下基础知识啦! 其实自己心中 ...

  10. JavaScript中的Date对象在IOS中的“大坑”

    在IOS5以上版本(不包含IOS5)中的Safari浏览器能正确解释出Javascript中的 new Date('2013-10-21') 的日期对象. 但是在IOS5版本里面的Safari解释ne ...