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 相关文章推荐
javascript常用的方法分享
Jul 01 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
JavaScript异步操作中串行和并行
Nov 20 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的远程图片抓取函数分享
2013/09/25 PHP
php图片上传类 附调用方法
2016/05/15 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
javascript一点特殊用法
2008/05/28 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
python 对key为时间的dict排序方法
2018/10/17 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
售后服务经理岗位职责范本
2014/02/22 职场文书
教师校本培训方案
2014/02/26 职场文书
公司授权委托书范本
2014/04/03 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
施工安全责任协议书
2016/03/23 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang