携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情
回顾:上文学习了“构造函数里新创建的的原型链具体思路”,这次我们继续来看看原型继承是什么内容,原型链的思路又会有什么改变呢?
什么是原型继承
Student构造函数
function Student(props){
this.name = props.name || 'Unnamed';
}
Student.prototype.hello = function () {
alert('Hello, ' + this.name + '!');
}
(例题及图片参考来源于 www.liaoxuefeng.com/wiki/102291… )
现在,我们要基于Student扩展出PrimaryStudent,可以先定义出PrimaryStudent:
function PrimaryStudent(props) {
// 调用Student构造函数,绑定this变量:
Student.call(this, props);
this.grade = props.grade || 1;
}
但是,调用了Student构造函数不等于继承了Student,PrimaryStudent创建的对象的原型是:
new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null
必须想办法把原型链修改为:
new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null
那么新原型链会时以下下这样的
(例题及图片参考来源于 www.liaoxuefeng.com/wiki/102291… )
小小总结
JS的原型继承实现方式:
- 定义新的构造函数,并在内部用
call()调用希望“继承”的构造函数,并绑定this - 借助中间函数
F实现原型链继承,最好通过封装的inherits函数完成 - 继续在新的构造函数的原型上定义新方法
有点深奥,还是多看廖大神以上的思路和例题~
写在最后
以上习题&笔记从大佬们的论坛学习而来,特感谢大佬们的知识分享~ (学习技术知识,果然要看大佬们的技术博客,大家有好的推荐也欢迎指引我这个小白哈,感恩!)
附上学习链接,感谢这些大佬出题和解答: