以前我们使用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. Java多线程编程作业总结

    一.多线程知识总结 1.线程同步 有关创建线程的知识就不过多的叙述了.就从主要的开始讲吧,讲一下线程的同步.与操作系统中的进程同步一样,线程同样面临着资源共享的问题,怎样处理线程的资源共享是运用多线程 ...

  2. Jenkins中的邮件配置

    摘自http://blog.csdn.net/fullbug/article/details/53024562 Jenkins是一个很受欢迎的CI持续集成工具,能够实现项目的自动构建.打包.测试.发布 ...

  3. topcoder srm 525 div1

    problem1 link 最后剩下的是中间的一个矩形.所以可以直接枚举这个矩形,如果它含有的硬币个数等于$K$,则再计算移动的最少次数,更新答案. problem2 link 首先,每个节点发送每种 ...

  4. C# lock 关键字的一些理解

    C# lock 关键字的一些理解 问题1:谁是锁? lock 这个关键字,并不是“锁”,真正的“锁”是那个被lock的Object类型的“对象”,请注意,这里为“对象”加了双引号着重强调被lock的是 ...

  5. PKM(个人知识管理)类软件收集(偶尔更新列表)

    evernote(印象笔记) Wiz 有道云 麦库 leanote GoogleKeep OneNote SimpleNote(wp家的,免费) pocket(稍后读的软件,同类的还有Instapap ...

  6. P1948 [USACO08JAN]电话线Telephone Lines(二分答案+最短路)

    思路 考虑题目要求求出最小的第k+1大的边权,想到二分答案 然后二分第k+1大的边权wx 把所有边权<=wx的边权变为0,边权>wx的边权变为0,找出最短路之后,如果dis[T]<= ...

  7. 日系插画学习笔记(一):SAI软件基础

    检测驱动是否安装正确:1.画笔没有压感,线条没有粗细变化2.画笔线条有锯齿 一.文件:新建文件:预设尺寸:一般选择A3(8k),A4(16k),A5(32k)作业要求:A4A5 - 300dpi,像素 ...

  8. 案例:8,64,256都是2的阶次方数(8是2的3次方),用Java编写程序来判断一个整数是不是2的阶次方数。

     如果一个数是2的阶次方数,则它的二进制数的首位一般是1,后面全为0.比如8:1000,64:1000000,如果将这个数减1后再作与&运算,则应该全为0,(x&(x-1)==0&am ...

  9. AngularJS 笔记1

    2017-03-23 本文更新链接: http://www.cnblogs.com/daysme/p/6606805.html 什么是 angularjs 2009年有两个外国人创建,后由谷歌收购并开 ...

  10. git core.autocrlf配置 解决Windows和Linux(Mac)换行问题

    格式化 格式化是许多开发人员在协作时,特别是在跨平台情况下,遇到的令人头疼的细小问题. 由于编辑器的不同或者Windows程序员在跨平台项目中的文件行尾加入了回车换行符, 一些细微的空格变化会不经意地 ...