js函数中this的指向
本文是我个人对this指向的一些理解,如有不足之处,还望大家可以批评指正,在此先谢过了!
首先,我们来回顾一下ES5里函数的几种调用方式:
1⃣️直接调用
foo();
2⃣️方法调用
obj.foo();
以上两种调用方法,this的指向可以这样去确定: 函数的调用者就是this的指向!
例如 obj.foo(); 里.foo()前面obj就是调用者,所以this的指向就是obj,而直接调用的foo()等价于window.foo();这样的话,上面两种调用方法的this指向就显而易见了,1⃣️的this是window,2⃣️的this是obj
举个栗子:
1.关于直接调用
function foo(){
console.log(this)
}
foo() 这个foo()等价于window.foo(),所以this的指向就是window
2.关于方法调用
var obj = {
foo: function(){
console.log(this)
}
}
obj.foo();
这里foo的调用者是obj,所以this的指向就是obj
3⃣️call/apply
obj.foo.call(context,parma)/obj.apply(context,[parma]);
关于 call/apply调用,context是谁,this指向的就是谁。需要注意的是,当context值为undefined/null的时候,this指向的是window,this的指向还是undefined/null。
相信看到这里,大家应该对this的指向有一定的理解了吧,最后再来个个人认为对我们初学者来说很恶心的一个栗子:
function fn (){ console.log(this) };
function fn2(){ console.log(this)};
var arr = [fn, fn2]
arr[0]();
我擦,这个也没有点语法(就是obj.foo())调用,看样子长得很像foo()这种调用方式,那它的this指向是window吗?ma蛋,事实上并不是,它的this指向的是arr,那么为什么呢?
首先arr是一个数组,而数组也是对象,也就是obj,访问obj内部元素有两种方式[]语法和.语法,也就是obj[key]和obj.key,数组里面的index就可以看作是obj里的key,所以在这里,它不是没有点语法调用吗?那我们就给他改造成点语法,也就是这样arr.0(),最后也就不难理解,这个this的指向就是arr了,但切记,数组里面内容的访问只能是arr[index]语法,实际应用千万不要写arr.index!!!这里只是为了方便理解。
小结:
1.call/apply的调用方式自不用说,this指向就是context值,切记当context值为undefined/null的时候,this指向的是window,this的指向还是undefined/null。;
2.obj.foo();的this指向就是obj
3.直接调用foo();转换成点语法调用就是window.foo();所以this的指向就是window;
4.最恶心的就是那种看似是foo();的骗子们,这时候我们一定要想办法给它转换成点语法调用来帮助我们找到this指向(比如上面数组的栗子)。
5.如果是一大串点语法调用的,像这样 obj1.obj2.obj3.foo(); 我们只需要看离foo最近的那个obj就行了,这个栗子里的this指向也就是obj3;
总之一句话,套路再多我们也不用管,只要看到是谁最后调用的函数,函数内的this就指向谁!!!
最后祝愿大家都不再被this指的晕头转向!!!
js函数中this的指向的更多相关文章
- 深入理解JS函数中this指针的指向
函数在执行时,会在函数体内部自动生成一个this指针.谁直接调用产生这个this指针的函数,this就指向谁. 怎么理解指向呢,我认为指向就是等于.例如直接在js中输入下面的等式: console.l ...
- js闭包中的this(匿名函数中的this指向的是windows)
js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...
- JS回调函数中的this指向(详细)
首先先说下正常的this指向问题 什么是this:自动引用正在调用当前方法的.前的对象. this指向的三种情况 1. obj.fun() fun中的this->obj,自动指向.前的对 ...
- JS的一些总结(函数声明和函数表达式的区别,函数中的this指向的问题,函数不同的调用方式,函数也是对象,数组中的函数调用)
一.函数声明和函数表达式的区别: 函数声明放在if——else语句中,在IE8中会出现问题 函数表达式则不会 <script> if(true){ function f1(){ conso ...
- Javascript回调函数中的this指向问题
使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: 1 var name = 'my name is window'; 2 var ob ...
- 改变函数中的 this 指向——神奇的call,apply和bind及其应用
在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...
- 在JS函数中执行C#中的函数、字段
1.调用字段 cs文件的代码: ; protected void Page_Load(object sender, EventArgs e) { id = ; } js页面的代码: function ...
- React之函数中的this指向
我们都知道在React中使用函数时,有两种写法,一是回调函数,二是直接调用,但需要在构造函数中绑定this,只有这样,函数中的this才指向本组件 总结一下没有绑定this的函数中的this指向 不管 ...
- js函数中获得当前被点击元素
问题描述:在html页面中点击<a>或者’按钮‘,进入js中的函数,在js函数中获得被点击那个<a>或‘按钮’元素 解决方法:方法一: html中: <a>标签:& ...
随机推荐
- 1011: [HNOI2008]遥远的行星
1011: [HNOI2008]遥远的行星 Time Limit: 10 Sec Memory Limit: 162 MBSec Special JudgeSubmit: 2241 Solved ...
- 配置adb环境变量
作为Android开发人员,会经常使用adb命令来进行push.pull.install.看数据库等.记录一下adb配置流程,以备后用. 在没有配置adb之前,我们打开Windows命令处理程序(cm ...
- opencv与VS的配置
1.VS2015下配置Opencv3.2教程:http://jingyan.baidu.com/article/4b52d702b3209afc5c774b3c.html http://blog.cs ...
- 关于DLL的学习
1.前言: 人总归还是要有梦想的,不然跟咸鱼有什么区别.这一周给自己定下了研究DLL的任务还是要逼自己完成的呀,上了一天的党校,游戏也不打在这里写博,心疼自己.话说为什么要给自己下这样一个任务呢,是因 ...
- 关于Tarjan(1)
众所周知, 求有向图的强连通分量的Tarjan算法是以其发明者Robert Tarjan命名的.Robert Tarjan还发明了求双连通分量的Tarjan算法,以及求最近公共祖先(LCA)的离线Ta ...
- Struts2之标签使用
上一篇我们一起探讨了Struts2中的OGNL表达式的知识,本篇我们一起来学习一下关于Struts2标签的使用,包括:基础标签:property.set.bean.include:判断标签:if el ...
- PHPCMS二次开发——对栏目可用 limit 限定获取
为了实现类似用limit调用栏目,故自定义了mylimit(这里不能用limit,因为系统在解析的时候会覆盖,所以自定义的limit就起不到作用) 参数,例如: {pc:content action ...
- Ceres Solver for android
最近开发中,需要对图片做一些处理与线性技术,这时就用到了Ceres Solver.如何把Ceres Solver集成到Android里呢? 官网给了一个解决方案,简洁明了: Downloa ...
- C语言::模拟实现strlen函数
题目要求 编写一个C语言程序模拟实现strlen函数. 算法 strlen函数功能是计算字符串中字符的个数.(除\0外) 而字符串本身就是一个字符数组,只不过末尾以\0结束. 因此,我们只需遍历除\0 ...
- 一个web应用的诞生(10)--关注好友
下面回到首页中,使用一个账户登录,你肯定已经注意到了这里的内容: 没错,现在都是写死的一些固定信息,其中分享数量很容易就可以获取,只需要修改首页模板: <p class="text-m ...