Angular.JS中的this指向详解


Posted in Javascript onMay 17, 2017

【this详解】

1、谁最终调用函数,this指向谁。

      ① this指向的,永远只可能是对象!!!!!!

      ② this指向谁,永远不取决于this写在哪!!而是取决于函数在哪调用。

      ③ this指向的对象,我们称之为函数的上下文context,也叫函数的调用者

2、※※※※※this指向的规律(与函数调用的方式息息相关):

this指向的情况,取决于函数调用的方式有哪些:

      ① 通过函数名()直接调用:this指向window

      ② 通过对象.函数名()调用的:this指向这个对象

      ③ 函数作为数组的一个元素,通过数组下标调用的:this指向这个数组

      ④ 函数作为window内置函数的回调函数调用:this指向window setInterval  setTimeout 等...

      ⑤ 函数作为构造函数,用new关键字调用时:this指向新new出的对象 

function func(){
   console.log(this);
  }

① 通过函数名()直接调用:this指向window

func(); this--->window

② 通过对象.函数名()调用的:this指向这个对象

     狭义对象

var obj = {
 name:"obj",
 func1 :func
 };
 obj.func1(); this--->obj

     广义对象

document.getElementById("div").onclick = function(){
 this.style.backgroundColor = "red";
 }; this--->div

③ 函数作为数组的一个元素,通过数组下标调用的:this指向这个数组

var arr = [func,1,2,3];
arr[0](); this--->arr

④ 函数作为window内置函数的回调函数调用:this指向window

setTimeout(func,1000);// this--->window
setInterval(func,1000);

⑤ 函数作为构造函数,用new关键字调用时:this指向新new出的对象

var obj = new func(); //this--->new出的新obj

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 #Javascript
JavaScript简单拖拽效果(1)
May 17 #Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 #Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 #Javascript
Vue.js鼠标悬浮更换图片功能
May 17 #Javascript
12个非常有用的JavaScript技巧
May 17 #Javascript
Javascript中的async awai的用法
May 17 #Javascript
You might like
php数据库连接
2006/10/09 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
python海龟绘图实例教程
2014/07/24 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
在python里从协程返回一个值的示例
2019/02/19 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
tensorflow多维张量计算实例
2020/02/11 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
如何用Python 加密文件
2020/09/10 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
女方回门宴答谢词
2014/01/14 职场文书
大学活动总结范文
2014/04/29 职场文书
应聘会计求职信
2014/06/11 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
大学体育课感想
2015/08/10 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang