javaScript中__proto__与prototype的区别与联系

[转]javaScript中__proto__与prototype的区别与联系

2014-5-4阅读490 评论0

最近在学习javascript的原型，发现了__proto__与prototype，学问很大，因而研究了一下。

首先解释一下什么是原型？ 

原型是一个对象，其余对象能够经过它实现属性继承。

对象又是什么呢？

在javascript中，一个对象就是任何无序键值对的集合,若是它不是一个主数据类型(undefined，null，boolean，number，array，string)，那它就是一个对象。

那么如何查看一个对象的原型是啥呢？又如何给一个对象设置原型呢？

标准对象原型访问器Object.getPrototype(object)，到目前为止只有Firefox和chrome实现了此访问器。除了IE，其余的浏览器支持非标准的访问器__proto__，而prototype则是一个只有函数才具备的属性，

也就是说，若是这个对象不是函数，那么它就没有prototype这个属性。

下面代码证明了以上结论。

<script>
			var a={name:'derek'};
			var b=function(name){
				name=this.name;
				};
			document.write(a.prototype+"<br>");//undefined 对象a显然不是一个函数，因此没有prototype这个属性。
			document.write(Object.getPrototypeOf(a)+"<br>");//[object Object]
			document.write(Object.getPrototypeOf(b)+"<br>");//function Empty() {}
			document.write(Object.getPrototypeOf(b)==b.__proto__);//true  这两个的是等价的，只不过浏览器的兼容型不一样。
		</script>

再说一下javascript的构造函数

一、构造函数和普通的函数同样，可是具备如下两个特殊性质。

二、一般构造函数的首字母是大写的（让识别构造函数变得更容易）。构造函数一般要和 new 操做符结合，用来构造新对象。

下面这个例子很厉害~

基于所知道的知识，请想象建立一个新的对象，并让新对象表现地像数组的过程。一种方法是使用下面的代码。

1 2 3 4 5 6

// 建立一个新的空对象 varo = {}; // 继承自同一个原型，一个数组对象 o.__proto__ = Array.prototype; // 如今咱们能够调用数组的任何方法... o.push(3);

虽然这段代码颇有趣，也能工做，可问题在于，并非每个 JavaScript 环境都支持可写的 __proto__ 对象属性。幸运的是，JavaScript 确实有一个建立对象内建的标准机制，只须要一个操做符，就能够建立新对象，而且设置新对象的 __proto__ 引用 – 那就是“new”操做符。

1 2	varo =newArray(); o.push(3);

JavaScript 中的 new 操做符有三个基本任务。首先，它建立新的空对象。接下来，它将设置新对象的 __proto__ 属性，以匹配所调用函数的原型属性。最后，操做符调用函数，将新对象做为“this”引用传递。若是要扩展最后两行代码，就会变成以下状况：

1 2 3 4

varo = {}; o.__proto__ = Array.prototype; Array.call(o); o.push(3);

函数的 call 方法容许你在调用函数的状况下在函数内部指定“this”所引用的对象。固然，函数的做者在这种状况下须要实现这样的函数。一旦做者建立了这样的函数，就能够将其称之为构造函数。

咱们来测试一下，

var Person=function(name,age){
				this.name=name;
				this.age=age;
				document.write("hello,I'm "+name+" and "+age+" years old"+"<br>");
			}
			var p1=new Person('derek',23);
			document.write(Object.getPrototypeOf(p1)==Person.prototype);//true
			document.write(p1.__proto__==Person.prototype);//true 两种访问对象原型的方式会获得相同的结果，前提是非IE六、七、8浏览器。。

能够上面的理论是正确的~

咱们接着作实验，看一下继承是怎么实现的~

var Person=function(name,age){
				this.name=name;
				this.age=age;
				document.write("hello,I'm "+name+" and "+age+" years old"+"<br>");
			}
			Person.prototype.smile=function(){
				document.write("O(∩_∩)O~"+"<br>");
			}
			var p1=new Person('derek',23);
			p1.smile();

输出： hello,I'm derek and 23 years old
O(∩_∩)O~

首先，p1这个对象没有smile这个函数，因而去__proto__属性上去找，由于p1.__proto__==Person.prototype，而Person.prototype上刚好有这个函数，所以就会出现上面的运行结果。这个是最简单的原型链，若是Person.prototype上尚未smile()这个函数，那么就会去Person.__proto__去继续找，依次类推。