[转]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的构造函数

1、构造函数和普通的函数一样，但是具有以下两个特殊性质。

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

下面这个例子很厉害~

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

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

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

函数的 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 两种访问对象原型的方式会得到相同的结果，前提是非IE6、7、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__去继续找，依次类推。