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通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
js表达式与运算符简单操作示例
Feb 15 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
php中的静态变量的基本用法
2014/03/20 PHP
destoon之一键登录设置
2014/06/21 PHP
Javascript中的Callback方法浅析
2015/03/15 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
JavaScript模块详解
2017/12/18 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
Python中分数的相关使用教程
2015/03/30 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
关键字final的用法
2013/10/02 面试题
迟到检讨书800字
2014/01/13 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
学校消防安全责任书
2014/07/23 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
音乐剧猫观后感
2015/06/04 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
师德培训心得体会2016
2016/01/09 职场文书
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis