javascript中的this和prototype学习

学习是循序渐进的。作为前端菜鸟，也在一步一步慢慢学习当中。我不太习惯只是听原理学知识，看例子学习更适合我，而且学的更快。前端跟后端不同，写些代码 页面就会有些反应。最近在学习js中的闭包，对象，类，继承，this，prototype，call，apply。这些看起来很多，其实都是有联系的 ，比如技术中的四个继承方式中第一个：对象冒泡方式就是用的this，另两个call apply方式学习的时候就得先理解call和apply。原型方式用的就是prototype。 我的学习经验是抽一个集中的时间这些知识点一起学，学习效率会高一些，会得到事半功倍的效果。

this总结归纳：“this所指的就是直至包含this指针的上层对象”
调用形式        this指向
普通函数        全局对象window
对象的方法        该对象
构造函数        新构造的对象
对于this变量最要的是能够理清this所引用的对象到底是哪一个，也许很多资料上都有自己的解释，但有些概念讲的偏繁杂。而我的理解是：首先分析this所在的函数是当做哪个对象的方法调用的，则该对象就是this所引用的对象。

示例一

var obj = {};
obj.x = 100;
obj.y = function() { alert( this.x ); };
obj.y();    //弹出 100
这段代码非常容易理解，当执行 obj.y() 时，函数是作为对象obj的方法调用的，因此函数体内的this指向的是obj对象，所以会弹出100。

示例二

var checkThis = function() {
    alert( this.x); 
};
var x = 'this is a property of window';

var obj = {};
obj.x = 100;
obj.y = function(){ alert( this.x ); };

var obj2 = obj.y;

obj.y();   //弹出 100
checkThis();    //弹出 'this is a property of window
obj2();    //弹出 'this is a property of window
这里为什么会弹出 'this is a property of window'，可能有些让人迷惑。在JavaScript的变量作用域里有一条规则“全局变量都是window对象的属性”。当执行 checkThis() 时相当于 window.checkThis()，因此，此时checkThis函数体内的this关键字的指向变成了window对象，而又因为window对象 又一个x属性（ 'this is a property of window'）,所以会弹出 'this is a property of window'。

上面的两个示例都是比较容易理解的，因为只要判断出当前函数是作为哪个对象的方法调用（被哪个对象调用）的，就可以很容易的判断出当前this变量的指向。
详解JavaScript中的this

prototype是什么含义？



javascript中的每个对象都有prototype属性，Javascript中对象的prototype属性的解释是：返回对象类型原型的引用。

A.prototype = new B();

理解prototype不应把它和继承混淆。A的prototype为B的一个实例，可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属 性。这里强调的是克隆而不是继承。可以出现这种情况：A的prototype是B的实例，同时B的prototype也是A的实例。

先看一个实验的例子：

function baseClass()
{
  this.showMsg = function()
  {
     alert("baseClass::showMsg");   
  }
}

function extendClass()
{
}

extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg
复制代码
我们首先定义了baseClass类，然后我们要定义extentClass，但是我们打算以baseClass的一个实例为原型，来克隆的extendClass也同时包含showMsg这个对象方法。

extendClass.prototype = new baseClass()就可以阅读为：extendClass是以baseClass的一个实例为原型克隆创建的。



那么就会有一个问题，如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样？

下面是扩展实验2：

function baseClass()
{
    this.showMsg = function()
    {
        alert("baseClass::showMsg");   
    }
}

function extendClass()
{
    this.showMsg =function ()
    {
        alert("extendClass::showMsg");
    }
}

extendClass.prototype = new baseClass();
var instance = new extendClass();

instance.showMsg();//显示extendClass::showMsg
复制代码


实验证明：函数运行时会先去本体的函数中去找，如果找到则运行，找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。
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属性指向其他的对象。它的能力是可以把自己的属性给拥有它的函数的实例使用。