本文是我个人对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的指向的更多相关文章

  1. 深入理解JS函数中this指针的指向

    函数在执行时,会在函数体内部自动生成一个this指针.谁直接调用产生这个this指针的函数,this就指向谁. 怎么理解指向呢,我认为指向就是等于.例如直接在js中输入下面的等式: console.l ...

  2. js闭包中的this(匿名函数中的this指向的是windows)

    js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...

  3. JS回调函数中的this指向(详细)

    首先先说下正常的this指向问题 什么是this:自动引用正在调用当前方法的.前的对象. this指向的三种情况 1. obj.fun()     fun中的this->obj,自动指向.前的对 ...

  4. JS的一些总结(函数声明和函数表达式的区别,函数中的this指向的问题,函数不同的调用方式,函数也是对象,数组中的函数调用)

    一.函数声明和函数表达式的区别: 函数声明放在if——else语句中,在IE8中会出现问题 函数表达式则不会 <script> if(true){ function f1(){ conso ...

  5. Javascript回调函数中的this指向问题

    使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: 1 var name = 'my name is window'; 2 var ob ...

  6. 改变函数中的 this 指向——神奇的call,apply和bind及其应用

    在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...

  7. 在JS函数中执行C#中的函数、字段

    1.调用字段 cs文件的代码: ; protected void Page_Load(object sender, EventArgs e) { id = ; } js页面的代码: function ...

  8. React之函数中的this指向

    我们都知道在React中使用函数时,有两种写法,一是回调函数,二是直接调用,但需要在构造函数中绑定this,只有这样,函数中的this才指向本组件 总结一下没有绑定this的函数中的this指向 不管 ...

  9. js函数中获得当前被点击元素

    问题描述:在html页面中点击<a>或者’按钮‘,进入js中的函数,在js函数中获得被点击那个<a>或‘按钮’元素 解决方法:方法一: html中: <a>标签:& ...

随机推荐

  1. 1011: [HNOI2008]遥远的行星

    1011: [HNOI2008]遥远的行星 Time Limit: 10 Sec  Memory Limit: 162 MBSec  Special JudgeSubmit: 2241  Solved ...

  2. 配置adb环境变量

    作为Android开发人员,会经常使用adb命令来进行push.pull.install.看数据库等.记录一下adb配置流程,以备后用. 在没有配置adb之前,我们打开Windows命令处理程序(cm ...

  3. opencv与VS的配置

    1.VS2015下配置Opencv3.2教程:http://jingyan.baidu.com/article/4b52d702b3209afc5c774b3c.html http://blog.cs ...

  4. 关于DLL的学习

    1.前言: 人总归还是要有梦想的,不然跟咸鱼有什么区别.这一周给自己定下了研究DLL的任务还是要逼自己完成的呀,上了一天的党校,游戏也不打在这里写博,心疼自己.话说为什么要给自己下这样一个任务呢,是因 ...

  5. 关于Tarjan(1)

    众所周知, 求有向图的强连通分量的Tarjan算法是以其发明者Robert Tarjan命名的.Robert Tarjan还发明了求双连通分量的Tarjan算法,以及求最近公共祖先(LCA)的离线Ta ...

  6. Struts2之标签使用

    上一篇我们一起探讨了Struts2中的OGNL表达式的知识,本篇我们一起来学习一下关于Struts2标签的使用,包括:基础标签:property.set.bean.include:判断标签:if el ...

  7. PHPCMS二次开发——对栏目可用 limit 限定获取

    为了实现类似用limit调用栏目,故自定义了mylimit(这里不能用limit,因为系统在解析的时候会覆盖,所以自定义的limit就起不到作用) 参数,例如: {pc:content  action ...

  8. Ceres Solver for android

        最近开发中,需要对图片做一些处理与线性技术,这时就用到了Ceres Solver.如何把Ceres Solver集成到Android里呢? 官网给了一个解决方案,简洁明了:   Downloa ...

  9. C语言::模拟实现strlen函数

    题目要求 编写一个C语言程序模拟实现strlen函数. 算法 strlen函数功能是计算字符串中字符的个数.(除\0外) 而字符串本身就是一个字符数组,只不过末尾以\0结束. 因此,我们只需遍历除\0 ...

  10. 一个web应用的诞生(10)--关注好友

    下面回到首页中,使用一个账户登录,你肯定已经注意到了这里的内容: 没错,现在都是写死的一些固定信息,其中分享数量很容易就可以获取,只需要修改首页模板: <p class="text-m ...