JavaScript——ES6新增特性类

概述

  • 在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。

  • class 的本质是 function。

  • 它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。

  • 类不可重复声明

  • 类定义不会被提升,这意味着必须在访问前对类进行定义,否则就会报错

类定义

// 命名类
class Example {
    constructor(a) {
        this.a = a
    }
}

// 匿名类
let Example = class {
    constructor(a) {
        this.a = a
    }
}

类名最好首字母大写,容易让别人看懂

类的主体

  • 属性:ES6的类中不能直接定义变量,变量被定义在constructor中。

class People {      
    //a = 10
    //SyntaxError: Unexpected token =
    constructor() {
        this.a = 100 //定义变量
    }
} 
let p = new People()
console.log(p.a)
  • 方法

                constructor 方法是类的默认方法,创建类的对象时被调用。也被称为类的构造方法(构造函数、构造器)。一个类中有且仅有一个构造方法

class People {
	constructor() {
		console.log("我是构造方法,使用new创建对象时调用")
	}
} 
new People()
//将执行constructor方法

                 原型方法:不需要使用function关键字,通过“对象.原型方法”调用

class People {
	say(world) {
		console.log(`say ${world}`)
	}
    add(a, b) {
        console.log(a + b)
    }
}
let p = new People()
p.say("hello")//say hello
p.add(1, 2) //3

                静态方法:使用static修饰,调用时不需要创建对象,直接通过“类名.静态方法”调用

class People {
	static sum(a, b) {
		console.log(a + b)
	}
}
People.sum(1, 2)

类的继承

  • 解决代码的复用

  • 使用extends关键字实现继承

  • 子类可以继承父类中所有的方法和属性

  • 子类只能继承一个父类(单继承),一个父类可以有多个子类

  • 子类的构造方法中必须有super()来指定调用父类的构造方法,并且位于子类构造方法中的第一行

  • 子类中如果有与父类相同的方法和属性,将会优先使用子类的(覆盖)

class People {
    //父类构造方法
	constructor() {
        this.a = 100; //父类中定义的变量
		console.log("People constructor")
	}
    //原型方法
	eat() {
		console.log("eat...")
	}
    //静态方法
    static play() {
		console.log("play...")
	}
}
			
class Student extends People {
    //子类构造方法
	constructor() {
		super(); //调用父类构造器,必须存在,且位于子类构造器第一行的位置
        this.b = 200; //子类定义的变量
		console.log("Student constructor")
	}
	study() {
		console.log("study...")
	}
}
			
let stu = new Student()
console.log(stu.a, stu.b)
stu.eat()
stu.study()
Student.play()

 内部类:属于外部类的成员,必须通过“外部类.内部类”访问

// 外部类
class Outer {
	constructor() {
         console.log("outer")
    }
}
// 内部类
Outer.Inner = class {
    constructor() {
         console.log("Inner")
    }
}     
new Outer.Inner()

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值