前两篇介绍了javascript面向对象的基本知识和继承的实现，本篇主要介绍this关键字的使用
———–
5. 关于this
this在javascript里是一个比较神奇的东西，新手通常会被它搞到头大
1). 顶层javaScript代码中的this
在顶层javaScript代码中，this指代window对象
在嵌入浏览器中的javascript中，window即全局对象。全局对象只是一个对象，而不是类。既没有构造函数，也无法实例化一个新的全局对象。在顶层javaScript代码中，可以用关键字this引用全局对象。但通常不必用这种方式引用全局对象，因为全局对象是作用域链的头，这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。
下面几段代码中的this指代的均是window
ex1. var abc = 'sss'; alert(abc);//"sss" alert(this.abc);//"sss" function fun1(){ alert(this.abc); } fun1();//"sss" this.alert(123); alert(this.parseInt('234s4')); |
2). 构造方法/类方法里的this
大部分时候，构造方法/类方法里直接使用this，指代的都是被实例化后的类对象，但是，如果其中有function/setTimeout，或者其他回调函数时，情况就有些不同了,如果想让this仍然指代你你所需要指代的对象，可以使用call/apply方法：
ex2. var O1 = function(){ function O(){ this.abc = 123; function f2(){ alert(this.abc); } f2();//直接调用f2方法，this指代window f2.call(this);//通过call调用f2方法，this指代O1 } function pf(){ alert(this.abc); } O.prototype = { f1 : function(){ pf();//直接调用pf方法，this指代window pf.call(this);//通过call调用pf方法，this指代O1 } }; return O; }(); var o = new O1(); o.f1(); |
3). Events的this
这个相对比较简单，在给一个DOM节点注册一个事件处理函数时，函数内的this指代的这个DOM节点：
ex3. document.getElementById('xxxx').onclick = function(){ alert(this.id); }; //使用jquery注册事件时，结果是一样的 $('#xxxx').click(function(){ alert(this.id); $(this).xxx()...//以this创建jquery对象 }); |
4). 回调函数里的this
ex4： var abc = 'window'; //O1 var O1 = function(){ function O(){ this.abc = 'O1'; } O.prototype = { f1 : function(){ alert(this.abc); } }; return O; }(); //O2 var O2 = function(){ function O(){ this.abc = 'O2'; } O.prototype.callbackFun = function(fun){ fun(); } return O; }(); //实例化O1和O2 var o1 = new O1(); var o2 = new O2(); //猜猜看这里会alert什么.....window o2.callbackFun(o1.f1);//“window” //所以，在使用需要类环境的回调方法时，需要套一层function o2.callbackFun(function(){ o1.f1();//“O1” }); //当然，也可以通过call让this指向O2 o2.callbackFun(function(){ o1.f1.call(o2);//“O2” o1.f1.call(this);//“window” }); |
关于本站