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 相关文章推荐
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
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安全编程之加密功能
2006/10/09 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
Python 第一步 hello world
2009/09/25 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
python调用百度语音REST API
2018/08/30 Python
python多进程控制学习小结
2018/10/31 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Django实现学生管理系统
2019/02/26 Python
台湾专柜女包:KINAZ
2019/12/26 全球购物
IBatis持久层技术
2016/07/18 面试题
网络编辑求职信
2014/04/30 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python