ES6 class类

简要概述一下类:

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

  • class 的本质是 function。

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

  • 类不可重复声明

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

 

js是一个基于面向对象设计的单线程的静态脚本语言.

也仅仅是基于面向对象的语言,他不是java语言

js的核心思想还是原型 js中的类也只是实现了java语言class类的功能,本质上还有有区别

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

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

class有两种定义方式分别是匿名式和命名式 

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

使用class关键字构建一个类

类里面有一个constructor()函数也称之为构造函数 一个类里面有且只有一个构造函数

class里面不能够直接在class里面定义变量 定义变量必须在constructor()函数里面  

他是默认的class类里面的默认函数,在使用类去创建对象的时候 构造函数会默认运行并且把结果返回到创建的对象里面 ,也就是new class类名的时候 构造函数可以不写默认为空

原型方法:不需要使用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);//因为super()调用了父类的构造函数,所以才有a 有b
		stu.eat();//继承父类的原型方法
		stu.study();//子类自己的原型方法
		Student.play();//继承父类的静态方法而且因为是静态方法不用创建对象 直接使用类名去调用就可以

 

 

你可能感兴趣的:(es6,前端,ecmascript,javascript)