请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 5726|回复: 53

原型链

[复制链接]

821

主题

821

帖子

2663

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2663
发表于 2019-5-22 11:08:26 | 显示全部楼层 |阅读模式
我们说过所有的对象都有原型,而原型也是对象,也就是说原型也有原型,那么如此下去,也就组成了我们的原型链。
属性搜索原则
属性搜索原则,也就是属性的查找顺序,在访问对象的成员的时候,会遵循以下原则:
  • 首先从对象实例本身开始找,如果找到了这个属性或者方法,则返回。
  • 如果对象实例本身没有找到,就从它的原型中去找,如果找到了,则返回。
  • 如果对象实例的原型中也没找到,则从它的原型的原型中去找,如果找到了,则返回。
  • 一直按着原型链查找下去,找到就返回,如果在原型链的末端还没有找到的话,那么如果查找的是属性则返回 undefined,如果查找的是方法则返回 xxx is not a function。
更简单的原型语法
在前面的例子中,我们是使用 xxx.prototype. 然后加上属性名或者方法名来写原型,但是每添加一个属性或者方法就写一次显得有点麻烦,因此我们可以用一个包含所有属性和方法的对象字面量来重写整个原型对象:
  1. function Student(name, age, gender) {
  2.     this.name = name;
  3.     this.age = age;
  4.     this.gender = gender;
  5. }
  6. Student.prototype = {
  7.     hobby:"study",
  8.     sayHi:function(){
  9.     console.log("hi");
  10.     }
  11. }
  12. var s1 = new Student("wangwu",18,"male");
  13. console.log(Student.prototype.constructor === Student);//结果为 false
复制代码
但是这样写也有一个问题,那就是原型对象丢失了 constructor 成员。所以为了保持 constructor 成员的指向正确,建议的写法是:
  1. function Student(name, age, gender) {
  2.     this.name = name;
  3.     this.age = age;
  4.     this.gender = gender;
  5. }
  6. Student.prototype = {
  7.     constructor: Student, //手动将 constructor 指向正确的构造函数
  8.     hobby:"study",
  9.     sayHi:function(){
  10.     console.log("hi");
  11.     }
  12. }
  13. var s1 = new Student("wangwu",18,"male");
  14. console.log(Student.prototype.constructor === Student);//结果为 true
复制代码
原型链继承
我们都听过这么一句话:子承父业。而在我们的 JavaScript 中也有继承。接下来我们会学习原型链继承。原型链继承的主要思想是利用原型让一个引用类型继承另外一个引用类型的属性和方法。
  1. function Student(name, age, gender) {
  2.     this.name = name;
  3.     this.age = age;
  4.     this.gender = gender;
  5. }
  6. Student.prototype.sayHi = function(){
  7.     console.log("hi");
  8. }
  9. var s1 = new Student("zhangsan",18,"male");
  10. s1.sayHi(); //打印 hi
  11. var s2 = new Student("lisi",18,"male");
  12. s2.sayHi(); //打印 hi
复制代码
上述例子中实例化对象 s1 和 s2 都继承了 sayHi 方法。
Object.prototype 成员介绍
在控制台中输入以下代码:
  1. Object.prototype;
复制代码
我们介绍常用的几个 Object.prototype 成员:

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

用户反馈
客户端