es6新增关键字class,代表类,其实相当于代替了es5的构造函数

    通过构造函数可以创建一个对象实例,那么通过class也可以创建一个对象实列

/* es5 创建一个person 构造函数 */
function person (name,age) {
this.name = name
this.age = age
}
/* 定义原型链上的方法sayholle */
/* 为什么要将方法定义在原型上,定义在原型上的方法,所有的实例对象都共享
不会出现没实列一个对象都重新创建一个这个方法 */
person.prototype.sayholle = function () {
console.log(this.name+' holle'+ this.age)
} let person1 = new person('czcz','23')
person1.sayholle() // czcz holle23 /* es6 使用class创建一个对象 */
class personclass {
/* 实列对象时默认调用的方法 */
constructor (name,age) {
this.name = name
this.age = age
}
/* 定义一个方法,相对构造上述原型链上的方法 */ sayholle () {
console.log(this.name+' holle'+ this.age)
}
}
let person2 = new personclass('czcz','26')
person2.sayholle() // czcz holle23

  es5中继承的方式

    1原型链继承

/* es5原型链继承 */
function person (name,age) {
this.name = name
this.age = age
}
person.prototype.sayholle = function () {
console.log(this.name+' holle'+ this.age)
} function child (sex) {
this.sex = sex;
}
child.prototype = new person();
child.prototype.hh = 'ddd'
let p = new child('man')
console.log(p) //
console.log(new person());
let p2 = new child('man')
p2.__proto__.age = '36'
/* 给p2原型上的age赋值,则导致p上的age也改变,父类构造函数上的属性被所有子类共享 */
console.log(p) //
/* 缺点,child 新增的属性只能在new person 以后,创建实列时无法向
父类的构造函数传送参数,因为直接是指定了原型,所有也不能实现多继承
父类构造函数上的属性被所有子类共享
*/

    2.构造函数继承

/* es5构造函数继承 */
function person (name,age) {
this.name = name
this.age = age
}
person.prototype.sayholle = function () {
console.log(this.name+' holle'+ this.age)
}
function child (sex,name,age) {
this.sex = sex
person.call(this,name,age)
} let p = new child('man','czklove','13')
console.log(p);
/*
可以是先多继承,只要执行多个call
创建实列时能像父类构造函数船体参数
不会出现父类属性,所有子类构造函数共享
缺点,
不能继承父类原型链上的方法,如上面不能掉用sayholle方法
子类构造函数的实列,原型链上并不存在父类构造函数,
因为不能继承父类原型链上的函数,所有要继承函数只能定义在父类构造函数上,
不能达到函数复用
*/

    3.组合继承,融合了上面两种方式

/* es5组合继承 */
function person (name,age) {
this.name = name
this.age = age
}
person.prototype.sayholle = function () {
console.log(this.name+' holle'+ this.age)
}
function child (sex,name,age) {
this.sex = sex
person.call(this,name,age)
}
child.prototype = new person();
/* 重新设置一下constructor 不设置也没有影响,严谨的角度上来说还是设置一下*/
/* 不设置的话,__proto__ 上时没有 constructor */
/* 正常来讲constructor是指向自身的 */
child.prototype.constructor = child;
let p = new child('man','czklove','13')
let p1 = new child('man','czklove1','16')
p.sayholle(); // czklove holle13
console.log(p);
  1. child {sex: "man", name: "czklove", age: "13"}
    1. age: "13"
    2. name: "czklove"
    3. sex: "man"
    4. __proto__: person
      1. age: undefined
      2. constructor: ƒ child(sex,name,age)
      3. name: undefined
      4. __proto__: Object

    /*
    组合继承,既能达到对父类属性的继承,也能继承父类原型上的方法
    父类属性继承也不会在所有子类的实列上共享
    唯一缺点,子类原型上有父类构造函数的属性,也就是多了一份属性
    */
console.log(p.__proto__ === child.prototype) //true

    4.优化版的组合继承(寄生组合继承)

