ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板,通过关键字class,可以定义类,基本上,ES6的class可以看成只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰, 更像买你想对象编程的语法而已
知识点:
(1)class声明类
(2)constructor定义构造函数初始化
(3)extends继承父类
(4)super调用腹肌构造方法
(5)static定义静态方法和属性
(6)父类方法可以重写
案例1:es5构造函数创建对象
// ES5构造函数实例化对象
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
//添加方法
Person.prototype.sayName = function () {
console.log(this.name);
};
//实例化对象
let p = new Person("张三", 18, "male");
console.log(p.sayName());
案例2:es6 class创建对象
// ES6 class 创建对象
class Person {
//构造函数 名字不能和修改
constructor(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
//添加方法
//方法必须使用该语法 不能使用es5的对象完整形式
sayHi() {
console.log(`我是${this.name},你好啊`);
}
}
let p = new Person("lisi", 18, "female");
console.log(p.sayHi());
静态成员
//静态成员
function Person() {}
Person.name = "wangmei";
Person.sayHi = function () {
console.log("Hi");
};
let p = new Person();
console.log(p.name); //undefined 也就是说实例身上是没有构造函数对象身上的属性的
console.log(p.sayHi()); //Uncaught TypeError: p.sayHi is not a function 说明实例身上没有构造函数对象身上的方法的 实例和构造函数身上的属性是不相通的
构造函数身上的属性是属于函数对象的,实例对象不能访问,对于这样的属性,我们称之为静态成员,对于class而言,被static
标记的成员是属于class的,而不是实例对象的,如下所示:
class Person {
//静态属性
static name = "static";
static sayHi() {
console.log("Hi");
}
}
let p = new Person();
console.log(p.name);//undefined
console.log(p.sayHi);//undefined
案例3:es5 实现继承
function Person(name, age) {
this.name = name;
this.age = age;
}
//添加方法
Person.prototype.sayHi = function () {
console.log("Hi");
};
// 子类
function Student(name, age, grade, score) {
//通过call 让Perosn的this指向Student的实例对象 继承父类的name age属性
Person.call(this, name, age);
this.grade = grade;
this.score = score;
}
//设置子级构造函数的原型
Student.prototype = new Person();
// 将子类的构造器还原
Student.prototype.constructor = Student;
//生命子类的方法
Student.prototype.study = function () {
console.log("I love study");
};
//实例化子类对象
let s = new Student("danny", 2, 1, 100);
console.log(s);
案例4:es6 类继承
class Person {
//构造方法
constructor(name, age) {
this.name = name;
this.age = age;
}
//父类的方法
sayHi() {
console.log(`Hi,我是${this.name}`);
}
}
// 子类继承自父类
class Student extends Person {
constructor(name, age, grade, score) {
super(name, age);
this.score = score;
this.grade = grade;
//子类的方法
}
study() {
console.log("I love Studying");
}
eat() {
console.log("I love eating");
}
}
//实例化子类对象
let s = new Student("lili", 12, 3, 100);
console.log(s.name); //lili
从这两个案例可以看出,es6的类继承更简单,更切合面向对象编程,需要注意的是,如果子类中的方法父类中也定义了,那我们是无法直接调用父类的同名方法的,相当于重写了父类的方法
案例5:es6中的get和set
//class中的get和set
class Person {
get name() {
console.log("name属性被读取了");
return "11";
}
set name(newVal) {
console.log("name属性被修改了");
}
}
let s = new Person();
console.log(s.name);
s.name = "你好";
网友评论