在上一节中我们重点讲了对象和函数,得出的结论是:函数也是一种对象,对象都是通过函数创建的。
还记得上一节留下的问题吗?回顾一下:
var obj = new Object();
obj.a = 10;
obj.b = 20;
var arr = new Array();
arr[0] = 5;
arr[1] = 'x';
console.log(typeof obj); //object
console.log(typeof arr); //object
console.log(typeof Object); //function
console.log(typeof Array); //function
我们可以看到,Object
和Array
都是函数,说明对象是函数创建的。但是,到底是为什么呢?
接下来,就是揭秘时刻了:
在 JavaScript 中,每当定义一个对象的时候,对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype
属性,这个属性指向函数的原型对象。
那你可能会问了,函数对象和原型对象是什么?
1. 什么是函数对象
举个小例子:
var o1 = {};
var o2 =new Object();
var o3 = new f1();
function f1(){};
var f2 = function(){};
var f3 = new Function('str','console.log(str)');
console.log(typeof Object); //function
console.log(typeof Function); //function
console.log(typeof f1); //function
console.log(typeof f2); //function
console.log(typeof f3); //function
console.log(typeof o1); //object
console.log(typeof o2); //object
console.log(typeof o3); //object
虽然 ”万物皆对象“,但是,对象也是分为函数对象和普通对象的。
首先,声明一点,Object
和Function
是函数对象,它俩是JS自带的函数对象。
从上面的例子我们可以知道,o1,o2,o3是普通对象,f1,f2,f3是函数对象。怎么区分普通对象和函数对象呢?其实,只要记住一点,那就是通过new Function 创建出来的对象都是函数对象,其他都是普通对象。f1和f2归根到底也是Function
创建出来的,当然,Object
也不例外。
理解了函数对象,我们接着往下说,每个函数都有一个prototype
属性,而这个属性值是一个对象,默认只有一个constructor
的属性,指向这个函数的本身。
怎么理解呢?
var f = function(){};
console.log(f.prototype);
可以看到我创建了一个函数,在控制台输出它的原型,结果如下:
这印证了我们上面所说的,函数默认的只有constructor
这一个属性,而我们可以看到,里面的constructor默认还指向一个函数,而这个函数就是它本身。这里你可能会问了,为什么constructor
展开后,还有一个__proto__
属性,不要着急,接下来会细讲这一块。现在先来看看,为什么constructor
指向的是函数本身。
展开之后,我们发现,里面constructor
的prototype
属性不就是咱们这个函数的原型吗?所以,答案很明显了。为了更好的理解呢?看看这张图:
f 是一个函数,右边的是它的原型,想必这个指向已经很明确了吧,那函数的原型是这个样子,对象呢?
说到这里不得不再啰嗦一句,前面我们已经知道,函数也是对象,那对象既然作为属性的集合,当然不可能像函数那么单纯啦,先打印出来看看:
console.log(Object.prototype);
结果是啥呢?
相较于函数,确实是多了好几个属性。但是,别忘了,对象我们是可以自定义属性的哦。那前面的函数来举例,默认是只有constructor
一个属性的。
var Person = function(){};
Person.prototype.name = 'hsl';
Person.prototype.setAge = function() {
return 18;
}
console.log(Person.prototype);
新增了两个属性,name
和setAge
,看看效果:
这样做有什么用呢?当然是为了new
出来的对象能够调用里面的方法啊。接着往下看:
function Person(){};
Person.prototype.name = 'hsl';
Person.prototype.setAge = function() {
return 18;
}
var person = new Person();
console.log(person.name); // hsl
console.log(person.setAge()); // 18
console.log(Person.prototype);
Person
是一个函数,person
对象是从Person
函数new
出来的,这样的话,person
对象就可以调用Person.prototype
的属性了。
2. 什么是原型对象
之前提到过函数对象默认的constructor
属性指向的函数的原型对象,但是,好像一直也不是很清楚,何为原型对象。原型对象,其实也就是一个普通对象,简单点来说,上面例子的原型对象就是Person.prototype
,为啥呢?那咱们把上面的例子改改:
function Person(){};
Person.prototype = {
name: 'hsl',
setAge: function () {
return 18;
}
}
var person = new Person();
console.log(person.name); // hsl
console.log(person.setAge()); // 18
console.log(Person.prototype);
最后,你会发现是一样的结果,也就相当于是两种为对象添加属性的方法吧。
经过上面的一些小例子,我们来总结一下,以上面的代码为例:
- 一个对象的原型对象就相当于是
Person.prototype
Person.prototype.constructor == Person
person.constructor == Person
简单的解释一下,在默认的情况下,所有的原型对象(Person.prototype
)都会获得一个constructor
属性,这个属性指向prototype
属性所在的函数(Person
)。对了,这里插播一句,每个对象都有__proto__
属性,但是只有函数对象才有prototype属性。当然啦,Function.prototype
除外,它是函数对象,但是没有prototype
属性。
对于第三条结论,不知道大家还记得构造函数不,其实和我们上面的例子也是区别不大的。构造函数的目的就是为了实例化,在这里,person
就相当于是Person
的实例,person
也有一个constructor
的属性,该属性就是指向Person
的,看下面的例子:
function Person(name, age) {
this.name = name;
this.setAge = function() {
return age;
}
}
var person = new Person('hsl', 18);
console.log(person.constructor == Person); // true
根据这个例子又可以得出一个小结论啦,那就是实例的constructor
指向构造函数。
说了半天的原型对象,那它是干啥的?前面提到过调用自定义的属性,这里想说的是,主要是为了继承,其实,意思也是差不多。
var Person = function(name){
this.name = name;
};
Person.prototype.setName = function(){
return this.name;
}
var person = new Person('hsl');
person.setName(); // hsl
我们给Person
定义了一个setName
属性,person
作为Person
的实例继承了这个属性,所以我们可以得到setName`的数据。至于怎么实现继承的,就是接下来我们要讲的原型链了。