Es5继承
程序员文章站
2022-07-15 20:30:43
...
Es5 对象和原型链实现混合继承
方法的区别
在构造函数和原型链添加方法区别:
Object.prototype.test=function(){
alert('我是原型链上 test()');
}
function Person(){
this.name='张三';
this.age=20;
function test(){
alert('我是Person上 test()')
}
}
function Son(){
}
var p=new Son()
p.test();
// 打印的是原型链上 test()
结论: 原型链上的方法会被多个实例 共享,构造函数不会
静态方法:
function static(){
}
static.add=function(){
alert('静态方法')
}
E5的继承
原理: 原型链+对象冒充的组合继承模式
对象冒充实现继承
function Father(){
}
function Son(){
}function Father(){
this.name='张三';
this.age=20;
this.test =function(){
alert('我是Father')
}
}
function Son(){
Father.call(this); // 通过改变 this 指向 对象冒充继承
}
var w=new Son();
w.test();
总结: 对象冒充可以继承构造的数里面的属性和方法 但是无法继承原型链上的属性和方法
原型链实现继承
function Father(name,age){
this.name='张三';
this.age=20;
this.test =function(){
alert('我是Father')
}
}
function Son(){
Father.call(this); // 通过改变 this 指向 对象冒充继承
}
Father.prototype.wx=function(){
alert('原型链上的方法')
}
Father.prototype.sex='男'
Son.prototype=new Father()
var w=new Son();
w.wx();
总结 原型链实现继承:可以继示构造数里面的属性和方法也可以继承原型链上面的属性和方法 但是实例化子类时没办法给父类传参
优化
function Father(name, age) {
this.name = name;
this.age = age;
this.test = function () {
alert(`我叫${name} 今年${age}`)
}
}
function Son(name,age) {
Father.call(this, name, age); // 通过改变 this 指向 对象冒充继承
}
Father.prototype.wx = function () {
alert('原型链上的方法')
}
Father.prototype.sex = '男'
Son.prototype = new Father()
var w = new Son('李白',20);
w.test()