携手创作,共同成长!这是我参与「掘金日新计划 · 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的原型。如果你又创建了xiaohong、xiaojun,那么这些对象的原型与xiaoming是一样的:
xiaoming ↘
xiaohong → Student.prototype ----> Object.prototype ----> null
xiaojun ↗
廖大神的举例里给了这样的图,后续大家也可以学起来,丰富运用图形了解关系。红色箭头是原型链
(例题及图片参考来源于:www.liaoxuefeng.com/wiki/102291… )
特别注意细节
有一个小问题,注意观察:
xiaoming.name; // '小明'
xiaohong.name; // '小红'
xiaoming.hello; // function: Student.hello()
xiaohong.hello; // function: Student.hello()
xiaoming.hello === xiaohong.hello; // false
xiaoming和xiaohong各自的name不同,这是对的,否则我们无法区分谁是谁了。
xiaoming和xiaohong各自的hello是一个函数,但它们是两个不同的函数,虽然函数名称和代码都是相同的!
写在最后
以上习题&笔记从大佬们的论坛学习而来,特感谢大佬们的知识分享~ (学习技术知识,果然要看大佬们的技术博客,大家有好的推荐也欢迎指引我这个小白哈,感恩!)
附上学习链接,感谢这些大佬出题和解答: