谈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);