原型链

阅读次数:

#

# 一、认识原型

1、先来一串代码

var Person = function(msg){
    this.msg = msg;
}
var person1 = new Person("wanger")

person1.constructor===Person;    //true
Person === Person.prototype.constructor; //true
person1.__proto__ === Person.prototype; //true
person1.__proto__.constructor === person1.constructor //true

看晕了吧?是不是很胡里花哨?不用担心,其实一张图就能了明白这其中的关系:

Alt text

  • 蓝色的是构造函数
  • 绿色的是构造函数实例出来的对象
  • 橙色的是构造函数的prototype,也是构造函数实例出来的对象的原型(它其实也是一个对象)

2、这里特别要注意的是prototype__proto__的区别,prototype是函数才有的属性,而__proto__是每个对象都有的属性。(__proto__不是一个规范属性,只是部分浏览器实现了此属性,对应的标准属性是[[Prototype]])。

# 二、认识原型链

1、我们刚刚了解了原型,那原型链在哪儿呢?不要着急,再上一张图:

Alt text

通过这张图我们可以了解到,person1的原型链是:

person1 ----> Person.prototype ----> Object.prototype ----> null

2、事实上,函数也是一个对象,所以,Person的原型链是:

Person ----> Function.prototype ----> Object.prototype ----> null

由于Function.prototype定义了apply()等方法,因此,Person就可以调用apply()方法。

3、如果把原型链的关系都显示清楚,那会复杂一些,如下图:

Alt text

这里需要特别注意的是:所有函数的原型都是Function.prototype,包括Function构造函数和Object构造函数(如图中的标红部分)

# 三、原型链的继承

1、假设我们要基于Person扩展出Student,Student的构造如下:

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

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

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

示意图如下所示:

Alt text

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

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

示意图如下所示:

Alt text

那我们应该怎么修改呢?仔细观察两张图的差异,我们会发现,如果我们将Studentprototype改成person1对象不就大功告成了?于是有了下面的代码:

Student.prototype = person1 ;

但是这时候有个问题:

Student.prototype.constructor === Student; //false

原来Student.prototype(即person1)的constructor指向的还是Person,这时候还需要我们再改一下代码:

Student.prototype.constructor = Student;

这样就能把Student的原型链顺利的修改为: new Student() ----> Student.prototype ----> Person.prototype ----> Object.prototype ----> null 了;

完整的代码显示如下:

var Person = function(msg){
    this.msg = msg;
}
var Student = function(props) {
    // 调用Person构造函数,绑定this变量:
    Person.call(this, props);
    this.grade = props.grade || 1;
}
var person1 = new Person("wanger")
Student.prototype = person1 ;
Student.prototype.constructor = Student;

# 三、用以上原型链继承带来的问题

1、如果在控制台执行一遍上述的代码,我们会发现一些问题,如图所示:

Alt text

Student.prototype上含有之前person1带有的属性,那么,这样的继承的方法就显得不那么完美了

2、这个时候,我们可以借助一个中间对象来实现正确的原型链,这个中间对象的原型要指向Person.prototype。为了实现这一点,参考道爷(就是发明JSON的那个道格拉斯)的代码,中间对象可以用一个空函数F来实现:

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

// 空函数F:
function F() {
}

// 把F的原型指向Person.prototype:
F.prototype = Person.prototype;

// 把Student的原型指向一个新的F对象,F对象的原型正好指向Person.prototype:
Student.prototype = new F();

// 把Student原型的构造函数修复为Student:
Student.prototype.constructor = Student;

// 继续在Student原型(就是new F()对象)上定义方法:
Student.prototype.getGrade = function () {
    return this.grade;
};

// 创建wanger:
var wanger = new Student({
    name: '王二',
    grade: 9
});
wanger.msg; // '王二'
wanger.grade; // 9

// 验证原型:
wanger.__proto__ === Student.prototype; // true
wanger.__proto__.__proto__ === Person.prototype; // true

// 验证继承关系:
wanger instanceof Student; // true
wanger instanceof Person; // true

这其中主要用到了一个空函数F作为过桥函数。为什么道爷会用过桥函数?用过桥函数F(){}主要是为了清空构造的属性。如果有些原Person的构造用不到,那么过桥函数将是一个好的解决方案

这样写的话,Student.prototype上就没有任何自带的私有属性,这是理想的继承的方法

3、如果把继承这个动作用一个inherits()函数封装起来,还可以隐藏F的定义,并简化代码:

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

封装后,写起来就像这样:

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

这样再一封装的话,代码就很完美了。

事实上,我们也可以在inherits中使用Object.create()来进行操作,代码如下:

function inherits(Child, Parent) {
    Child.prototype = Object.create(Parent.prototype);
    Child.prototype.constructor = Child;
}

如果有兴趣了解Object.create()的其他用法,可以参考我的这篇博客JS中Object.create的使用方法;

# 四、ES6的新关键字class

在ES6中,新的关键字class,extends被正式被引入,它采用的类似java的继承写法,写起来就像这样:

class Student extends Person {
    constructor(name, grade) {
        super(msg); // 记得用super调用父类的构造方法!
        this.grade = grade || 1;
    }
    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

这样写的话会更通俗易懂,继承也相当方便。读者可以进入廖雪峰的官方网站详细了解class的用法

参考文献: 廖雪峰的官方网站