ES5的5种继承关系
首先了解一下原型和原型链
- 每一个构造函数都有一个prototype属性,指向了它的原型
- 每一个实例有一个
__proto__属性,这个属性指向了它的原型,原型上还有__proto__,指向了它父类的原型,一直到Object.prototype为止,所有Object的原型,是一个对象的终极原型 - 访问实例的一个属性,会先从实例内部查找,若没有,就到它的原型去查找,还没有,就继续向父一级原型查找,一直查找到
Object.prototype位置,若有,就返回,没有在返回undefined
1、原型继承
function Father() {
this.names = ['tom', 'kevin'];
}
Father.prototype.getName = function () {
console.log(this.names);
}
function Child() {
}
Child.prototype = new Father();
var child1 = new Child();
child1.names.push('boaz'); // ['tom', 'kevin'，'boaz']
child1.getName();
var child2 = new Child();
child2.getName(); // ['tom', 'kevin'，'boaz']
原型继承的缺点：
- 父类的引用类型属性会被所有子类实例共享，任何一个子类实例修改了父类的引用类型属性，其他子类实例都会受到影响
- 创建子类实例的时候，不能向父类传参
2、借用构造函数继承
function Father(name) {
this.name = name;
this.say = function () {
console.log('hello');
}
}
function Child(name) {
this.name = name;
Father.call(this,name);
}
var p1 = new Child('Tom');
console.log('p1', p1);
p1.say();
var p2 = new Child('Kevin');
console.log('p2', p2);
p2.say();
优点：
- 避免了引用类型属性被所有实例共享
- 可以向父类传参
缺点：
- 方法必须定义在构造函数中
- 每创建一个实例都会创建一遍方法
3、组合继承（原型继承和借用构造函数继承的组合）
function Father(name, age) {
this.name = name;
this.age = age;
console.log(this);
}
Father.prototype.say = function() {
console.log('hello');
}
function Child(name,age) {
Father.call(this,name,age);
}
Child.prototype = new Father();
var child = new Child('Tom', 22);
console.log(child);
常用的继承方式唯一的缺点是，父类的构造函数会被调用两次
4、寄生式继承
function createObj(o) {
var clone = object.create(o);
clone.sayName = function () {
console.log('hello');
}
return clone;
}
var father = {
name: '人',
nation: '中国'
}
var son = createObj(father);
// son继承了father,拥有father的属性,同时还拥有sayName的方法
console.log(son);
就是创建一个封装的函数来增强原有对象的属性，跟借用构造函数一样，每个实例都会创建一遍方法
5、寄生组合式继承
// 原型+借用构造函数+寄生
function Person() {
console.log(22);
this.class = '人类';
}
// 原型继承模式
Person.prototype.say = function() {
console.log(this.name);
}
/**
* 寄生 Man.prototype.__proto__ === Person.prototype;
* Man的父亲的父亲 === Person的父亲
*/
Man.prototype = Object.create(Person.prototype);
Man.prototype.constructor = Man;
function Man(name, age) {
this.name = name;
this.age = age;
// 借用构造函数模式
Person.call(this);
}
var man = new Man('张三丰', 100);
console.log(man);
这是es5最好的继承方式，集合了所有继承方式的优点于一身。
- 原型继承可以访问父类原型上定义的方法
- 寄生继承,父类构造器不需要被调用两次
- 借用构造函数,可以把父类构造器中的属性放入子类的实例
ES6的继承方式
class Father{
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}
class Child extends Father{
constructor(name, age) {
super(name);
this.age = age;
}
}
var child = new Child('Tom',22);
child.sayName();
总结: 三种简单的继承方式
1.总结: 三种简单的继承方式
2.借用构造函数继承
3.寄生式继承
