ES6学习总结（三）

baoxl 发布于2019-08-21 11:55 / 1310人阅读

摘要：不同于其他面向对象语言，以前的中中没有类的概念，主要是通过原型的方式来实现继承，中引入了原型链，并且将原型链用来实现继承，其核心是利用原型使得一个对象继承另一个对象的方法和属性，中原型继承的关键是将一个实例的原型对象指向另一个实例，因此前一

不同于其他面向对象语言，ES6以前的JavaScript中中没有class类的概念，主要是通过原型的方式来实现继承，JavaScript中引入了原型链，并且将原型链用来实现继承，其核心是利用原型使得一个对象继承另一个对象的方法和属性，JavaScript中原型继承的关键是将一个实例的原型对象指向另一个实例，因此前一个实例便可以获得后一个实例原型对象的属性和方法，例如：

function Father(){
  this.age=30;
}
Father.prototype.work=function(){
  return "hard work";
}
function Child(){
  this.age=10;
}
//将child的原型指向Father构造函数的实例
Child.prototype=new Father();

Child.prototype.play=function(){
  return "play";                
}

var child=new Child();

console.log(child.play()) // play
console.log(child.work()) // work

看完了上面的JavaScript典型的原型继承，要回到ES6上面了，ES6中引入了类class 的概念，实际上是语法糖，很多都与构造函数相关，先看个例子：

// var Man =class{ 这么写也是可以的
class Man{
  constructor(age) {
    this.age=age;
  }
  grow(){
    return this.age+1;
  }
}
var cala=new Man(22);
console.log(cala.grow()); // 23

上面是一个简单的ES6写class的例子，可以看到的是，用class关键字定义类，里面的constructor指的是构造函数，在构造函数中定义私有属性，然后接着定义了一个grow方法，最后通过new关键字来实例化一个对象

在JavaScript中定义类和定义函数很相似，不过两者还是有些不同，函数声明可以提升，但是类声明则不行

var cala=new Man();
class Man{} // Man is not defined

ES6中的类使用 extends创建子类，每个类里面都会有一个constructor构造函数，实例化的时候必须用new关键字来调用类的构造函数，一个构造函数可以通过super来调用另一个构造函数

class Man{
  constructor(age) {
    this.age=age;
  }
  static work(){
    return "hard work"
  }
}

class Cala extends Man{
  constructor(age){
    super(age);
  }
  grow(){
    return this.age+1;
  }
}

var cala=new Cala(22);
console.log(cala.grow()) // 23

ES6中的class支持类支持在原型上定义访问器get，set属性

class Man{
  constructor(age) {
    this.age=age;
  }
  get getAge(){
    return this.age;
  }
  set setAge(age){
    this.age=age;
  }
}
var cala=new Man(22);
console.log(cala.getAge) // 22

cala.setAge=33;
console.log(cala.getAge) // 33

ES6的class中支持静态方法，用关键字static来定义，熟悉面向类与对象的童鞋大多知道，静态方法属于类本身，是通过类来调用，不能通过实例来调用

class Man{
  constructor(age) {
    this.age=age;
  }
  static work(){
    return "hard work"
  }
}

console.log(Man.work()); // hard work

var cala=new Man(22);
console.log(cala.work()); // cala.work is not a function

结合上面JavaScript典型的原型继承和下面的ES6的类，可以看出在使用new关键字实例化对象的时候，实际上是调用了prototype上的构造函数，ES6的class本质就是语法糖，对于传统的写法来说，也是可以在ES6中适用的，类上的方法其实也就相当于定义在prototype上面

云服务器 GPU云服务器大学三年php总结机器学习学习总结机器学习总结 javascript学习总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87281.html

ES6零基础教学_解析彩票项目-学习笔记（一）

摘要：彩票项目实战学习记录一完整走了一遍课程，觉得还不错。支持正版人人有责零基础教学解析彩票项目下面是项目课程的目录路线一个项目分为三部分业务逻辑，自动构建系统，模拟数据和真实数据接口处理。彩票项目实战学习记录（一）完整走了一遍课程，觉得还不错。总结: es6的知识点说得还算清楚，主要是为了了解和使用，不是深究，所以浅尝即止即可，所以觉得还不错。完整还原了项目开发的代码设计和开发过...

blastz 2019-08-22 13:52 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
教你如何打好根基快速入手react，vue，node

摘要：谨记，请勿犯这样的错误。由于在之前的教程中，积累了坚实的基础。其实，这是有缘由的其复杂度在早期的学习过程中，将会带来灾难性的影响。该如何应对对于来说，虽然有大量的学习计划需要采取，且有大量的东西需要学习。前言倘若你正在建造一间房子，那么为了能快点完成，你是否会跳过建造过程中的部分步骤？如在具体建设前先铺设好部分石头？或直接在一块裸露的土地上先建立起墙面？又假如你是在堆砌一个结婚蛋糕...

ddongjian0000 2019-08-23 13:39 评论0 收藏0
教你如何打好根基快速入手react，vue，node

摘要：谨记，请勿犯这样的错误。由于在之前的教程中，积累了坚实的基础。其实，这是有缘由的其复杂度在早期的学习过程中，将会带来灾难性的影响。该如何应对对于来说，虽然有大量的学习计划需要采取，且有大量的东西需要学习。前言倘若你正在建造一间房子，那么为了能快点完成，你是否会跳过建造过程中的部分步骤？如在具体建设前先铺设好部分石头？或直接在一块裸露的土地上先建立起墙面？又假如你是在堆砌一个结婚蛋糕...

LiangJ 2019-07-25 14:32 评论0 收藏0