javascript运行机制之this详细介绍


Posted in Javascript onFebruary 07, 2014

this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要。而javascript的this又有区别于Java、C#等纯面向对象的语言,这使得this更加扑朔迷离,让人迷惑。

this使用到的情况:
1. 纯函数
2. 对象方法调用
3. 使用new调用构造函数
4. 内部函数
5. 使用call / apply
6.事件绑定

1. 纯函数

var name = 'this is window';  //定义window的name属性  
function getName(){  
       console.log(this);    //控制台输出: Window  //this指向的是全局对象--window对象  
       console.log(this.name);  //控制台输出: this is window  /  
}    
getName(); 

运行结果分析:纯函数中的this均指向了全局对象,即window。

2. 对象方法调用

var name = 'this is window';  //定义window的name属性,看this.name是否会调用到  
var testObj = {  
    name:'this is testObj',  
    getName:function(){  
        console.log(this);  //控制台输出:testObj   //this指向的是testObj对象  
        console.log(this.name);  //控制台输出: this is testObj  
    }  
}  testObj.getName(); 

运行结果分析:被调用方法中this均指向了调用该方法的对象。

3.  使用new调用构造函数

function getObj(){  
    console.log(this);    //控制台输出: getObj{}  //this指向的新创建的getObj对象  
}  new getObj(); 

运行结果分析:new 构造函数中的this指向新生成的对象。

4. 内部函数

var name = "this is window";  //定义window的name属性,看this.name是否会调用到  
var testObj = {  
    name : "this is testObj",  
    getName:function(){  
        //var self = this;   //临时保存this对象  
        var handle = function(){  
            console.log(this);   //控制台输出: Window  //this指向的是全局对象--window对象  
            console.log(this.name);  //控制台输出: this is window    
            //console.log(self);  //这样可以获取到的this即指向testObj对象  
        }  
        handle();  
    }  
}  testObj.getName();

运行结果分析:内部函数中的this仍然指向的是全局对象,即window。这里普遍被认为是JavaScript语言的设计错误,因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来,一般约定为that或者self,如上述代码所示。

5. 使用call / apply

var name = 'this is window';  //定义window的name属性,看this.name是否会调用到  
var testObj1 = {  
    name : 'this is testObj1',  
    getName:function(){  
        console.log(this);   //控制台输出: testObj2  //this指向的是testObj2对象  
        console.log(this.name);  //控制台输出: this is testObj2    
    }  
}  var testObj2 = {  
    name: 'this is testObj2'  
}  
testObj1.getName.apply(testObj2);  
testObj1.getName.call(testObj2); 

Note:apply和call类似,只是两者的第2个参数不同:
[1] call( thisArg [,arg1,arg2,… ] );  // 第2个参数使用参数列表:arg1,arg2,... 
[2] apply(thisArg [,argArray] );     //第2个参数使用 参数数组:argArray
运行结果分析:使用call / apply  的函数里面的this指向绑定的对象。

6. 事件绑定
事件方法中的this应该是最容易让人产生疑惑的地方,大部分的出错都源于此。

//页面Element上进行绑定  
  <script type="text/javascript">  
     function btClick(){  
        console.log(this);  //控制台输出: Window  //this指向的是全局对象--window对象  
    }  
  </script>  
  <body>  
    <button id="btn" onclick="btClick();" >点击</button>  
  </body> 
//js中绑定方式(1)  
  <body>  
    <button id="btn">点击</button>  
  </body>  
  <script type="text/javascript">  
     function btClick(){  
        console.log(this);  //控制台输出:<button id="btn">点击</button>  //this指向的是Element按钮对象  
     }       document.getElementById("btn").onclick = btClick;  
     document.getElementById("btn").onclick;    
  </script> 
//js中绑定方式(2)  
<body>  
   <button id="btn">点击</button>  
 </body>  
 <script type="text/javascript">  
    document.getElementById("btn").onclick = function(){  
     console.log(this);  //控制台输出:<button id="btn">点击</button>  //this指向的是Element按钮对象  
    }  
    document.getElementById("btn").onclick;  
 </script> 
//js中绑定方式(3)  
<body>  
   <button id="btn">点击</button>  
 </body>  
 <script type="text/javascript">  
    function btClick(){  
        console.log(this);    
     }      document.getElementById("btn").addEventListener('click',btClick); //控制台输出:<button id="btn">点击</button>  //this指向的是Element按钮对象把函数(方法)用在事件处理的时候。  
    document.getElementById("btn").attachEvent('onclick',btClick);  //IE使用,控制台输出: Window  //this指向的是全局对象--window对象  
 </script> 

运行结果分析:以上2种常用事件绑定方法,在页面Element上的进行事件绑定(onclick="btClick();"),this指向的是全局对象;而在js中进行绑定,除了attachEvent绑定的事件方法外,this指向的是绑定事件的Elment元素。

Javascript 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
js函数调用的方式
May 06 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
JSON格式化输出
Nov 10 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 #Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 #Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 #Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 #Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 #Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 #Javascript
JQUERY 设置SELECT选中项代码
Feb 07 #Javascript
You might like
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
PHP Session机制简介及用法
2014/08/19 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
铁路工务反思材料
2014/02/07 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
二年级数学教学反思
2016/02/16 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
python游戏开发Pygame框架
2022/04/22 Python