简介
- 原型是我们创建函数的时候,系统帮我们自动生成的一个对象。主要作用是解决构造函数内部方法内存资源浪费问题。在开发中我们一般把实例对象一些通用的方法放入原型中,在vue里面有时候也会给vue的原型添加一些公共类方法来实现所有的组件中可以共享成员。像一些常见的 r o u t e 和 route和 route和store都是挂在到vue的原型上的
- 原型链是js对象的一种查找机制,遵循就近原则。当我们访问一个对象中的成员的时候,会优先访问自己的,如果没有就访问原型的,如果原型也没有就会访问原型的原型,知道原型链的终点null,如果还没有,此时属性就会获取undefined,方法就会报错,xxx is not a function。一般原型链主要是用来实现面向对象继承的。
一、原型
JavaScript
常被描述为一种基于原型的语言————每个对象拥有一个原型对象
当时图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象额原型,以及该该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。
准确地说,这些属性和方法定义在Object的构造器函数(constructor function)之上的prototype
属性上,而非实例对象本身
下面举个例子:
函数可以有属性。每个函数都有一个特殊的属性叫做原型prototype
function doSomething() {}
console.log(doSomething.prototype)
控制台输出:
{
constructor: ƒ doSomething(),
__proto__: {
constructor: ƒ Object(),
hasOwnProperty: ƒ hasOwnProperty(),
isPrototypeOf: ƒ isPrototypeOf(),
propertyIsEnumerable: ƒ propertyIsEnumerable(),
toLocaleString: ƒ toLocaleString(),
toString: ƒ toString(),
valueOf: ƒ valueOf()
}
}
上面这个对象,就是大家常说的原型对象
可以看到,原型对象有一个自有属性constructor
,这个属性指向该函数,如下图关系展示
二、原型链
原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链(prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法
在对象实例和它的构造器之间建立一个连接(它是__proto__
属性,是从构造函数的prototype
属性派生的),之后通过上溯原型链,在构造器中找到这些属性和方法。
下面举个例子:
function Person(name) {
this.name = name
this.age = 18
this.sayName = function () {
console.log(this.name)
}
}
// 第二步 创建实例
var person = new Person('person')
根据代码,我们可以得到下图:
下面分析一下:
- 构造函数
Person
存在原型对象Person.prototype
- 构造函数生成实例对象
person
,person
的__proto__
指向构造函数Person
原型对象 Person.prototype.__proto__
指向内置对象,因为Person.prototype
是个对象,默认是由Object
函数作为类创建的,而Object.prototype
为内置对象Person.__proto__
指向内置匿名函数anonymous
,因为 Person 是个函数对象,默认由 Function 作为类创建Function.prototype
和Function.__proto__
同时指向内置匿名函数anonymous
,这样原型链的终点就是null
三、总结
下面首先要看几个概念:
__proto__
作为不同对象之间的桥梁,用来指向创建它的构造函数的原型对象的
每个对象的__proto__
都是指向它的构造函数的原型对象prototype
的
person1.__proto__ === Person.prototype
构造函数时一个函数对象,是通过Function
构造器产生的
Person.__proto__ === Function.prototype
原型对象本身是普通对象,而普通对象的构造函数都是Object
Person.prototype.__proto__ === Object.prototype
刚刚上面说了,所有的构造器都是函数对象,函数对象都是Function
构造汉城的
Object.__proto__ === Function.prototype
Object
的原型对象也有__proto__
属性指向null
,null
是原型链的顶端
Object.prototype.__proto__ === null
下面做出总结:
- 一切对象都是继承自
Object
对象,Object
对象直接继承根源对象null
- 一切的函数对象(包括
Object
对象),都是继承自Function
对象 Object
对象直接继承自Function
对象Function
对象的__proto__
会指向自己的原型对象,最终还是继承自Object
对象