[JavaScript知识库]ES6中的类的使用

ES6中的类和对象

对象：在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等

对象是由属性和方法组成的：

• 属性：事物的特征，在对象中用属性来表示(手机的颜色，存储)
• 方法：事物的行为，在对象中用方法来表示(手机可以干什么，比如打游戏)

类 class

在ES6中新增了类的概念，可以使用**class**关键字声明一个类，之后以这个类来实例化对象

• 类抽象了对象中的公共部分，它泛指某一大类(class)
• 对象特指的是某一个，通过类实例化一个具体的对象

如何在ES6中如何创建类(class)

//创建类
class Star{
    // 类里面必须要有constructor
    constructor(uname,age){
        this.uname=uname
        this.age=age
    }
}
//	使用new创建对象
let ldh=new Star('Pink',18)
let ldh=new Star('尤雨溪',20)
console.log(ldh)

• 通过class关键字创建类，类名我们还是习惯定义首字母大写
• 类里面有个constructor函数，这个函数可以接收传递过来的参数，同时返回实例对象
• constructor函数只要new生成实例，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数
• 生成实例的时候 new不要省略
• 最后注意语法规范，创建类名后面不要加小括号，生成实例，类名后面加小括号，构造函数不需要添加function

如何在类里面添加方法

语法：

// 定义
class Person{
    constructor(uname,age){
        this.uname=uname
        this.age=age
    }
    say(){
        console.log(this.name + '你好')
    }
}
// 实例化
let obj=Person('张三'，20)
obj.say()

注意：

• 类里面所有的函数不需要写function
• 多个函数方法之间不需要添加逗号分割

类的继承

• 现实中的继承：子承父也，比如我们都继承了父辈的姓
• 程序中的继承：子类可以继承父类的一些属性和方法

看一下下面详细的代码

//类的继承
//父类
class Fatcher{
    constructor(){}
    money(){
        console.log(100)
    }
}
// 子类,这个时候直接继承了父类方法
class Son extends Fatcher{}
const Son = new Son()
Son.money()

super关键字

super关键字可以干什么？？

答：super关键字可以调用父类的普通函数

class Father{
    say(){
       return console.log('我是爸爸')
    }
}
继承父亲
class Son extends Father{
   say(){
       console.log(spuer.say()+'的儿子')
       spuer.say() //就是调用父类中的普通函数 say()
    } 
}
var son =new Son()
son.say()

注意：

? 在继承中，如果实例化子类输出一个方法，先看子类有没有这个方法,如果有就先执行子类的方法，

在继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法(依据的是就近原则)

父类有加法的方法

代码如下：

class Father {
    constructor(x,y){
        this.x=x
        this.y=y
    }
    sum(){
        console.log(this.x,this.y)
    }
}
//子类继承父类的方法，同时扩展减法的方法
class Son extends Father {
    constructor(x,y){
        // 利用 spuer 调用父类的加法操作
         // super必须在子类this之前调用
        super(x,y)
        this.x=x
        this.y=y
        //per放到这里就会报错
      //super(x,y)
    }
    subtract(){
        console.log(this.x-thix.y)
    }
}
var son =Son(10,3)

ES6类和对象中的三个注意点

//var ldh=new Star('刘德华')
//ldh.sing()
//这个时候会报错，因为ES6中的类没有变量的提升，所以必须先定义类，才能通过实例化对象
class Star{
    constructor(uname,age){
        this.uname=uname
        this.age=age
    }
    sing(){
        console.log('hi~~~')
    }
}
var ldh=new Star('刘德华')

• 在ES6中类没有变量的提升，所以必须先定义类，才能通过实例化对象

//var ldh=new Star('刘德华')
//ldh.sing()
//这个时候会报错，因为ES6中的类没有变量的提升，所以必须先定义类，才能通过实例化对象
class Star{
    constructor(uname,age){
        this.uname=uname
        this.age=age
//注意:在这里调用的时候一定不要忘记加this,否则会报错
        this.sing()
        
    }
    sing(){
        //这样写会报错，因为它不知道是哪里的name,所以这个时候我们添加一个this
        //console.log(name)
        console.log(this.name)
    }
}
//我想在开始直接调用sing方法直接在constructor中调用
var ldh=new Star('刘德华')

• 类里面的共用的属性和方法一定要加this

<button>点击</button>
<script>
//var ldh=new Star('刘德华')
//ldh.sing()
//这个时候会报错，因为ES6中的类没有变量的提升，所以必须先定义类，才能通过实例化对象
class Star{
    constructor(uname,age){
        this.uname=uname
        this.age=age
//注意:在这里调用的时候一定不要忘记加this,否则会报错
        this.sing()
        
    }
    sing(){
        //这样写会报错，因为它不知道是哪里的name,所以这个时候我们添加一个this
        //console.log(name)
        console.log(this.name)
    }
}
//我想在开始直接调用sing方法直接在constructor中调用
var ldh=new Star('刘德华')
</script>