javascript中关于this指向问题详解

前言

LiuDaP

　　　在前端的学习中，我们必然要用到js，js可以说是前端必不可少的的东西。在学习js的过程中，我们会经常用到this这个东西，而this的指向问题就变得尤为重要。今天正好有空闲时间，就给大家详细介绍一下js中关于this的指向问题，希望能够帮助到大家。

一、this的指向原理

　>>>仅仅一条就是：谁最终调用函数，this就指向谁。。

下面给大家做一下详细的解释：

　　（1）、this到底指向谁，不应该考虑函数在哪声明，而是应该考虑函数在什么地方调用

　　（2）、this指向的永远只可能是对象，而不是函数。

　　（3）、this指向的对象，叫做函数的上下文，也叫函数的content，还叫函数的调用者。

二、总结几条关于this指向问题的规律

　　>>>注意：以下几条规律特别好用，如果必要的话可以直接背过。

　　1、通过函数名()调用的函数，this永远指向window。

　　　　具体例子如下：

1 function func(){
2     this.name="wangwu";
3     console.log(this);
4 }
5 func(); //通过func()调用的，this永远指向window。

　　>>>以下代码直接通过func()调用函数，则this指向window对象。

　　2、函数作为window内置函数的回掉函数使用，this指向window。例如：setInterval setTimeout等。

　　　　具体例子如下：

1 function func(){
2     this.name="wangwu";
3     console.log(this);
4 }
5 //函数作为window内置函数的回掉函数使用，this指向window。
6 setTimeout(func,1000);

　　>>>以上代码，func直接作为setTimeout的回掉函数使用，则this指向window对象。

　　3、通过对象.方法调用函数，则this指向这个对象。

　　　　具体例子如下：

 1 function func(){
 2     this.name="wangwu";
 3     console.log(this);
 4 }
 5 var obj={
 6     name:"zhangsan",
 7     func:func
 8 }
 9 //通过对象.方法调用的，this指向这个对象
10 obj.func(); //狭义对象，指向obj。

　　>>>以上代码，通过obj.func()进行调用，this指向这个obj。

　　4、函数作为数组中的一个元素，用数组下标进行调用的，this指向这个数组

　　　　具体例子如下：

1 function func(){
2     this.name="wangwu";
3     console.log(this);
4 }
5 var arr=[1,2,3,func,4,5,6]; //此时函数作为数组中第四个元素
6 arr[3](); //直接用数组的下标调用函数，此时this指向arr。

　　>>>以上代码，func作为数组arr中的元素，通过arr[3]()进行调用，this指向arr

　　5、函数作为一个构造函数，使用new关键字进行调用，this指向用new关键字new出的对象。

　　　　具体例子如下：

function func(){this.name="wangwu";console.log(this);
}
var obj=new func(); //此时通过new关键字进行调用，this指向obj这个新new出的对象

　　>>>以上代码，通过new关键字进行函数的调用，最终this指向这个新new出的对象

　　this的指向问题，最终的内容就是这么多，虽然看起来很简单，但是真正遇到问题的时候也会有让人为难的时候。

编者按

　　我们都是在这条路上奔跑着的孩子，让我们相互学习，共同努力吧！！！希望今天这点儿关于js中this指向问题的小内容对大家有一点点帮助吧，，毕竟我也是一个初入江湖的小菜鸟啊！！

转载于:https://www.cnblogs.com/interesting-me/p/7670042.html

javascript中关于this指向问题详解相关推荐

php中this的使用技巧,JavaScript中this关键字使用方法详解
JavaScript中this关键字使用方法详解在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了 ...
JavaScript 中 apply 、call 的详解
apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已. 原文作者:林 ...
深入浅出 JavaScript 中的For循环之详解
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 公众号回复[ 加群 ],与大佬们一起成长- 今天我想分享一个有关于循环筛选的知识点,也许是前端小白 ...
JavaScript中this关键字使用方法详解
在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了,用起来是非常方便和意义确定的.JavaScrip ...
JavaScript 中的 this 与闭包详解
JavaScript 中的 this 一.什么是 this ? 在 JavaScript 中 this 关键字一般指的是函数调用时所在的环境上下文 ,存储了环境上下文对象的内存地址 ,根据函数 ...
bootstraptable 加载完成回调函数_牛皮了！头一次见有大佬把「JavaScript中的回调函数」详解得如此清晰明了...
前言 callback,大家都知道是回调函数的意思.但是你对这个概念应该是模模糊糊.比如Ajax,你只知道去调用返回函数,如果对callback没有理解清楚,估计你在学习Node.js后会崩溃,因为c ...
javascript中window.event事件用法详解
前两天写程序时因为要用到javascript中的window.event事件,于是就在网上搜了一下,终于找到一篇不错的文章,来与大家分享下: 描述 event代表事件的状态,例如触发event对 ...
JavaScript中window.open用法实例详解
本文较为详细的分析了JavaScript中window.open用法.分享给大家供大家参考.具体如下: 复制代码代码如下: <script LANGUAGE="javascript& ...
JavaScript中var关键字的使用详解
作用声明作用:如声明个变量. 语法 ? 1 var c = 1; 省略var在javascript中,若省略var关键字而直接赋值,那么这个变量为全局变量,哪怕是在function里定义的. ? 1 ...

javascript中关于this指向问题详解

>>>仅仅一条就是：谁最终调用函数，this就指向谁。。

编者按

javascript中关于this指向问题详解相关推荐

最新文章

热门文章