JavaScript的原型链

Posted by Csming on 2019-04-28

JavaScript的原型

JavaScript在ECMA6的class这些关键字出来之前,面向对象编程的方式是基于函数和原型链来实现的。这边涉及到两个东西:contructor和prototype。

本文首先从如何构造一个JavaScript的对象,再到构造函数,再到原型链的顺序来阐述。

如何构造一个JavaScript的object

在JavaScript中构造一个对象对便捷的方式如下:

var object = {
property1: "value1",
property2: "value2",
method1: function () {
console.log(this.property);
}
}

上述代码能够直接创建一个对象。利用typeof可以得到object的类型:

console.log(typeof object); // "object"

这样做可以非常便捷的得到一个object,但是问题来了,如果需要创建多个属性和方法均一样的对象,使用上述的方法,就会出现问题了。代码就会变成如下这样:

var object1 = {
property1: "value1",
property2: "value2",
method1: function () {
console.log(this.property);
}
}

var object2 = {
property1: "value1",
property2: "value2",
method1: function () {
console.log(this.property);
}
}

var object3 = {
property1: "value1",
property2: "value2",
method1: function () {
console.log(this.property);
}
}
...

如上代码所示,这样创建对象是非常灾难的,并且没有一个固定的模板可以用于创建对象,每次创建对象时需要从已经创建的对象中拷贝属性再进行修改,非常不科学。

于是,这时候就需要用到构建函数了。

构造函数

在别的语言中,有class这个概念,但是在JavaScript中没有(在ECMA6之前没有)。JavaScript的对象体系是基于构造函数(contructor)和原型链(prototype)的。构造函数可以作为对象的模板。

eg:

var User = function (username, description) {
this.username = username;
this.description = description;
}

var user1 = new User("Jack", "A man");
var user2 = new User("Rose", "A woman");
console.log(user1.username); // "Jack"
console.log(user2.username); // "Rose"

上述代码将User作为一个构造函数,然后通过new操作符创建了一个user1的对象。

可以看出构造函数的声明和普通函数一样。只是函数名的首字母作了大写,这个并不是硬性的,只是为了表示和普通函数的区别。因此普通函数也可以跟new操作符配合使用作为构造函数。当然,如果构造函数不和new操作符一起使用,则会被当做一个普通函数。此处不再赘述。

这边需要注意的是:
1.构造函数的内部用this来表示即将创建的对象。
2.操作符new用于根据构造函数创建一个对象

那么这边虽然实现了利用模板(构造函数)来创建对象的问题,但是仍然面临一个问题。
这边有这么个情况:

var User = function (username, description) {
this.username = username;
this.description = description;
this.doSomething = function() {
console.log(username + ' ' + description);
}
}

var user1 = new User("Jack", "A man");
var user2 = new User("Rose", "A woman");

上述构造函数在执行构造函数代码的时候才将doSomething方法的方法体赋值给doSomething这个属性。那么,在每次执行构造函数代码的时候都会走这个逻辑。于是,每生成一个新的对象,都会生成一个新的doSomething方法。让我们测试一下:

user1.doSomething === user2.doSomething; // false

通过上述代码的运行结果,我们可以得知,user1和user2中的doSomething方法并不是同一个。在其他语言,比如Java中,我们的实例方法,都是指向同一个地址的方法的。那么在JavaScript中的这一现象,显然不是那么的友好。试想一下,如果有1000个User对象,那么就会有1000个doSomething方法,而doSomething的方法体都是一样的,这样造成了不必要的开销。

那么这时候,就需要用到JavaScript中的原型(prototype)了

原型

prototype

JavaScript的每个函数都会有一个prototype属性,这个属性将会指向一个对象。这个对象的所有属性和方法,都能被实例对象所共享。那么,如果将上一节中的doSomething方法放在prototype中,就可以处理掉不必要的开销:

