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 相关文章推荐
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
javascript操作excel生成报表示例
May 08 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
Mar 04 Javascript
JS实现扫雷项目总结
May 19 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
Yii操作数据库的3种方法
2014/03/11 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
js获取图片大小的函数代码
2011/09/20 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
python实现爬虫下载漫画示例
2014/02/16 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
Python实现端口检测的方法
2018/07/24 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
python打开windows应用程序的实例
2019/06/28 Python
python动态规划算法实例详解
2020/11/22 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
化验室技术员岗位职责
2013/12/24 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
关于美容院的活动方案
2014/08/14 职场文书
七夕活动策划方案
2014/08/16 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python