原型链:当访问一个对象的属性时,如果该对象内部不存在这个属性,就会去该对象的__proto__ 上(也就是它构造函数的prototype)查找 。该构造函数的prototype上也有一个自己的__proto__ 属性,然后继续向上查找, 直到__proto__为null,就停止查找。
let date = new Date()
console.log(date.__proto__ === Date.prototype); //true
console.log(date.__proto__.constructor === Date); //true
console.log(date.__proto__.__proto__ === Date.prototype.__proto__); //true
console.log(Date.prototype.__proto__.constructor === Object); //true
console.log(Date.prototype.__proto__ === Object.prototype); //true
console.log(Object.prototype.__proto__ === null); //true
封装:将公用的方法或者组件进行封装,达到代码复用,让我们的代码更简洁
继承:子类继承父类中的实例和方法
多态:不同对象作用于同一操作产生不同的效果
1.原型链继承
特点:继承父类原型上的属性和方法。
缺点:创建子类实例时,不能向父类构造函数中传参数,无法实现多继承
//父类
function Person(name) {
this.name = name;
this.sleep = function(){
console.log(this.name + '正在睡觉')
}
}
Person.prototype.change = "123木头人"
Person.prototype.sayHi = function () {
console.log("您好啊!");
};
//子类
function Child(age) {
this.age = age
}
Child.prototype = new Person()
Child.prototype.constructor = Child
let child = new Child(10)
console.dir(child)
2.构造函数继承
特点:解决了子类构造函数向父类构造函数中传递参数,可以实现多继承(call或者apply多个父类)
缺点:方法都在构造函数中定义,无法复用,不能继承原型上的属性和方法
//父类
function Person(name) {
this.name = name;
this.sleep = function(){
console.log(this.name + '正在睡觉')
}
}
Person.prototype.change = "123木头人"
Person.prototype.sayHi = function () {
console.log("您好啊!");
};
//子类
function Child(name,age) {
Person.call(this, name)
// Person.apply(this, [name]) //=> apply后面的参数是个数组.
this.age = age;
}
let child = new Child("校长",10)
console.dir(child)
3.组合继承
特点:把1和2的方法相结合,函数可以复用,可以继承属性和方法,并且可以继承原型的属性和方法
缺点:会挂载两次父类的属性和方法(有两个name和sleep),产生小bug,
//父类
function Person(name) {
this.name = name;
this.sleep = function(){
console.log(this.name + '正在睡觉')
}
}
Person.prototype.change = "123木头人"
Person.prototype.sayHi = function () {
console.log("您好啊!");
};
//子类
function Child(name,age) {
Person.call(this, name)
// Person.apply(this, [name]) //=> apply后面的参数是个数组.
this.age = age;
}
Child.prototype = new Person()
Child.prototype.constructor = Child
let child = new Child("校长",10)
console.dir(child)
4.寄生组合继承
特点:通过寄生的方式来修复组合式继承的不足,完美的实现继承。
Object.create()方法创建一个空对象,让属性和方法继承到对象的__proto__上
//父类
function Person(name) {
this.name = name;
this.sleep = function(){
console.log(this.name + '正在睡觉')
}
}
Person.prototype.change = "123木头人"
Person.prototype.sayHi = function () {
console.log("您好啊!");
};
//子类
function Child(name,age) {
Person.call(this, name)
// Person.apply(this, [name]) //=> apply后面的参数是个数组.
this.age = age;
}
Child.prototype = Object.create(Person.prototype)
Child.prototype.constructor = Child
let child = new Child("校长",10)
console.dir(child)
5.ES6 class extend继承
//class 相当于es5中构造函数
//class中定义方法时,前后不能加function,全部定义在class的protopyte属性中
//class中定义的所有方法是不可枚举的
//class中只能定义方法,不能定义对象,变量等
//class和方法内默认都是严格模式
//es5中constructor为隐式属性
class People {
constructor(name, age) {
this.name = name;
this.age = age;
}
sleep() {
console.log(`${this.name} ${this.age} 正在睡觉`)
}
}
//继承父类
class Child extends People {
constructor(name, age) {
//继承父类属性
super(name, age);
}
sleep() {
console.log(this);
//继承父类方法
super.sleep()
}
}
let child = new Child('小红',18);
console.log(child);
child.sleep(); //小红 18 正在睡觉
总结:ES5继承和ES6继承的区别
ES5的继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上(Parent.call(this)).
ES6的继承有所不同,实质上是先创建父类的实例对象this,然后再用子类的构造函数修改this。因为子类没有自己的this对象,所以必须先调用父类的super()方法,否则新建实例报错。