es5 的继承
原型链的继承模式
原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
1)优点
简单明了,容易实现
实例是子类的实例,实际上也是父类的一个实例
父类新增原型方法/原型属性,子类都能访问
2)缺点
所有子类的实例的原型都共享同一个超类实例的属性和方法
无法实现多继承
在创建子类的实例时 不能向父类的构造函数传递参数
function Person(name, age) {
this.name = name; /*属性*/
this.age = age;
this.run = function() {
/*实例方法*/
alert(this.name + "在运动");
};
}
Person.prototype.sex = "男";
Person.prototype.work = function() {
alert(this.name + "在工作");
};
function Web(name, age) {}
Web.prototype = new Person();
var w = new Web("赵四", 20);
w.run(); ----》输出的是 undefined在运动
var w1 = new Web("王五", 22);
2:
对象冒充继承
call和apply方法
对象冒充可以继承构造函数里面的属性和方法 但是没法继承原型链上面的属性和方法
原型链+对象冒充的组合继承模式
function A (color){
this.color = color
}
A.prototype.sayColor = function(){
console.log(this.color)
}
function B(sColor,name){
A.call(this,sColor);
this.name = name;
}
B.prototype = new A();
B.prototype.sayName = function(){
console.log(this.name)
}
var b = new B("red","nik")
复制代码请注意: 在执行 B.prototype = new A(); 之后,B.prototype.constructor 指向A 。然而constructor的定义是要指向原型属性对应的构造函数的,B.prototype是B构造函数的原型,所以应该添加一句纠正:
B.prototype.constructor = B;
相关阅读: 链接:juejin.cn/post/684490…
es6 继承
使用extends 继承