类
- 在ES6之前通过构造函数+原型实现面向对象编程
- ES6 通过 类 实现面向对象编程
- 创建类
- 类constructor构造函数
- 使用类要注意一下几点
- 类添加方法
- 类的继承
- super关键字
- 子类想向父类里面传递参数可以使用super关键字
- super调用父类的普通函数
- 继承中属性或者方法的查找原则(就近原则)
- 类的三个注意点
在ES6之前通过构造函数+原型实现面向对象编程
构造函数主要有以下四点
1.构造函数有原型对象prototype
2.构造函数原型对象prototype 里面有 constructor 指向构造函数本身
3.构造函数可以通过原型对象添加方法
4.构造函数创建的实例对象有__proto__原型指向 构造函数的原型对象
ES6 通过 类 实现面向对象编程
class Star { }
console.log(typeof Star); // function
// 说明类的本质其实还是一个函数,我们也可以简单的认为 类就是 构造函数的另外一种写法
console.log(Star.prototype) // 1.类有原型对象
console.log(Star.prototype.constructor) //2.类原型对象prototype 里面有constructor 指向 类本身
Star.prototype.sing = function() {
console.log(‘冰雨’)
}
var ldh = new Star()
console.dir(ldh) // 3.类可以通过原型对象添加方法
console.log(ldh.__proto__=== Star.prototype) // true // 4.类创建的实例对象有__proto__原型 指向类的原型对象
所以es6的类,它的绝大部分功能,es5都能实现,class写法只是让对象原型的写法更加清晰,更像面向对象编程的语法而已
类其实就是语法糖
语法糖:语法糖就是一种便捷写法,简单理解,有两种方法可以实现同样的功能,但是一种写法更加清晰,方便,那么这个方法就是语法糖
创建类
语法:
class 类名 {
}
创建实例:
var xx = new 类名()
注意:类必须使用 new 实例化对象
类constructor构造函数
constructor()方法是类的构造函数(默认方法),用于传递参数,返回实例对象(我们就可以不用return了),通过new命令生成对象实例时,自动调用该方法,如果没有显示定义,类内部会自动给我们创建一个constructor()
// 1.先创建一个类
class Star {
constructor(uname) {
this.uname = uname
}
}
// 2.利用类创建对象 new
var ldh = new Star(‘刘德华’)
console.log(ldh.uname) // 刘德华
使用类要注意一下几点
1.通过class关键字创建类,类名我们还是习惯性定义首字母大写
2.类里面有个constructor函数,可以接受传递过来参数,同时返回实例对象
3.constructor函数 只要 new 生成实例时,就会自动调用这个函数,如果我们不写这个函数,类也会自动生成这个函数
4.生成实例 new 不能省略
5.最后注意语法规范,创建类 类名后面不加小括号,生成实例 类名后面加小括号,构造函数不需要加function
类添加方法
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
say () { // 添加say 方法,不需要写function,多个函数之间不需要添加逗号分割
console.log(this.name + ‘你好’);
}
}
ldh.say()
类的继承
// 使用extends关键字可以继承父类
class Father {
constructor() { }
money() {
console.log(100);
}
}
class Son extends Father { // 子类继承父类
}
var son = new Son();
son.money(); // 100
super关键字
子类想向父类里面传递参数可以使用super关键字
// super 关键字用于访问和调用对象父类上的函数,可以调用父类的构造函数和普通函数
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) {
// this.x = x; this y= y // 报错,这里的this指向的是son的constructor的实例,父类里面没有得到,这两个值,
super(x,y) // 调用了父类中的构造函数
}
}
var son = new Son(1, 2);
son.sum(); // 3
// 使用super还得注意
// super必须在子类this之前调用
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) {
super(x,y) // 调用了父类中的构造函数,必须在子类this之前调用
this.x=x
this.y=y
}
subttract() { // 定义子类独有的属性
console.log(this.x - this.y)
}
var son = new Son(5, 2);
son.subtract() // 3
son.sum(); // 7
super调用父类的普通函数
class Father {
say() {
return '我是爸爸'
}
class Son extends Father {
say () {
reurn super.say() + '的儿子' // super 调用父类的方法
}
}
var demo = new Son()
console.log(demo.say()) // 我是爸爸的儿子
继承中属性或者方法的查找原则(就近原则)
继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法
类的三个注意点
1.在ES6中没有变量提升,所以必须先定义类,才能通过类实例化对象
2.类里面的共有的属性和方法一定要加this使用
3.this的指向问题
- constructor 里面的this 指向的是 实例对象
- 方法里面的this 指向的是这个方法的调用者