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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
Javascript 继承实现例子
Aug 12 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
请求时token过期自动刷新token操作
Sep 11 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
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 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
动态加载iframe
2006/06/16 Javascript
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
Vue程序调试的方法
2019/06/17 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
Python 学习笔记
2008/12/27 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
水果连锁超市创业计划书
2014/01/24 职场文书
根叔历年演讲稿
2014/05/20 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
三严三实心得体会范文
2014/10/13 职场文书
个人整改措施书面材料
2014/10/24 职场文书
大学军训的体会
2014/11/08 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
Java获取字符串编码格式实现思路
2022/09/23 Java/Android