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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
完整显示当前日期和时间的JS代码
Sep 17 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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版(1)
2006/10/09 PHP
isset和empty的区别
2007/01/15 PHP
php获取操作系统语言代码
2013/11/04 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
python中常用的九种预处理方法分享
2016/09/11 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
老生常谈Python基础之字符编码
2017/06/14 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
python 错误处理 assert详解
2020/04/20 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
SQL Server笔试题
2012/01/10 面试题
营销总经理岗位职责
2014/02/02 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
工作表现证明
2015/06/15 职场文书
六一亲子活动感想
2015/08/07 职场文书
村官2015年度工作总结
2015/10/14 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
导游词之南京中山陵
2019/11/27 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
一文搞懂Redis中String数据类型
2022/04/03 Redis