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

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

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

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

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

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

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

// 1.默认的原型继承-构造函数原型中添加属性
function Fn(){}
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方法的应用还有其他很多方法,下次再进行分析。

猜你喜欢

转载自blog.csdn.net/weixin_41697143/article/details/80700629