var User = function (username, description) {
this.username = username;
this.description = description;
}
User.prototype.doSomething = function() {
console.log(username + ' ' + description);
}
var user1 = new User("Jack", "A man");
var user2 = new User("Rose", "A woman");
user1.doSomething(); // Jack A man
user2.doSomething(); // Rose A woman
user1.doSomething === user2.doSomething; // true

这边使用了prototype之后,会有这么一个现象,就是对象在调用某个方法或使用某个属性的时候,会先查找自身有没有这个方法或者属性,如果有则直接使用,否则才回去原型对象中查找。如果原型对象没有这个方法或属性,则会再想原型对象的原型对象去查找,直到找到需要的方法或属性,或者一直追溯到了Object的原型。object的原型对象的原型对象是null的。

这个就是原型链了。然后这边如果追溯的层级过深的话是比较消耗性能的。

如果对象具有跟prototype所指向的对象名字一样的属性,那么在获取该属性时,会读取对象自身的属性值。

eg:

var object = {
property1: "value1"
}

var Contructor = function() {
this.property2: "value2"
}

Contructor.prototype = object;
var instance = new Contructor();
console.log(instance.property1); // value1

instance.property1 = "value2"
console.log(instance.property1); // value2

通过将构造函数的prototype属性指向一个对象,能够让通过该构造函数创建的实例对象,能够使用prototype属性所指向的这个对象的属性和方法。比如,如果将prototype指向一个数组,那么实例对象就可以调用数组的方法。

这里借鉴一下阮一峰老师的例子:

var MyArray = function () {};

MyArray.prototype = new Array();
MyArray.prototype.constructor = MyArray;

var mine = new MyArray();
mine.push(1, 2, 3);
mine.length // 3
mine instanceof Array // true

这边的这个操作,就相当于使MyArray继承了Array类了。这也就是后面要提的利用原型链做继承。

contructor

上述代码还提到了contructor属性。 这个属性用于指向构造函数。默认的情况下指向的是当前prototype指向的对象所在的构造函数。在修改了原型对象之后,一般会同时修改contructor属性。例如,上述代码中,在执行完MyArray.prototype = new Array();这句时,contructor会指向Array。之后我们将它指回MyArray。

contructor属性用于告知我们实例对象是由哪个构造函数创建的。

另外,有了contructor属性之后,就可以从一个实例对象直接创建另一个实例对象了:

var User = function (username, description) {
this.username = username;
this.description = description;
}

var user1 = new User("Jack", "A man");

var user2 = user1.contructor("Rose", "A woman");
console.log(user2 instanceof User); // true

构造函数的继承

让一个构造函数继承另一个构造函数:

function Super() {
this.a = 'a';
}

function Sub() {
Super.call(this);
this.b = 'b';
}

Sub.prototype = Object.create(Super.prototype)
Sub.prototype.contructor = Sub;

1.上述代码,在Sub构造函数开始的时候调用Super, 执行完毕后走自己的逻辑。 Super.call(this)表示将将传入的this作为执行函数中this的指向,然后调用Super的逻辑。也就是说这里是为了将Super中的this指向Sub中的this。这是因为JavaScript的this指向的是当前调用环境的this。如果不做这样的处理,Super在调用的时候,this可能会指向全局作用域,导致不必要的异常。

然后将Sub的prototype指向由Super为原型创建的对象,之后将contructor指向自己。在将Sub的prototype指向Super的时候,contructor会自动指向Super,所以之后需要将其赋值为自身,也就是Sub


到此,原型和原型链的东西差不多就说完了。这里总结一下构造函数,prototype,contructor和实例对象的关系:

function Super() {
this.a = 'a';
}

function Sub() {
Super.call(this);
this.b = 'b';
}

Sub.prototype = Object.create(Super.prototype)

var sub = new Sub();
sub.__proto__ === Sub.prototype; // true
sub.contructor === Sub; // true
Sub.prototype.contructor === Sub;// true
Sub.prototype.prototype.contructor === Super;// true

参考:阮一峰老师的JavaScript教程