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 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
javascript获取元素的计算样式
May 24 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
Python编程中flask的简介与简单使用
2018/12/28 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
销售类个人求职信范文
2013/09/25 职场文书
小学教师学期末自我评价
2013/09/25 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
希特勒的演讲稿
2014/05/23 职场文书
项目经理任命书
2014/06/04 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
庆六一宣传标语
2014/10/08 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery