JS原型与原型链解析-优快云博客

准备找工作了，所以把js再温习一遍，今天刚好看到了原型，所以就记录一下。PS:原文章位置：http://www.cnblogs.com/onepixel/p/5024903.html

如果基本了解了原型对象与原型链，可以直接跳到最后面，

简单来说，要了解原型，首先得知道两个概念：函数对象 Function与普通

对象 Object ，在网上看到一句话，觉得很有意思，在Javascript中，万物皆对象，js里的对象大致分为两种，就是上面提到的函数对象与普通对象。

那么，怎么区分两种对象呢？举例说明：

function f1() {

// todo

}

var f2 = function () {

// todo

};

var f3 =new Function('x', 'console.log(x)');

var o1 = {};

var o2 =new Object();

var o3 =new f1();

console.log(

typeof f1,

typeof f2,

typeof f3,

typeof o1,

typeof o2,

typeof o3

);

> function function functionobject object object

f1 f2 f3 就是函数对象，o1 o2 o3就是普通对象，

简而言之，通过 function 创建的就是函数对象，其他是普通对象。

在 JS 中，每当创建一个函数对象 f1 时，该对象中都会内置一些属性，其中包括 prototype 和 __proto__， prototype 即原型对象，

注意：prototype 对 f1 是不可见的，也就是说，f1 不会查找 prototype 中的属性和方法。

function f(){}

f.prototype.foo ="abc";

console.log(f.foo);// undefined

那么，prototype 有什么用呢？其实 prototype 的主要作用就是继承。通俗一点讲，prototype 中定义的属性和方法都是留给自己的 “后代” 用的，因此，子类完全可以访问prototype中的属性和方法。

于是乎，就有了原型链 __proto__ ，它存在于普通对象和函数对象中，它的作用就是引用父类的 prototype 对象，JS在通过 new 操作符创建一个对象的时候，通常会把父类的 prototype 赋值给新对象的 __proto__属性，这样就形成了一代代传承...

function f() {}

f.prototype.foo ="abc";

var obj =new f();

console.log(obj.foo);// abc

现在我们知道，obj中__proto__保存的是 f 的 prototype，那么 f 的 prototype 中的 __proto__ 中保存的是什么呢? 看下图：

如图所示，f.prototype 的 __proto__ 中保存的是 Object.prototype，Object.prototype 对象中也有 __proto__，而从输出结果看，Object.prototype.__proto__ 是 null，表示 obj 对象原型链的终结。如下图所示：

obj 对象拥有这样一个原型链以后，当 obj.foo 执行时，obj 会先查找自身是否有该属性，但不会查找自己的 prototype，当找不到foo时，obj 就沿着原型链依次去查找...

在上面的例子中，我们在f的 prototype 上定义了 foo 属性，这时 obj 就会在原型链上找到这个属性并执行。

总结一下以上涉及到的重点：

原型链的形成真正是靠__proto__ 而非prototype，当JS引擎执行对象的方法时，先查找对象本身是否存在该方法，如果不存在，会在原型链上查找，但不会查找自身的prototype。
一个对象的 __proto__ 记录着自己的原型链，决定了自身的数据类型，改变 __proto__ 就等于改变对象的数据类型。
函数的 prototype 不属于自身的原型链，它是创建子类的核心，决定了子类的数据类型，是连接子类原型链的桥梁。
在原型对象上定义方法和属性，是为了被子类继承和使用。

这里有一个图示来说明prototype是如何工作的。这个对象的每一个实例(boss1, boss2, boss3)都有一个内部属性叫做__proto__，这个属性指向了它的构造器(Employee)的属性prototype。当你执行 getSalary或者addSalary的时候，这个对象会在它的__proto__找到并执行这个代码。注意这点：这里并没有代码的复制(和 Example DT8的图表作一下对比)。

js的Prototype属性 <wbr>解释及常用方法