【前端入门】原型链的学习未完待续,原型继承又是什么?

59 阅读1分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情

回顾:上文学习了“构造函数里新创建的的原型链具体思路”,这次我们继续来看看原型继承是什么内容,原型链的思路又会有什么改变呢?

什么是原型继承

Student构造函数

function Student(props){ 
    this.name = props.name || 'Unnamed';
} 

Student.prototype.hello = function () { 
    alert('Hello, ' + this.name + '!'); 
}

image.png

(例题及图片参考来源于 www.liaoxuefeng.com/wiki/102291… )

现在,我们要基于Student扩展出PrimaryStudent,可以先定义出PrimaryStudent

function PrimaryStudent(props) {
    // 调用Student构造函数,绑定this变量:
    Student.call(this, props);
    this.grade = props.grade || 1;
}

但是,调用了Student构造函数不等于继承了StudentPrimaryStudent创建的对象的原型是:

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null

必须想办法把原型链修改为:

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null

那么新原型链会时以下下这样的

image.png

(例题及图片参考来源于 www.liaoxuefeng.com/wiki/102291… )

小小总结

JS的原型继承实现方式:

  1. 定义新的构造函数,并在内部用call()调用希望“继承”的构造函数,并绑定this
  2. 借助中间函数F实现原型链继承,最好通过封装的inherits函数完成
  3. 继续在新的构造函数的原型上定义新方法

有点深奥,还是多看廖大神以上的思路和例题~

写在最后

以上习题&笔记从大佬们的论坛学习而来,特感谢大佬们的知识分享~ (学习技术知识,果然要看大佬们的技术博客,大家有好的推荐也欢迎指引我这个小白哈,感恩!)

附上学习链接,感谢这些大佬出题和解答:

www.liaoxuefeng.com/wiki/102291…

wangdoc.com/javascript/…

developer.mozilla.org