/* es5寄生组合继承 */
function person (name,age) {
this.name = name
this.age = age
}
person.prototype.sayholle = function () {
console.log(this.name+' holle'+ this.age)
}
function child (sex,name,age) {
this.sex = sex
person.call(this,name,age)
}
child.prototype = Object.create(person.prototype);
child.prototype.constructor = child
let p = new child('man','czklove','13')
p.sayholle(); // czklove holle13
console.log(p);
/* child {sex: "man", name: "czklove", age: "13"}
age: "13"
name: "czklove"
sex: "man"
__proto__: person
constructor: ƒ child(sex,name,age)
__proto__:
sayholle: ƒ ()
constructor: ƒ person(name,age)
__proto__: Object */

  es6 class

    1.1class 内部都是严格模式

    1.2class 不存在变量提升

    1.3 class 的 name属性

    1.4 实现symbol.iterator 接口,可以使用for of 遍历属性

    1.5this 指向实例内部

  关于class的基本介绍,去阮一峰老师的es6入门看就行 http://es6.ruanyifeng.com/#docs/class

  es6 class的继承

/* esl class */
class person {
constructor (name,age) {
this.name = name
this.age = age
}
syaholle () {
console.log(this.name+ ' holle '+this.age)
}
} class child extends person {
constructor (name,age,sex) {
/* 执行父类的构造函数
子类必须在构造函数中掉用super
*/
super(name,age)
/* 使用this一定要在super 之后 */
this.sex = sex
}
} let p = new child('czklove','23','man')
console.log(p)
/* child {name: "czklove", age: "23", sex: "man"}
age: "23"
name: "czklove"
sex: "man"
__proto__: person
constructor: class child
__proto__:
constructor: class person
syaholle: ƒ syaholle()
__proto__: Object */
/* esl class */
class person {
constructor (name,age) {
this.name = name
this.age = age
}
syaholle () {
console.log(this.name+ ' holle '+this.age)
}
} class child extends person {
constructor (name,age,sex) {
/* 执行父类的构造函数
子类必须在构造函数中掉用super
*/
super(name,age)
/* 使用this一定要在super 之后 */
this.sex = sex
}
} let p = new child('czklove','23','man')
console.log(p)
/* child {name: "czklove", age: "23", sex: "man"}
age: "23"
name: "czklove"
sex: "man"
__proto__: person
constructor: class child
__proto__:
constructor: class person
syaholle: ƒ syaholle()
__proto__: Object */

  es6 class 还涉及到很多东西,

      1.静态方法

      2.this指向

      3.super 关键字的具体使用

      4.类的prototype属性,构造函数的__proto__

      5.原生构造函数的继承,如Array的继承,Boolean,Number,String Date...

  基础简单的这里就不说了

  我们再看以下原生构造函数的继承

    es5中是不允许原生构造函数的继承的

  

/*  es5为什么不能对原生构造函数的继承
通过es5继承我们知道,继承父类构造属性是通过person.call(this,argument)
(es6)
是因为子类无法获得原生构造函数的内部属性,
通过Array.apply()或者分配给原型对象都不行。
原生构造函数会忽略apply方法传入的this,也就是说,
原生构造函数的this无法绑定,导致拿不到内部属性
*/
/* es6 使用class继承原生 */ class myarray extends Array {
constructor(...argus) {
super(...argus)
}
} let arrays = new myarray();
arrays[0] = 'czklove';
console.log(arrays);
arrays.length = 0
console.log(arrays); /* 输出
myarray ["czklove"]
myarray [] */

  注,es6对object构造函数的继承,不能传参,传参数无效

class newobjext extends Object {
constructor() {
super(...arguments)
}
}
let o = new newobjext({name: 'czklove'})
console.log(o.name); // undefined

  总结,

    es5的继承

    1.1原型链继承

    1.2 构造函数继承

    1.3组合继承

    1.4寄生组合继承

    es6 的 extends  继承

    super 关键字的使用,新增的静态字段使用,支持对原生构造函数的继承,对object继承的差异

