js开发:javascript中的this
来源:互联网 发布:安卓闪退修复软件下载 编辑:程序博客网 时间:2024/06/15 20:32
今天上午主要学习了js中的 this ,因为之前学习面向对象时,this这个东西出现的还是很频繁的,理解的很不透彻,感觉老被Java的思想带进坑里,所以对它特别关注。
首先贴一个大神的一篇博客,我是通过这篇博客对this的认识和了解有了很大的提升,下面是传送门
foocoder----详解JavaScript中的this
首先,解释一下this到底是个什么东西。我找到的解释是这样的(读起来有点绕)
this是包含它的函数作为方法被调用时所属的对象。
this是包含它的函数作为方法被调用时所属的对象。
this是包含它的函数作为方法被调用时所属的对象。
重要的事情说三篇!下面列举一下this出现的几种情况。
第一种情况,全局代码中的this
第二种情况,普通的函数中调用的this(我说的普通,就是表示大家经常会写出来的那种。。。就是在全局作用域中调用的函数,例子如下)。
这里的this包含在 fooCoder 函数中,而函数是被直接调用的(也就是在window中调用的),所以这个this指向window
第三种情况,构造函数中的this(之前见过许多次)
这里的this 指向的是通过构造函数 new 出来的那个tom对象。因为tom调用了 this所在的Person函数。第四种情况,对象的方法中调用的this
这里的this 指向的是调用这个方法的对象。例如tom.say(),这时this指向的是tom。原理同上第五种情况,this出现在内部函数中调用 类似这样
最外层的this就是第一种情况所说的全局环境直接调用this,这时候this就是window。
调用创建出来的对象 tom上的sayHello()函数,函数中包含一个内部函数sayfun(),这个内部函数中的this本来应该代表的是tom,但是当你运行程序后就发现alert 出来的 是 "jerry hello",就说明 这里的this 指向了window。
为什么会这样呢? 首先找找看到底是谁调用了 sayfun()函数。这里可能会误解为是tom这个对象调用了sayfun函数,其实真相是 tom调用了sayHello函数,而sayHello函数内部执行了sayfun函数,并不是tom调用的。那是谁调用的?这种直接调用的一般都是window干的。所以这里的this还是指向window的。
如果想要实现想要的效果,让this指向tom,可以进行这样分析一下:
tom调用了sayHello函数,那么sayHello函数中的this就还是指向tom的。而sayfun作为sayhello函数的内部函数是可以访问到sayhello函数的作用域的,所以我们在sayhello函数中保存一下this(比如把他保存为that)就可以让sayfun访问到这个保存的值。代码实现如下:
第六种情况,在apply(),call()这两个函数中的this。一般的实现是这样的
两者都是将某个函数绑定到某个具体对象上使用。这种情况之后下一篇专门分析。
除了以上几种情况外,还有关于事件处理函数中的this,也比较特殊,但是如果掌握里上面理解this的方法,也会变得很轻松。这部分内容我参考了这篇博客
事件处理函数的this ---yxc_gdut
浏览器有三种添加事件监听的方式。
第一种:直接在标签内写 onclick=“fn”
第二种:在js中 onclick=fn
第三种:在js中 用el.attachEvent或者el.addEventListener()
三种方式添加的事件处理函数运行的scope是不同的,不同浏览器也不尽相同。
IE
- js: el.onclick = fn ,fn的this->el
- 在div标签中 onclick = "fn()" ,fn的this->window
- js: el.attachEvent('onclick',fn); ,fn的this->window
Firefox、Chrome、Opera
- js: el.onclick = fn ,fn的this->el
- 在标签中 onclick = "fn()" ,fn的this->window (相当于执行eval())
- js: el.addEventListener('onclick',fn); ,fn的this->el
如果在函数中使用了this,只有在该函数直接被某对象调用时(代码中肉眼可见的调用,例如a = fn()或者 a.fn() 这种),该this才指向该对象。
- js开发:javascript中的this
- 【JS】JavaScript中的this
- Javascript/Node.js 中的 this
- JS篇——javascript中的this
- 【javascript】javascript中的this
- JS THIS 深入浅出 JavaScript 中的 this && 理解javascript函数调用和 this ** Javascript 普通函数和构造函数的区别
- 【js与jquery】javascript中的this关键字的理解
- javascript/node.js 中 setTimeout(callback,delay) 中的 this
- JavaScript中的this指针
- javascript 中的"this"
- javascript中的this!
- Javascript中的this讲解
- Javascript中的this关键字
- javascript中的this
- JavaScript中的this关键字
- JavaScript中的this详解
- JavaScript中的this指针
- javascript中的this
- spark on yarn启动异常
- Machine Learning_安装_caffe
- QDU-ycb的ACM进阶之路(多重背包做法)
- 帧同步在竞技类网络游戏中的应用
- 状态同步与帧同步
- js开发:javascript中的this
- window.onload的用法
- C++获取数组长度
- 小谈网络游戏同步
- Ta-lib学习笔记02--K线模式识别
- 嵌入式系统学习——STM32之UCOS-III消息传递
- webpack---htmlWbpackPlugin插件在webpack中的应用
- win10 oracle11g彻底删除并重装
- samba服务