ES6（七）Class 的基本语法

前言

      ES6 引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以
定义类，使得函数书写更贴近面向对象编程的语法。
      通俗来说，Class的引入很大原因是要使语法贴近面向对象编程的语法，新的class写法
只是让对象原型的写法更加清晰。今天

Class

用法

class people {
    constructor (name, sex) {
        this.name = name;
        this.sex = sex;
    }
}

       在上面的代码中，class是声明一个类的关键字，其类名为 people ，大括号内添加的可以是构造函数方法 constructor () { } ( 相当于function () { } )，toString()、toValue()等

类的数据类型是函数，其本身就指向于构造函数，使用时用new命令调用，与构造函数用法一致

class的方法均定义在prototype上

class people {
    constructor (name, sex) {
        this.name = name;
        this.sex = sex;
    }
}

// 等同于

people.prototype = {
  constructor(name, sex) {
        this.name = name;
        this.sex = sex;
}
};

验证：在类的实例上面调用方法，其实就是调用原型上的方法。

class A {}
const a = new A();

a.constructor === A.prototype.constructor // true

 

注意！！由于类的方法都定义在prototype对象上面，所以，类的新方法可以添加在prototype对象上面。Object.assign()方法可以很方便地一次向类添加多个方法。

class className {
  constructor(){
    // ...
  }
}

Object.assign(className.prototype, {
  toString( ){  },
  toValue( ) {  }
});
console.log(className.prototype);

 

方法之间无需逗号

class Point {
  constructor() {
    // ...
  },

  toString() {
    // ...
  },

  toValue() {
    // ...
  }
}        //方法之间加”逗号“会报错

结果验证

 

class内的定义无需“function”关键字

       可参照全文实例，所有函数与方法均无添加function关键字

相同类的所有实例共享一个原型对象。

//定义类
class people {
    constructor (name, sex) {
        this.name = name;
        this.sex = sex;
    }
}
//实例化这个类 即利用类创建对象 new
var hero = new people('凤求凰','男');
var hero1 = new people('千年之狐','男');
console.log(hero.__proto__ === hero1.__proto__);

上面代码中，两个对象都是people的实例，它们的原型都是people.prototype，所以__proto__属性是相等的。

结果验证

 

类不存在变量提升，必须先定义再使用

错误示范

var peo = new people ();

console.log(peo);

class people {
    constructor (name, sex) {
        this.name = name;
        this.sex = sex;
    }
};

结果验证

 

class表达式

const cn = class className {
  getClassName() {
    return className.name;
  }
};

上面代码说明，类也能像函数一样使用表达式的形式定义

该类名为“className” 只能在内部引用；在外部，这个类只能用“cn”来引用

举例

let inst = new cn();
inst.getClassName() // className
className.name // ReferenceError: className is not defined

常用方法

constructor方法

（1）类的默认方法，new命令实例化时，会自动调用。

该方法默认返回this实例对象（可以自定义设置指定另一个对象）

注意‼️
1、如果没有定义constructor，会默认添加一个空的constructor()方法。

2、区别于普通函数function()，实例化书写完成的类时，
要记得使用new关键字作为前缀，否则无法调用（普通函数可以执行）

相同类的所有实例对象共享一个原型对象，可以在此基础上为class添加方法（不推荐使用）

静态方法

class类相当于函数，我们在调用类声明一个实例的时候，实例会继承该函数里面所有的方法，
这时候，如果在某个方法前加上static关键字，该方法就不会被继承，而是要通过内部的类名来调用，这就是静态方法

通俗理解就是加上static关键字后，这个方法就“睡着了”，叫它干活要class 后的类名（亲生爸爸）叫它起床

举例

class peo {
  static Method() {
    return '李白';
  }
}

peo.Method() // '李白'

var Peo = new peo();
Peo.Method()
// TypeError: Peo.Method is not a function

结果验证

 

实例属性新写法

实例属性除了写在constructor()的this上，还可以定义在类的最顶层。

优点：简洁明了 整齐 还不用➕this指向

举例

class people {
    constructor () {
        this.num = 1；
        this.num2 = 2;
    }
}

等同于
 

class people {
     num = 1;
     num2 = 2;
}

结束语

希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！ 小糖谢谢各位啦~❤  ❤  ❤  ❤