首页 技术 正文
技术 2022年11月16日
0 收藏 626 点赞 4,373 浏览 1571 个字

  前  言

LiuDaP

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

  

一、this的指向原理

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

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

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

  (2)、this指向的永远只可能是对象,而不是函数。

  (3)、this指向的对象,叫做函数的上下文,也叫函数的content,还叫函数的调用者。

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

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

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

    具体例子如下:

 function func(){
this.name="wangwu";
console.log(this);
}
func(); //通过func()调用的,this永远指向window。

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

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

    具体例子如下:

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

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

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

    具体例子如下:

 function func(){
this.name="wangwu";
console.log(this);
}
var obj={
name:"zhangsan",
func:func
}
//通过对象.方法调用的,this指向这个对象
obj.func(); //狭义对象,指向obj。

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

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

    具体例子如下:

 function func(){
this.name="wangwu";
console.log(this);
}
var arr=[1,2,3,func,4,5,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指向问题的小内容对大家有一点点帮助吧,,毕竟我也是一个初入江湖的小菜鸟啊!!

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,488
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,903
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,736
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,487
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,127
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,289