博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js函数中this的指向
阅读量:5356 次
发布时间:2019-06-15

本文共 1632 字,大约阅读时间需要 5 分钟。

本文是我个人对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指的晕头转向!!!

 

 

 

  

转载于:https://www.cnblogs.com/aaronhan1215/p/6755466.html

你可能感兴趣的文章
PKUWC2018 5/6
查看>>
As-If-Serial 理解
查看>>
洛谷P1005 矩阵取数游戏
查看>>
在Silverlight中使用HierarchicalDataTemplate为TreeView实现递归树状结构
查看>>
无线通信基础(一):无线网络演进
查看>>
关于python中带下划线的变量和函数 的意义
查看>>
linux清空日志文件内容 (转)
查看>>
Servlet接收JSP参数乱码问题解决办法
查看>>
Ajax : load()
查看>>
MySQL-EXPLAIN执行计划Extra解释
查看>>
Zookeeper概述
查看>>
Linux自己安装redis扩展
查看>>
luoguP3414 SAC#1 - 组合数
查看>>
图片点击轮播(三)-----2017-04-05
查看>>
直播技术细节3
查看>>
《分布式服务架构:原理、设计于实战》总结
查看>>
java中new一个对象和对象=null有什么区别
查看>>
字母和数字键的键码值(keyCode)
查看>>
IE8调用window.open导出EXCEL文件题目
查看>>
Spring mvc初学
查看>>