js中this
首先声明,我是小白,以下只是自己的简单理解。
先看下面的代码:
1 (function () { 2 3 console.log(this); 4 5 })();
毫无疑虑,输出的是window。
在看下面代码:
1 (function () { 2 3 function Main() { 4 console.log(this); 5 } 6 new Main(); 7 })();
当然这样返回的是Main{}。
解释一下吧:首先说this返回的是当前对象,而在次代码中,this也就指的是,Main的这个对象了。(注意是对象)。
接着看下面的代码:
1 (function () { 2 3 function main() { 4 console.log(this); 5 } 6 main(); 7 })();
这个结果输出的是window,是不是有点不可思议。接下来分析一下,懂原理了就明白了O(∩_∩)O哈!
先提下new,它声明了一个对象,这个对象再去执行一个函数。拿第二个代码来说,new声明了一个对象Main{},它去执行的函数,所以这个this返回的是Main{}对象。
如果没有new,而直接执行函数main,那么谁去执行的呢,不用说,没有对象了,这个负担就交给了window了(window:我心累啊!)
最后提一点,第二个和第三个代码,函数名不一样,第二个代码是Main(),第一个字母是大写的,也就表明了它是构造函数。这里说的目的是,webstorm编译器会给予警告,不会报错,但看起来不爽,而且编码也不规范(对于我这强迫症患者更是痛苦啊O(≧口≦)O)
1 (function () { 2 3 var self=this; 4 function Main() { 5 console.log(self); 6 } 7 new Main(); 8 })();
这次输出的是window,这就表明this可以传递。
用处:当你想获取函数外部的函数的this时候可以先用一个对象变量保存this,从而传递this。(这算是一个技巧吧)
接着"上菜"
1 (function () { 2 3 function Main() { 4 var show = this.showThis; 5 show.apply(this); 6 } 7 8 Main.prototype.showThis = function () { 9 console.log(this); 10 }; 11 new Main(); 12 })();
结果是Main{},这段代码用了原型方法,当然this也指的是Main{}这个对象。
prototype明天如果有时间话整理(明天又要开始培训了苦逼啊)
补充by8.23
今天看了会《JavaScript高级程序设计》,对this又有了些许感悟,特此几下。
引用其中的一句话:在全局函数中,this 等于window,而当函数被作为某个对象的方法调用时,this 等于那个对象
最重要的一句话就是,this实在针对对象来说的。 这也就解释了上面的有new和没new的区别。
看个代码:
1 var name = "The Window"; 2 var object = { 3 name : "My Object", 4 getNameFunc : function(){ 5 return function(){ 6 return this.name; 7 }; 8 } 9 }; 10 alert(object.getNameFunc()());
返回的结果是window。
这也就说明了this只往上找一级,找不到返回的就是window
代码如果这样写的话:
1 var name = "The Window"; 2 var object = { 3 name : "My Object", 4 getName: function(){ 5 return this.name; 6 } 7 };
在输出object.getName();结果就是My Object
因为这里的this找到了var声明的对象object。
补充by8.30
一个特别特别特别重要的知识点:
截取部分代码:
1 Card.prototype.addClickEvent = function () { 2 3 var self = this; 4 this._htmlNode.bind("click", function () { 5 console.log($(this)); 6 self.showB(); 7 }); 8 9 };
1 Card.prototype.addClickEvent = function () { 2 3 4 this._htmlNode.bind("click", function () { 5 console.log($(this)); 6 this.showB(); 7 }.bind(this)); 8 9 };
这是卡片旋转的部分代码。(用的jQuery写的)
说明,点击时候不是点击Card而是,htmlNode。
两个代码等价。但个人认为下面的高大上。当然高富帅也是要付出代价的不容易记。
注意一点bind里面绑定的是this,不是Card。