JS实现继承的五种方法比较

谈JS中继承的五种方式之前，首先放几个几个核心概念。

构造函数：通常构造函数使用大写字母开始。使用new创建构造函数。

实例：构造函数创建出来的对象是这个构造函数的实例。

继承：一个对象使用另一个对象的属性和方法。

prototype：Person.prototype.constructor == Person 构造函数通过这个属性指向原型对象

 

下面看看实现继承的五种方法：

 

// 1.默认的原型继承-构造函数原型中添加属性
function Fn(){
   // code
}
Fn.prototype.value = 100;

var obj = new Fn();
console.log(obj.value);

// 2.覆盖构造函数的原型
function Fn(){}
Fn.prototype = {
	value = 100;
}

var obj = new Fn();
console.log(obj.value);

覆盖构造函数的原型方法会导致之前的constructor丢失。如果构造函数中这个属性很重要，最好手动在末尾添加这个属性。

Fn.prototype.constructor = Fn;

// 3.原型混入
function extend(o1,o2){
	for(var key in o2){
		o1[key] = o2[key];
	}
}
function Fn(){}
extend(Fn.prototype,{
	value:200
});
var fn = new Fn();
console.log(fn.value);

// 4.create创造新对象
var o = { value : 100}
var newObj = Object.create(o);

// 5.构造函数属性继承
function Person(name,age){
	this.name = name;
	this.age = age;
}
function Man(name,age){
	Person.call(this,name,age);
}
var man1 = new Man("Mike",2);
console.log(man1);

通过构造函数属性继承的方式可以有效的实现继承。call方法的应用还有其他很多方法。

2019-3-3 更新

使用构造函数属性继承的方式是最好的继承的方法，使用对象的apply，call 方法实现方法的继承

function Student(name, age) {
    this.name = name;
    this.age = age;
}

function GoodStudent(name, age) {
    Student.call(this, name, age);
}

let Mike = new GoodStudent("Mike", 20);
console.log(Mike);