es6的class有什么用
这篇文章主要介绍了es6的class有什么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇es6的class有什么用文章都会有所收获，下面我们一起来看看吧。
专注于为中小企业提供成都网站制作、做网站、外贸营销网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业海勃湾免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
es6的class关键字用于快速地定义“类”；class的本质是function，它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。提升class不存在变量提升，类的所有方法都定义在类的prototype属性上面，在类的实例上面调用方法，其实就是调用原型上的方法。
基础
es6引入了Class（类）这个概念，class关键字用于快速地定义“类”。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。
实际上背后依然使用的 原型和构造函数的概念。
严格模式 不需要使用use strict因为只要代码写在类和模块内，就只能使用严格模式。
提升class不存在变量提升 (由于继承有关 必须确保子类在父类之后定义)。
类的所有方法都定义在类的prototype属性上面，在类的实例上面调用方法，其实就是调用原型上的方法 原型方法可以通过实例对象调用，但不能通过类名调用，会报错
实际上 class只是一个语法糖 是构造函数的另一种写法
(语法糖 是一种为避免编码出错 和提高效率编码而生的语法层面的优雅解决方案 简单说 一种便携写法 而已)
看代码
class Person{
}
console.log(typeof Person) //funciton
console.log(Person.prototype.constructor === Person) //true
使用看代码
用法和使用 构造函数一样 通过new 来生成对象实例
class person2 {
}
let json = new person2;
属性和方法
定义在constructor 内的属性和方法 即调用在this上 属于实例属性和方法 否则属于原型属性和方法
class Person {
constructor (name) {
this.name = name //constructor内定义的方法和属性是实例对象自己的，
}
say () { //而constructor外定义的方法和属性则是所有实例对象可以共享的 注意!
console.log('hello')
}
}
let jon = new Person()
jon.hasOwnPrototype('name') //true
jon.hasOwnPrototype('say') //false
静态方法
不需要通过实例对象，可以直接通过类来调用的方法，其中的 this 指向类本身
class Person {
static doSay () {
this.say()
}
static say () {
console.log('hello')
}
}
Person.doSay() //hello
***********************************************************************************************
//静态方法可以被子类继承
class Sub extends Person {
}
Sub.doSay() // hello
//静态方法可以通过类名调用，不能通过实例对象调用，否则会报错
class Person {
static sum(a, b) {
console.log(a + b)
}
}
var p = new Person()
Person.sum(1, 2) // 3
p.sum(1,2) // TypeError p.sum is not a function
name属性
name 属性返回了类的名字 即紧跟在class后面的名字。
class Person {
}
Person.name // Person
this 默认指向类的实例。
类的方法内部如果含有this 坑儿 一但单独使用该方法 很可能就会报错
如果 this指向不对 1使用箭头函数 2在构造方法中绑定this
取值函数（getter）和存值函数（setter）
class Person {
get name () {
return 'getter'
}
set name(val) {
console.log('setter' + val)
}
}
let jon = new Person()
jon.name = 'jon' // setter jon
jon.name // getter
//类声明不可以重复
class Person {}
class Person {}
// TypeError Identifier 'Person' has already been declared
constructor关键字
constructor 方法
constructor 方法是类的默认方法，通过 new 命令生成对象实例时，自动调用该方法（默认返回实例对象 this）。
一个类必须有 constructor 方法，如果没有显式定义，一个空的 constructor 方法会被默认添加。
一个类只能拥有一个名为 “constructor” 的特殊方法，如果类包含多个 constructor 的方法，则将抛出 一个 SyntaxError 。
class Person {
constructor(x, y) {
this.x = x //默认返回实例对象 this
this.y = y
}
toString() {
console.log(this.x + ', ' + this.y)
}
}
constructor 啥子?
每一个类必须要由一个constructor 如果没有显示声明 js引擎会自动添加一个空的构造函数
class person3 {
}
//等于
class person3 {
constructor(){}
}
注意 在类中声明方法的时候，方法前不加 function 关键字 方法之间不要用逗号分隔，否则会报错 类的内部所有定义的方法，都是不可枚举的（non-enumerable）
注意 与es5一样 实例的属性除非 显示定义在其本身(即this对象)上 否则都是定义在原型上面
class Point {
constructor(x,y){
this.x = x;
this.y = y;
}
toString(){
return `this.x + this.y`;
}
}
var point = new Point();
point.toString() //(2,3)
point.hasOwnProperty("x") //true
point.hasOwnProperty("y") //true 在这x&&y都是实例对象point自身的属性(因为定义在this变量上) // 所以返回true
point.hasOwnProperty("toString") //false toString是原型对象的属性 (因为定义在Point类上) //所以返回false
point._proto_.hasOwnProperty("toString") //true
//加两个实例
var p1 = new Point();
var p2 = new Point();
p1._proto_ === p2._proto_ //true 这个不建议使用
//上面代码中 p1和p2 都是point的实例 他们的原型都是Point.prototype 所以 _proto_属性是相等的
//即是说 可以通过实例的_proto_ 属性为 "类" 添加方法
super关键字
super关键字用于访问和调用 父类上的函数，可以调用父类的构造函数 也可以调用父类的普通函数
class Father {
constructor (surname){
this.surname = surname
}
say(){
console.log("你的名字" + this.surname) //你的名字锤子
}
}
//在这里 子继承父类
class Son extends Father {
constructor(surname,name){
super(surname)
this.name = name
}
say(){
super.say()
console.log('调用普通' + this.name) //调用普通铁的
}
}
var son = new Son('锤子',"铁的")
son.say()
console.log(son) //打印 {surname: "锤子", name: "铁的"
//在子类的构造函数如果使用 super 调用父类的构造函数 必须写在 this之前
//还可以 调用父类的普通方法
//在es6中 类没变量提升 必须先定义 才能通过实例化对象类里面的 共有属性 和方法 通过this 调用
//类 里面的this 代表什么
//constructor 里面this指向实例对象
// 方法里面this 代表 方法的 调用者
extends继承
继承即子承父业现实中 程序中子类可以继承父类中的一些 方法和属性
继承时面向对象的 一大特性 可以减少代码的编写 方便公共内容的抽取 关键字extends
class Father {
constructor (surname){
this.surname = surname
}
say(){ //父级Father里面有一个方法 say()
console.log("你的名字" + this.surname)
}
}
class Son extends Father { //在这里Son 继承了 Father父级里面的方法 关键字extends
}
var son = new Son('锤子') //new 出来实例
son.say() //打印 你的名字锤子
类的方法
class Person {
constructor(name, age) {
// 构造函数，接收一个name和age
this.name = name
this.age = age
}
say(){
// 一个方法 //注意类里面的方法不加function关键字 方法与方法之间不用,号隔开
console.log("你好",this.name)
}
// ....sayWhat(){} saySome(){}
}
var person = new Person('老王',44)
//调用方法
person.say() //老王
//在类的实例上调用方法 其实就是调用 原型上的方法
类的表达式
与函数一样 calss 也可以使用表达式的形式定义 采用class表达式 可以写出立即执行的Class!!
注意与函数表达式类似 类表达式在他们被求值前也不能使用(即赋值变量 之前调用) 但 与函数定义不同 虽然函数声明可以提升 但类不能
类表达式（类定义）
类表达式可以是被命名的或匿名的
匿名类
let Person = class {
constructor(x, y) {
this.x = x
this.y = y
}
}
命名的类
let Person = class Person {
constructor(x, y) {
this.x = x
this.y = y
}
}
const Mycalss = class Me {
getClassName(){
return Me.name;
}
}; //这里用 表达式(即赋值变量一个)
//注意! 这个类的名字是Mycalss而不是 Me Me只在Class的内部代码可用 指代当前类
let inst = new Mycalss();
inst.getClassName() //Me
Me.name //报错 Me只在Class内部有定义
采用class表达式 可以写出立即执行的Class!!
let person = new class {
constructor(name) {
this.name = this.name;
}
sayname(){
console.log(this.name);
}
}("常东东") //这段代码中class是立即执行的实例
补充案例
class Animal { //class定义了一个“类”
constructor(){
this.type = 'animal' //有一个constructor方法，这就是构造方法 //this关键字则代表实例对象
} //constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的 注意!
says(say){
console.log(this.type + ' says ' + say)
}
}
let animal = new Animal()
animal.says('hello') //animal says hello
class Cat extends Animal { //通过extends关键字实现继承 //定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。
constructor(){
super() //super关键字 它指代父类的实例（即父类的this对象）子类必须在constructor方法中调用super方法，否则新建实例时会报错。
this.type = 'cat' //这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
}
}
let cat = new Cat()
cat.says('hello') //cat says hello
关于“es6的class有什么用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“es6的class有什么用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。
网站题目：es6的class有什么用
网页URL：http://scyanting.com/article/jdjged.html
