【前端入门】构造函数新原型链思路及经典例题

84 阅读1分钟

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

上次回顾:学习到“面向对象编程”的入门内容,学习了创建对象&构造函数。那么构造函数里,新创建的的原型链又是么样子的呢!?我们这次一起来看看

构造函数新原型链

先来定义一个构造函数

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

在JavaScript中,可以用关键字new来调用这个函数,并返回一个对象:

var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

新创建的xiaoming的原型链是:

xiaoming ----> Student.prototype ----> Object.prototype ----> null

也就是说,xiaoming的原型指向函数Student的原型。如果你又创建了xiaohongxiaojun,那么这些对象的原型与xiaoming是一样的:

xiaoming ↘
xiaohong → Student.prototype ----> Object.prototype ----> null
xiaojun  ↗

廖大神的举例里给了这样的图,后续大家也可以学起来,丰富运用图形了解关系。红色箭头是原型链

image.png

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

特别注意细节

有一个小问题,注意观察:

xiaoming.name; // '小明'
xiaohong.name; // '小红'
xiaoming.hello; // function: Student.hello()
xiaohong.hello; // function: Student.hello()
xiaoming.hello === xiaohong.hello; // false

xiaomingxiaohong各自的name不同,这是对的,否则我们无法区分谁是谁了。

xiaomingxiaohong各自的hello是一个函数,但它们是两个不同的函数,虽然函数名称和代码都是相同的!

写在最后

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

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

www.liaoxuefeng.com/wiki/102291…

wangdoc.com/javascript/…

developer.mozilla.org