轻松了解JS中this的指向
JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向,我会分以下几种情况来说。
this的指向:
1 this 指的是直接调用当前方法(函数)的那个对象,也就是说函数在谁那被调用,this就指的是谁。
来看两个栗子:
oBtn.onclick = function(){
alert(this); //oBtn
} oBtn.onclick = fn1; function fn1(){ alert(this); //oBtn
}
很容易看出,函数是在按钮对象被点击的时候调用,所以this指的是obtn,这两种情况是等同的是,只是调用函数的写法不同。
2 当函数里面嵌套函数的时候,嵌套的那个函数里面的this指的是window,不要过分深究这个原因,因为这是JS的一个特性。
来看个栗子:
oBtn.onclick = function(){ alert(this); //oBtn(记得这里还是oBtn) fn1();
} function fn1(){
alert(this); // window
}
对于上述情况,当我们需要fn1里面的this指向按钮的时候怎么办呢,这个时候有两种方法。
1 将this作为参数传函数去
2 将this保存起来赋给另一个变量
来看两个栗子:
1 oBtn.onclick = function(){ alert(this); //oBtn fn1(this); 1 将上面的this作为参数传函数去
} function fn1(obj){
alert(obj); // oBtn
} 2 var that = null;
oBtn[i].onclick = function(){ alert(this); //oBtn
that = this ;// 将上面的this保存起来赋给另一个变量
fn1();
} function fn1(){
alert(that); // 指向oBtn
}
后续补充:
3 如果有new关键字,this指向new出来的那个对象;
当用new去调用一个函数:这个时候this指的就是创建出来的对象 而且函数的默认返回值就是this 即这个对象(隐式返回 不用自己再写返回值)
function CreatePerson(name){ //函数名首字母大写
//var this=new Object(); 系统会偷偷在这里声明一个对象赋给this替咱们做,不用写
this.name = name;
this.showName = function(){
alert(this.name);
}
//return this; 函数的默认返回值就是this即这个对象(隐式返回 不用自己再写返回值) }
var p1 =new CreatePerson('haha');
//当用new去调用一个函数:这个时候this指的就是创建出来的对象 而且函数的默认返回值就是this即这个对象(隐式返回 不用自己再写返回值)
p1.showName();
new操作符具体干了什么呢?
(1)创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
(2)属性和方法被加入到 this 引用的对象中。
(3)新创建的对象由 this 所引用,并且最后隐式的返回 this 。
4 在IE下,事件的绑定的第二种形式中,obj.attachEvent(事件名称,事件函数),里面的this指的是window。
当然这不是我们想要的,所以让this指向触发事件的对象呢?这就需要提到一个方法call();它可以改变this的指向
call(this的指向,原来函数的参数列表):它有两个参数,第一个指的是改变的this的指向,也就是你想要this指向谁就写谁,如果写的是null,this的指向就不会改变,还是指向原来的。从第二个参数开始,就代表的是函数里面的具体传入的参数了。具体用法我们来看个栗子:
//有一个函数,两个参数。 function fn1(a,b){
alert(this); // 本来默认是window,改变后为1
alert(a+b);//
} //三种调用方法
fn1(); //正常调用。弹出 this指向window, a+b为 undefined
fn1.call(); // 等同于上面 ,这两种调用是一样的
fn1.call(1,10,20); // 弹出this指向 1,同时传入两个数,弹出30
改变this指向是不是也很简单呢。。。。。。
说点题外话,今天是我的第一篇博客,我平常呢,是个特别喜欢做笔记,也经常总结的人,只是写博客比较少,因为说不出来太多有文笔的东西,喜欢简单利索,逻辑分明的东西,希望以后我能更简单的将复杂的东西分享给你们,我们也一起学习,有什么不正确的,欢迎指正。
轻松了解JS中this的指向的更多相关文章
- 理解js中this的指向
学习自原文 http://www.cnblogs.com/pssp/p/5216085.html后的一点小结(原文作者总结的很棒^_^)! 关于js中this的指向,在函数定义的时候还无法 ...
- js中this的指向
在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1. ...
- JS中的this 指向问题
我发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug. 对于之前学习过c或者是Java的朋友来说可能这 ...
- js中改变this指向的call、apply、bind 方法使用
前言: 由于js 中this的指向受函数运行环境的影响,指向经常改变,使得开发变得困难和模糊,所以在封装sdk,写一些复杂函数的时候经常会用到this 指向绑定,以避免出现不必要的问题,call.ap ...
- js中 this 的指向
js中 this的指向一共存在3种地方: 1.全局的this; 2.构造函数的this; 3.call/apply; 一.全局的this: function test(){ this.d = 3;// ...
- 彻底理解js中this的指向,不必硬背。
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...
- 了解学习JS中this的指向
[转] 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问 ...
- JS中this的指向问题
JS中this的定义:this对象是在运行时基于函数的执行环境绑定的(通俗点来说就是:this代表当前函数属于哪个对象). this一般情况下都代表的是global对象,在浏览器中就是window对象 ...
- Js中的this指向问题
函数中的this指向和当前函数在哪定义的或者在哪执行的都没有任何的关系分析this指向的规律如下: [非严格模式]1.自执行函数中的this永远是window [案例1] var obj={ fn:( ...
随机推荐
- PySide_Qt文档介绍
http://qt-project.org/wiki/PySideDocumentation/
- 九、K3 WISE 开发插件《工业单据老单序时薄插件工具栏按钮开发实例》
=============================== 目录: 1.添加工具栏按钮 2.查询被添加工具栏按钮的业务单据的FMenuID和FID 3.添加工具栏按钮和业务单据的映射关系 4.工具 ...
- Ubuntu 下 Sublime 无法输入中文?(已解决)
在 Ubuntu 里安装了 Sublime 却不能输入中文? 这可不好. 怎么办呢? Follow Me! 1 获得 sublime-imfix.c 文件 有 GitHub 账号的,可以从 https ...
- Django框架详解
一.WSGI接口 WSGI服务网关接口:Web Server Gateway Interface缩写. WSGI是python定义的Web服务器和Web应用程序之间或框架之间的通用接口标准. WSGI ...
- layer弹窗插件自带自写经验
复制可下载源代码和自写教程 链接: https://pan.baidu.com/s/1mhHa5Os 密码: j5su
- MySQL数据库一个字段对应多个值得模糊查询和多个字段对应一个模糊查询
当一个字段想模糊查询出多个字段的时候,正常情况下一般会这么作 1 select * from a where name like 'a%' or name like 'b%' ....or ...; ...
- zabbix监控告警Received empty response from Zabbix Agent Assuming that agent dropped connection
zabbix监控告警Received empty response from Zabbix Agent Assuming that agent dropped connection错误 查看zabbi ...
- 新一代.NET平台三大框架的定位
这是今天坐公交时继续阅读 Virtual Panel: What's Next for .NET? 这篇采访报道的收获. 新一代.NET平台的三大框架是:.NET Core, .NET Framewo ...
- 泡泡一分钟:A Multi-Position Joint Particle Filtering Method for Vehicle Localization in Urban Area
A Multi-Position Joint Particle Filtering Method for Vehicle Localization in Urban Area 城市车辆定位的多位置联合 ...
- HDU 4347 - The Closest M Points - [KDTree模板题]
本文参考: https://www.cnblogs.com/GerynOhenz/p/8727415.html kuangbin的ACM模板(新) 题目链接:http://acm.hdu.edu.cn ...