es5继承和es6类和继承的更多相关文章

  1. typescript - 4.es5与typescript的类与继承

    ES5中的类与类的继承 (1)简单的类 function Person() { this.name = '张三'; this.age = 20; } var p = new Person(); ale ...

  2. 04面向对象编程-02-原型继承 和 ES6的class继承

    1.原型继承 在上一篇中,我们提到,JS中原型继承的本质,实际上就是 "将构造函数的原型对象,指向由另一个构造函数创建的实例". 这里,我们就原型继承的概念,再进行详细的理解.首先 ...

  3. C/C++ 多继承{虚基类,虚继承,构造顺序,析构顺序}

    C/C++:一个基类继承和多个基类继承的区别 1.对多个基类继承会出现类之间嵌套时出现的同名问题,如果同名变量或者函数出现不在同一层次,则底层派生隐藏外层比如继承基类的同名变量和函数,不会出现二义性, ...

  4. ES6类的继承

    ES6 引入了关键字class来定义一个类,constructor是构造方法,this代表实例对象. constructor相当于python的init 而this 则相当于self 类之间通过ext ...

  5. 类ExampleA继承Exception,类ExampleB继承ExampleA。 有如下代码片断:

    try { throw new ExampleB("b") } catch(ExampleA e){ System.out.println("ExampleA" ...

  6. 类Exception_A继承Exception,类Exception_B继承Exception_A,请问执行此段代码的输出是什么?

    @Test public void Test_Exception() { try { throw new ExceptionB("A"); } catch (ExceptionA ...

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

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

  8. JS原型继承和类式继承

    前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客.此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承.文中提到了各种原型继承的优点,详细的 ...

  9. JavaScript中的类式继承和原型式继承

    最近在看<JavaScript设计模式>这本书,虽然内容比较晦涩,但是细品才发现此书内容的强大.刚看完第四章--继承,来做下笔记. 书中介绍了三种继承方式,类式继承.原型式继承和掺元类继承 ...

随机推荐

  1. PKUWC2020爆零记

    抱歉,这么晚才更. 事实是:我都没有去 所以爆零了 QwQ

  2. consul windows下搭建

    起源 由于项目在linux部署,但是开发和测试是在windows下的,所以,暂时接触到consul,暂时也不会远程连接,只好在windows下安装consul 过程 去官网下载:https://www ...

  3. windows10 gcc编译C程序(简单编译)

    参考:http://c.biancheng.net/view/660.html gcc可以一次性完成C语言源程序的编译,也可以分步骤完成:下面先介绍一次性编译过程. 1.生成可执行程序 cd xxx ...

  4. 南昌网络赛 H The Nth Item

    南昌网络赛The Nth Item 暴力快速幂+unordered_map记忆化 注意:记忆化不能写到快速幂求解函数里,不断调用函数会造成很大的时间浪费 #include<bits/stdc++ ...

  5. gitblit 数据迁移(复制)

    gitblit 数据迁移 完全拷贝方式: 将原服务器上的gitblit的安装目录.数据目录等相关目录拷到另一台服务器上即可,这样启动方式和使用端口及数据和原服务上的一模一样.(因为gitblit是不用 ...

  6. linux修改时区为东八时区,北京时间,上海时间

    ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime echo "Asia/Shanghai" > /etc/tim ...

  7. soj#2402 「THUPC 2017」天天爱射击 / Shooting

    分析 按照被穿过多少次整体二分即可 代码 #include<bits/stdc++.h> using namespace std; #define lb(x) x&(-x) ],r ...

  8. nacos 发布配置

    server 保留 2 份配置文件,一份在 mysql,一份在本地磁盘,同时在内存中缓存配置文件的 md5 值.当客户端获取配置时,server 直接返回本地磁盘文件,使用的是 sendFile ap ...

  9. 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第1节 基本概念_02maven依赖管理的概念

    传统的web项目jar放在项目中,占用磁盘空间 maven项目里面只保存jar包的坐标.jar包文件都在仓库中.扎包重用都在jar包仓库中.

  10. kubernets监控

    Weave Scope 容器地图   创建 Kubernetes 集群并部署容器化应用只是第一步.一旦集群运行起来,我们需要确保一起正常,所有必要组件就位并各司其职,有足够的资源满足应用的需求.Kub ...