以前我们使用ES5标准定义一个构造函数的过程如下:

  function Person(name,age){
this.name = name;
this.age = age;
//私有变量
    var else="其他";
//私有方法
     function sayName(){
         alert(that.name);
     };
//公有的方法

add:{
       console.log(name+hobby1)
       };

//暴露

// return {else}

return {
    hobb1:function(age){
         console.log(age)
         }
      };

  }
//为Person添加方法
Person.prototype.say = function(){
console.log("你好,我是"+this.name)
}
Person.prototype.show = function(){
console.log("年龄"+this.age+"一名小学生!");
}

  通常首字母大写的函数我们称为构造函数(并不是一种语法约束,只是一种约定俗成的规律),属性写在方法里面,函数写在原型上面,这样实例化(new操作)出来的对象既有属性也有方法。

  ES6为了更明朗构造函数这个概念了多了一个class语法,它会帮我们完成上面的一系列操作,我们可以把它看做是构造函数的变身,通常我们称为类。JS中的类同函数一样也有两种声明方式:

  类声明:

  class Person{
}

  类表达式:

var Person = class {
}

  现在我们利用类来对开始的构造函数进行变形:

  class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
console.log("你好,我是"+this.name);
}
show(){
console.log("年龄"+this.age+"一名小学生!");
}
}

  我们实例化一个Person的对象,是可以正常使用的:

  var me = new Person("zt",23);
me.say();
me.show();

  原来的构造函数现在变成了一个类,constructor就是构造函数对参数进行初始化的变形,say和show就是构造函数原型上面的函数。

  类就是对有同样特征的事物的一个统称,在JS的类里面只能包括函数,不能包含别的,如果我们需要给类添加一个属性只能通过get/set存取器方法来实现:

  class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
get message()
{
return "name:"+this.name+",age:"+this.age
}
}
var me = new Person("zt",23);
console.log(me.message);

  constructor函数在类里面最多只能有一个,它的主要职能就是初始化属性,在执行new操作时先经由constructor函数将参数设置为对象的属性,如果不需要存在初始化属性那么constructor可以省略。

函数修饰

  类里面定义的函数可以被修饰符修饰最常见的就是static。

  class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
static say(){
console.log("由类调用");
}
}
Person.say();

  一旦一个函数被static修饰,那么这个函数就属于类了,可以直接由类名来调用Person.say()。而普通函数是不能直接由类进行调用的,普通函数只能由实例化的对象来调用,被static修饰的函数是不能被实例化的对象调用的只能通过类直接来进行调用,这种函数等价于我们以前直接利用Person.fn = function(){}定义工具函数一样。

类继承

  一个类可以继承一个类,被继承的类我们一般称为父类,另一个称为子类,通过extends来实现:

  class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
static say(){
console.log("我是"+this.name);
}
}
class Student extends Person{
}

  新创建的Student类是子类,Person类是父类,子类会拥有父类里面的所有函数(constructor和其他函数),子类继承来的函数都是可以直接使用的:

  var stu = new Student("zt",23)
stu.say();

  子类里面没有声明任何函数,仍然可以调用say,say就是通过继承得来的。

  子类可以定义自己的特有的函数,如果和父类函数同名那么就父类的函数就不会生效而是使用子类自身的函数(就是ES5原型链查找的套路):

  class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
console.log("我是"+this.name);
}
}
class Student extends Person{
say(){
console.log("我是子类的say函数!")
}
fn(){
console.log("我是子类函数fn")
}
}
var stu = new Student("asaszt",23)
stu.say();//我是子类的say函数!
stu.fn();//我是子类函数fn

在子类中使用super

  子类会继承父类的constructor函数来初始化自身的属性,同样也可以添加自身特有的属性,但是必须使用super来完成这个操作:

  class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
}
class Student extends Person{
constructor(name,age,sex){
super(name,age);
this.sex = sex;
}
}
var stu = new Student("zt",23,"男")
console.log(stu.sex);//男

  在子类中使用constructor来初始化属性,首先使用super来对可继承的属性进行初始化,然后在通过this添加自身特有的属性,this只有在调用super()之后才会存在。

  super同样可以调用父类的非静态函数(此时我们可以把super看做是一个父类实例化出来的一个对象):

  class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
console.log("我是父类的say函数");
}
}
class Student extends Person{
constructor(name,age,sex){
super(name,age);
this.sex = sex;
}
say(){
super.say();
console.log("我是子类的say函数");
} }
var stu = new Student("zt",23)
stu.say();//我是父类的say函数 我是子类的say函数

