什么是原型对象?原型链?

对象

对象基础

对象的定义

对象是一个包含相关数据和方法的集合(一般由一些变量和函数组成,咱们称之为对象里面的属性和方法)。web

对象有时被称之为关联数组(associative array)了——对象作了字符串到值的映射,而数组作的是数字到值的映射。数组

建立一个对象一般先定义初始化变量。svg

var person = {};
person  // Object {}

点表示法

对象的名字表现为一个命名空间(namespace),它必须写在第一位-----当你想访问对象内部的属性或方法时,而后是一个点(.),紧接着是你想要访问的项目,标识能够是简单属性的名字(name),或者是数组属性的一个子元素,又或者是对象的调用方法。例如:函数

person.age
person.interests[1]
person.bar()

子命名空间

能够用一个对象来作另外一个对象成员值。例如将name成员this

name:['wh','xi'],

改为spa

name :{
    first : 'wh',
    last : 'xi'
},

这样,咱们实际上建立了一个子命名空间,听起来有点复杂,但用起来很简单,你只须要链式的再使用一次点表示法,像这样:prototype

person.name.first
person.name.last

注意:你须要改变你以前的代码,从rest

name[0]
name[1]

改为code

name.first
name.last

不然,你的方法再也不有效。xml

括号表示法

另一种访问属性的方式是使用括号表示法(bracket notation),替代这样的代码

person.age
person.name.first

使用以下所示的代码:

person['age']
person['name']['first']

这看起来很像访问一个数组的元素,从根本上来讲是一回事儿,你使用了关联了值的名字,而不是索引去选择元素。难怪对象有时被称之为关联数组(associative array)了——对象作了字符串到值的映射,而数组作的是数字到值的映射。

原型原型链

原型对象

在JavaScript 中,每当定义一个对象(函数) 时候,对象中都会包含一些预约义的属性。其中函数对象的一个属性就是原型对象 prototype 。注:普通对象没有prototype,可是有_ _ proto _ _ 属性 。

原型对象其实就是普通对象 (Function.prototype 除外,它是函数对象,但它很特殊,他没有prototype 属性(前面说道函数对象都有prototype 属性))。

原型对象是用来作什么的呢?

主要做用是用于继承。举个例子:

var person = function(name){
    this.name = name;
};
person.prototype.getName = function(){
    return this.name;
}
var veb = new person('Veblen');
veb.getName(); // Veblen

从这个例子能够看出,经过给person.prototype设置了一个函数对象的属性,那有person实例(例中:veb) 出来的普通对象就继承了这个属性。具体是怎么实现的继承,就要讲到下面的原型链了。

prototype
每一个函数都有一个 prototype 属性,就是咱们常常在各类例子中看到的那个 prototype ,好比:

function Person() {

}
// 虽然写在注释里,可是你要注意:
// prototype是函数才会有的属性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

那这个函数的 prototype 属性到底指向的是什么呢?是这个函数的原型吗?

其实,函数的 prototype 属性指向了一个对象,这个对象正是调用该构造函数而建立的实例的原型,也就是这个例子中的 person1 和 person2 的原型。

那什么是原型呢?你能够这样理解:每个JavaScript对象(null除外)在建立的时候就会与之关联另外一个对象,这个对象就是咱们所说的原型,每个对象都会从原型"继承"属性。

让咱们用一张图表示构造函数和实例原型之间的关系:

构造函数和实例原型的关系图在这里插入图片描述

在这张图中咱们用 Object.prototype 表示实例原型。

原型链

JS 在建立对象(不管是普通对象仍是函数对象) 的时候,都有一个叫作

_ _ proto _ _ 的内置属性,用于指向建立它的函数对象的原型对象 prototype 。

console.log(veb.__proto__ == person.prototype)  //true
一样,person.prototype 对象也有__proto__ 属性,它指向建立它的函数对象(Object)的 prototype
	console.log(person.prototypr.__proto__ Object.prototype)   //true
继续,Object.prototype对象也有__proto__属性,可是它比较特殊,为null
console.log(Object.prototype.__proto__)  //null

咱们把这个有_ _ proto _ _ 串起来的直到Object.prototype. _ _proto _ _ 为null的链叫作原型链。

图:(原型链)1551927801776