Javascript学习笔记--理解prototype

简介:

from:http://cymoft.blog.51cto.com/324099/63422

prototype和closure是js中两个不好搞懂的概念,幸好网上有很多相关的文章,在网上查了一遍以后,总是是觉得有点理解了。今天先说说prototype。
之前一直被ajax in action中文版附录里的一篇文章误导,该文有这样一段讲述
function MyObject(){ 

MyObject.prototype.color =  "red"
var obj1 =  new MyObject(); 

MyObject.prototype.color =  "blue"
MyObject.prototype.soundEffect =  "boOOoing"
var obj2 =  new MyObject();
文中称上述代码执行后,obj1的颜色为红色,obj2颜色为蓝色。这是错误的!
实际上,obj1,obj2的color属性,都为蓝色!
同时这篇文章还说,prototype和new关键字协同工作,当使用new调用函数时,函数prototype的所有属性和方法会附加到结果对象上。这段话很容易让人产生一个误解,就是结果对象本身会拥有函数的prototype上的属性和方法,而实际上,不是的。
prototype的能力并不是往结果对象上添加东西,prototype只不过拥有可以 被找到的能力而已!代码
function MyObject(){ 

MyObject.prototype.x = 1; 
var obj =  new MyObject(); 
alert("obj.x="+obj.x);
这里我们没有给obj添加属性x,但是可以得到obj.x = 1,因为当js在对象obj自身的属性中找不到属性x的时候,便会到生成obj对象的构造函数MyObject的prototype属性中去找,于是,找到x=1。看代码
function MyObject(){  
}  
MyObject.prototype.x = 1;  
var obj =  new MyObject();  
alert( "obj.x="+obj.x); 
MyObject.prototype.x = 2; 
alert( "obj.x="+obj.x);
这里先弹出obj.x = 1,然后弹出obj.x = 2,说明obj.x实际上找到的是MyObject.prototype.x。
问题来了,我们可以通过obj找到MyObject.prototype的属性,那么,可不可以修改勒?
function MyObject(){    
}    
MyObject.prototype.x = 1;    
var obj =  new MyObject();    
obj.x = 2; 
alert(MyObject.prototype.x);  //弹出 1 
MyObject.prototype.x = 3; 
alert(obj.x); //弹出2 
delete obj.x; 
alert(obj.x) //弹出3
当执行了obj.x =2;以后,修改MyObject.prototype.x的值无法影响obj.x了,因为obj.x=2;这一步赋值操作,会给obj这个对象自己添加属性x,于是我们现在就有两个x,obj自己的,和MyObject.prototype的,当时调用obj.x时,js当然会优先使用对象自己的属性。接下来的代码也好理解了,删除obj自己的x后,调用obj.x时又去找构造函数MyObject的prototype的x,于是找到3。
ok,接下来,看复杂一点的例子。
function MyObject1(){ 

MyObject1.prototype.x = 1; 

function MyObject2(){ 

MyObject2.prototype =  new MyObject1(); 

var obj =  new MyObject2(); 
alert(obj.x);
 
恩,js的原型继承,我们不是说这个,我只是简单的想只到,obj怎么找到x的。按照前面的解释,obj本身没有x,去找构造函数,这里是MyObject2的prototype,这里有点不一样了,MyObject2.prototype被赋予了一个值,MyObject1的一个实例。那么,MyObject2.prototype.x是不是就相当于(new MyObject1()).x,如同前面的讨论,不就是找到 了MyObject1.prototype.x!同理,如果MyObject1.prototype也是其他类的实例,那就接着往下找就是了,这就是所谓的prototype chain。
那么如果在MyObject1里面也没有定义x,是不是就不往下找了?不是的,这个链的终点,是Object.prototype,如果在Object.prototype中都没有找到属性x的定义,js才会很肯定的告诉你,obj.x没有被定义。
 
小结一下,prototype到底是什么?
prototype是js中函数(Function)对象的一个属性,本身也是一个对象,当我们新建一个函数的同时,也新建了该函数的prototype对象,我们也可以让这个prototype属性指向其他的对象。它的能力是可以把自己的属性给拥有它的函数的实例使用。
 
呵呵,我的这段总结真拗口啊……
提两个问题:
1:能不能把js内置对象的prototype属性指向别的对象!
2:两个类循环引用prototype会怎么样?
 
先来看一个问题,告诉大家答案是不能!
function MyObject(){} 
Array.prototype =  new MyObject(); 
alert(Array.prototype.constructor);
弹出的依然是Array自己的构造函数,赋值是失败的。
 
第二个问题,看代码~
function MyObject1(){} 
function MyObject2(){} 
MyObject1.prototype =  new MyObject2(); 
MyObject2.prototype =  new MyObject1();
 
看着有点觉得变态啊,这样写也不会有什么问题,没有死循环,应该是被优化了,两个类和谐共处,跟一家人似的。
   本文转自老Zhan博客园博客,原文链接:http://www.cnblogs.com/mybkn/articles/2719147.html,如需转载请自行联系原作者
相关文章
|
9月前
|
前端开发 JavaScript
【JavaScript原型链prototype详解】
在JavaScript中,每个对象都有一个原型(prototype)属性,它指向另一个对象。这个被指向的对象也有自己的原型,以此类推,最终形成了一个原型链。原型链的顶端是Object.prototype,它是所有对象的根原型。 当我们访问一个对象的属性时,如果该对象自身没有这个属性,JavaScript会沿着原型链向上查找,直到找到匹配的属性或者到达原型链的末端。
98 0
【JavaScript原型链prototype详解】
|
9月前
|
JavaScript 前端开发
CocosCreator 面试题(二)JavaScript中的prototype的理解
CocosCreator 面试题(二)JavaScript中的prototype的理解
190 0
|
13天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
14 0
|
2月前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
35 2
|
2月前
|
JavaScript 前端开发 开发者
【专栏】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念
【4月更文挑战第29天】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念。prototype 是函数属性,用于实现对象继承,方法和属性定义在其上可被所有实例共享。__proto__是对象属性,实现属性查找机制,当对象自身找不到属性时,会沿原型链向上查找。两者关系:__proto__指向构造函数的 prototype,构成对象与原型的桥梁。虽然 prototype 可直接访问,但__proto__由引擎内部维护,不可见。理解两者区别有助于深入学习 JavaScript。
|
2月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
32 0
webgl学习笔记3_javascript的HTML DOM
|
2月前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
26 0
|
2月前
|
JavaScript
JS原型对象prototype
JS原型对象prototype
|
2月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
2月前
|
JavaScript 前端开发
JavaScript基础知识:什么是原型链(Prototype Chain)?
JavaScript基础知识:什么是原型链(Prototype Chain)?
37 2