jacascript中的原型链以原型

今地铁上看慕课网js课程，又学习到关于原型的一些知识，记录如下。如有偏差欢迎指正：

三张图要连起来看哦~

图解：

1、创建一个函数foo.

2、运用函数的prototype属性（这个属性就是实例对象的原型对象），增加 z，并 z 赋值为3.

3、var obj = new foo()  实例化一个构造函数obj，并穿件obj.y=2,obj.x=1;

4、在obj函数中，x、y、z的值都可以取到，因为z是通过原型对象添加的，原型对象的作用就是定义所有对象共享的属性和方法。所以 'z' in obj;返回true.

5、hasOwnProperty：用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，所以obj.hasOwnProperty('z');返回false.

图解：

1、obj.z = 5;  给obj赋值为5，所以 obj.hasOwnProperty('z');返回为true。

2、foo.prototype.z 的值不会被修改仍是3.

3、obj.z 赋值为undefined,则obj.z 更改为undefined.

图解：

　　使用 delete 删除 obj.z 的值5，注意：只删除obj对象上的自有属性，并不会影响原型链上的共有属性。

更新于2016.9.29

---

是什么

• __proto__ 
  每个对象都拥有的属性

• prototype 
  每个方法都拥有的属性

有什么用

• 让js拥有了原型链来达到共享数据和方法的目的

js中万物皆对象，方法也是对象。所以方法既是方法也是对象，so方法既有__proto__又有prototype属性。

举个例子：

var A = function(){}; // A是一个方法，当然也是个对象  
var a = new A(); // a是一个由A创造出的对象，不是方法  

//看一看对象非方法的行为
console.log(a.__proto__); //object  
console.log(a.prototype); //undefined, 对象没有 

//看一看方法的行为，方法也是对象哦

console.log(A.__proto__); //function  
console.log(A.prototype); //object  

更新于2016.9.27

---

转自（文／JC_Huang（简书作者）原文链接：http://www.jianshu.com/p/3bb6f208e459）

前言

js所有的函数都有一个prototype属性，这个属性引用了一个对象，即原型对象，简称原型。

函数包括构造函数、普通函数。下面要将的是构造函数的原型，但普通函数也有原型。

1、普通函数：

function F(){};
alert( F.prototype instanceof Object ) //true

补：instanceof 

　　运算符返回一个布尔值，表示一个对象是否由某个构造函数创建。

2、构造函数：

　　用new关键字来调用定义的构造函数。默认返回的是一个新对象，这个新对象具有构造函数定义的变量和函数/方法。

通过下面例子了解 构造函数实例化对象的过程：

function A () {
  this.x = x;    
};
var obj = new A (1);

一切皆为对象

JavaScript的世界中的对象，追根溯源来自于 null

　　万物初生时，一个null对象，凭空而生，接着Object、Function学着null的模样塑造了自己，并且它们彼此之间喜结连理，提供了prototype和constructor，一个给子孙提供了基因，一个则制造万千子子孙孙。
在JavaScript中，null也是作为一个对象存在，基于它继承的子子孙孙，当属对象。
乍一看，null像是上帝,而Object和Function犹如JavaScript世界中的亚当与夏娃。

原型指针 __proto__

在JavaScript中，每个对象都拥有一个原型对象，而指向该原型对象的内部指针则是__proto__,通过它可以从中继承原型对象的属性，原型是JavaScript中的基因链接，有了这个，才能知道这个对象的祖祖辈辈。从对象中的__proto__可以访问到他所继承的原型对象。

var a = new Array();
a.__proto__ === Array.prototype // true

上面代码中，创建了一个Array的实例a，该实例的原型指向了Array.prototype。
Array.prototype本身也是一个对象，也有继承的原型:

a.__proto__.__proto__ === Object.prototype  // true
// 等同于 Array.prototype.__proto__ === Object.prototype

这就说了明了，Array本身也是继承自Object的，那么Object的原型指向的是谁呢？

a.__proto__.__proto__.__proto__ === null  // true
// 等同于 Object.prototype.__proto__ === null

prototype.png

所以说，JavaScript中的对象，追根溯源都是来自一个null对象。佛曰：万物皆空，善哉善哉。

除了使用.__proto__方式访问对象的原型，还可以通过Object.getPrototypeOf方法来获取对象的原型，以及通过Object.setPrototypeOf方法来重写对象的原型
。
值得注意的是，按照语言标准，__proto__属性只有浏览器才需要部署，其他环境可以没有这个属性，而且前后的两根下划线，表示它本质是一个内部属性，不应该对使用者暴露。因此，应该尽量少用这个属性，而是用Object.getPrototypeof和Object.setPrototypeOf，进行原型对象的读写操作。
这里用__proto__属性来描述对象中的原型，是因为这样来得更加形象，且容易理解。

原型对象 prototype

函数作为JavaScript中的一等公民，它既是函数又是对象，函数的原型指向的是Function.prototype

var Foo = function() {}
Foo.__proto__ === Function.prototype // true

函数实例除了拥有__proto__属性之外，还拥有prototype属性。
通过该函数构造的新的实例对象，其原型指针__proto__会指向该函数的prototype属性。

var a = new Foo();
a.__proto__ === Foo.prototype; // true

而函数的prototype属性，本身是一个由Object构造的实例对象。

Foo.prototype.__proto__ === Object.prototype; // true

prototype属性很特殊，它还有一个隐式的constructor，指向了构造函数本身。

Foo.prototype.constructor === Foo; // true
a.constructor === Foo; // true
a.constructor === Foo.prototype.constructor; // true

prototype2.png

原型链

概念

原型链作为实现继承的主要方法，其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
每个构造函数都有一个原型对象(prototype)，原型对象都包含一个指向构造函数的指针(constructor)，而实例都包含一个指向原型对象的内部指针(__proto__)。
那么，假如我们让原型对象等于另一个类型的实例，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。
如此层层递进，就构造了实例与原型的链条，这就是原型链的基本概念。

意义

“原型链”的作用在于，当读取对象的某个属性时，JavaScript引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。以此类推，如果直到最顶层的Object.prototype还是找不到，则返回undefine

亲子鉴定

在JavaScript中，也存在鉴定亲子之间DNA关系的方法：

1. instanceof
   运算符返回一个布尔值，表示一个对象是否由某个构造函数创建。
2. Object.isPrototypeOf()
   只要某个对象处在原型链上，isProtypeOf都返回true

var Bar = function() {}
var b = new Bar();
b instanceof Bar // true
Bar.prototype.isPrototypeOf(b) // true
Object.prototype.isPrototypeOf(Bar) // true

要注意，实例b的原型是Bar.prototype而不是Bar

一张历史悠久的图

jsobj_full.jpg

这是一张描述了Object、Function以及一个函数实例Foo他们之间原型之间联系。如果理解了上面的概念，这张图是不难读懂。