Es6构造函数的变身,通常我们称为类的更多相关文章

  1. ES6构造函数class 和 ES5构造函数语法

    构造函数就是JavaScript程序定义好的函数,我们直接使用就可以,实际也是一种函数,构造函数专门用于生成定义对象,通过构造函数生成的对象,称为实例化对象 构造函数分为两种,一种是JavaScrip ...

  2. C++的派生类构造函数是否要带上基类构造函数

    //public:Student(int s_age):People(s_age) //C++的派生类构造函数后面是否带上基类构造函数,取决于基类构造函数是否需要传入参数,如果要参数,就一定带上:不需 ...

  3. ES6躬行记(21)——类的继承

    ES6的继承依然是基于原型的继承,但语法更为简洁清晰.通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父 ...

  4. ES6躬行记(20)——类

    ES6正式将类(Class)的概念在语法层面标准化,今后不必再用构造函数模拟类的行为.而ES6引入的类本质上只是个语法糖(即代码更为简洁.语义更为清晰),其大部分功能(例如继承.封装和复用等)均可在E ...

  5. 学习es6构造函数的第一天

    什么是面向对象 编程思维分为,面向过程和面向对象 面向过程就像一个人,一间屋子,一个床 一个人走进了屋子,上了床 二面向对象 人,屋子,床 可以是屋子里进了一个人,上了床 或者,屋子里的床上有一个人 ...

  6. ES系列四、ES6.3常用api之文档类api

    1.Index API: 创建并建立索引 PUT twitter/tweet/ { "user" : "kimchy", "post_date&quo ...

  7. js高级-面向对象继承

    一.工厂模式创建对象及优缺点 继承就是把公共的部分抽象出来作为父类,基类.吃饭,跑步等 var a = {}; //批量创建不方便,不能重复设置公共属性的代码 //工厂模式出现了,创建10个Cat对象 ...

  8. 【读书笔记】【深入理解ES6】#9-JavaScript中的类

    大多数面向对象的编程语言都支持类和类继承的特性,而JavaScript却不支持这些特性,只能通过其他方法定义并关联多个相似的对象.这个状态一直从ECMAScript 1持续到ECMAScript 5. ...

  9. ES6语法:class类,从了解到使用

    前期提要:  JavaScript 语言中,在使用类之前,生成实例对象的传统方法是通过使用构造函数. 一.构造函数: 定义:通过  new 函数名  来实例化对象的函数叫构造函数.   主要功能:为初 ...

随机推荐

  1. tp5 本地安装和调试的问题

    安装的时候用官方下载的包或者用composer指定版本号,不要用git,会安装最新的包. 本地配置域名的时候出错,要不就是500要不就是找不到文件,原因是目录路径里的反斜杆加字母t被转义了,改成正斜杠 ...

  2. PID算法控制简单理解

    1 传统的位式控制算法 用户期望值Sv(设定值)经控制算法输出一个输出信号OUT,输出信号加载到执行部件上(像MOS管等)对控制对象进行控制(步进电机.加热器等),控制对象的当前值(Pv)如速度通过传 ...

  3. 从输入URL到页面显示发生了什么

    阅读目录 1.输入地址 2.浏览器查找域名的 IP 地址 3.浏览器向 web 服务器发送一个 HTTP 请求 4.服务器的永久重定向响应 5.浏览器跟踪重定向地址 6.服务器处理请求 7.服务器返回 ...

  4. django基础 -- 2. django初识

    一.模块渲染  jinja2 实现简单的字符串替换(动态页面) 1.下载 pip install jinja2 示例 : html文件中 <!DOCTYPE html> <html ...

  5. LVM基本应用,扩展及缩减实现

    一.基本概念 如上图所示:底层PV(物理卷可能是硬盘设备,分区或RAID等),一个或多个PV组织成一个VG(卷组),卷组是不能直接格式化使用的,所以在VG之上,还需要创建LV进行格式化使用.VG在逻辑 ...

  6. SpringBoot 使用Sharding-JDBC进行分库分表及其分布式ID的生成

    为解决关系型数据库面对海量数据由于数据量过大而导致的性能问题时,将数据进行分片是行之有效的解决方案,而将集中于单一节点的数据拆分并分别存储到多个数据库或表,称为分库分表. 分库可以有效分散高并发量,分 ...

  7. 【Spring Security】四、自定义页面

    在前面例子中,登陆页面都是用的Spring Security自己提供的,这明显不符合实际开发场景,同时也没有退出和注销按钮,因此在每次测试的时候都要通过关闭浏览器来注销达到清除session的效果. ...

  8. CentOS7设置定时任务 每隔30分钟执行一次命令

    ref   https://blog.csdn.net/xiangxianghehe/article/details/78149094 一.安装 crontabs服务并设置开机自启: yum inst ...

  9. AT2442 フェーン現象 (Foehn Phenomena)

    题目地址 原题地址 题解 其实就是一个区间加,单点查询的问题 当然可以线段树/树状数组做,但是这两个做法要分类讨论所以代码会比较多 我们考虑一种更简便的做法 差分! 因为温度只和海拔差有关,这相当于题 ...

  10. (zhuan) Attention in Neural Networks and How to Use It

    Adam Kosiorek About Attention in Neural Networks and How to Use It this blog comes from: http://akos ...