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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
Vue中props的使用详解
Jun 15 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 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
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
Python中使用Inotify监控文件实例
2015/02/14 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python判断两个对象相等的原理
2017/12/12 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python实现网站表单提交和模板
2019/01/15 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
Python Map 函数的使用
2020/08/28 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
绩效专员岗位职责
2013/12/02 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
cf收人广告词
2014/03/14 职场文书
扬尘污染防治方案
2014/06/15 职场文书
作风建设剖析材料
2014/10/06 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
管辖权异议上诉状
2015/05/23 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
学生会部长竞选稿
2015/11/19 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python