一、简介
classt通过extends关键字实现继承,es5通过修改原型链实现继承
1、es5通过修改原型链实现继承
// 定义一个Animal 构造函数,作为Dog的父类
function Animal (){
this.superType = "Animal";
}
Animal.prototype.superSpeak = function(){
alert (this.superType)
}
function Dog (name){
this.name = name;
this.type = "Dog"
}
//原本Dog的prototype指向Doc的原型对象->构造函数->原型对象
//现在改变Dog的prototype指针,指向一个 Animal 实例
Dog.prototype = new Animal(); // 通过原型链的方式,实现 Dog 继承 Animal 的所有属性和方法
Dog.prototype.speak = function () {
alert(this.type);
}
var doggie = new Dog('jiwawa');
doggie.superSpeak(); //Animal
总结:就是当重写了Dog.prototype指向的原型对象后,实例的内部指针也发生了改变,指向了新的原型对象,然后就能实现类与类之间的继承了。(但是如果在重写原型对象之前,产生的实例,其内部指针指向的还是最初的原型对象
2、es6通过extends继承
class Point {}
class colorPoint extends Point{
//super表示父类的构造函数,用来新建父类的this对象
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y),
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
super 关键字
super:既可以当作函数处理,也可以当作对象使用
1:作为函数调用时,代表父类的构造函数,只能用在子类的构造函数之中,super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B,因此super()在这里相当于A.prototype.constructor.call(this)
2、super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类
构造函数和普通函数有什么区别
1:构造函数都应该以一个大写字母开头,非构造函数则应该以一个小写字母开头
2:调用方式:任何函数,只要通过new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数
3:调用过程
//创建函数
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
alert(this.name);
}
}
//当作构造函数使用
var person=new Person1('Nicholas',29,'software Engineer');//this-->person
person.sayName();//'Nicholas'
//当作普通函数使用
Person1('Nicholas',27,'Doctor');//this-->window
window.sayName();//'Nicholas'
class 和普通构造函数区别
1:Class在语法上更加贴合面向对象的写法
2:Class在实现继承上更加易读、易理解
3:本质上还是语法糖,使用prototype