前  言

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出的对象。

    具体例子如下:

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

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

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

编者按

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

javascript中关于this指向问题详解的更多相关文章

  1. JavaScript中的鼠标滚轮事件详解

    JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...

  2. JavaScript中typeof和instanceof深入详解

    这次主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方. typeof 先来说说typeof吧.首先需要注意的是,typeof方法返回一个字 ...

  3. JavaScript 中 apply 、call 的详解

    apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已. 原文作者:林 ...

  4. Javascript中的this关键字用法详解

    在javascript里面,this是一个特殊的对象,它不像其他编程语言那样,是存储在实例中的值,直接指向此实例. 而是作为一个单独的指针,在不同的情况之下,指向不同的位置,这也是为什么我们会将它搞混 ...

  5. JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...

  6. JavaScript中var关键字的使用详解

    作用 声明作用:如声明个变量. 语法 ? 1 var c = 1; 省略var 在javascript中,若省略var关键字而直接赋值,那么这个变量为全局变量,哪怕是在function里定义的. ? ...

  7. JavaScript中事件委托(事件代理)详解

    在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...

  8. javascript中6种基本数据类型详解

    javascript中有5中数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String,还有一种复杂数据类型——object,object本质是由一组键值 ...

  9. JavaScript中继承的实现方法--详解

    最近看<JavaScript王者归来>中关于实现继承的方法,做了一些小总结: JavaScript中要实现继承,其实就是实现三层含义:1.子类的实例可以共享父类的方法:2.子类可以覆盖父类 ...

随机推荐

  1. vSphere笔记01~02

    Vmware vsphere 虚拟化 云和大数据的底层!!!! 分类 1.开源:openstack:Linux:难(无图形化) nosqleasystack公司 2.企业版本:vsphere sdn! ...

  2. IPv4子网掩码回顾

    子网掩码的介绍: IP协议标准规定:每一个使用子网的节点都选择一个32位的位模式,若位模式中的某位置为1,则对应IP地址中的某位就为网络地址(包括网络部分和子网号)中的一位:若位模式中的某位置0,则对 ...

  3. Swing-JMenu菜单用法-入门

    菜单是Swing客户端程序不可获取的一个组件.窗体菜单大致由菜单栏.菜单和菜单项三部分组成,如下图所示: 由图可见,对于一个窗体,首先要添加一个JMenuBar,然后在其中添加JMenu,在JMenu ...

  4. 201521123050 《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 代码: public boolean contains(Object o) ...

  5. 201521123014 《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 1.关于异常上次作业已经概括得差不多了,创建自己的异常时可以使用Java类库中已经定义好的类,也可自定义异常 ...

  6. 03标准对象-02-RegExp 正则表达式

    1.基本概念 和 定义 用一种描述性的语言来给字符串定义一个规则,你可以形象地理解正则表达式是一个"框",凡是符合大小形状条件的字符串,都算是"匹配"了. JS ...

  7. 《Java从入门到放弃》JavaSE入门篇:练习——单身狗租赁系统

    今天,我们要玩个大的!!! 我们把之前使用数组做的这个单身狗系统改版成数据库版本,并且使用面向对象里面的一些简单思想.如果有不知道这个系统的看官,请跳转到目录页,然后再选择单身狗系统(数组版)先围观五 ...

  8. Maven搭建SpringMVC+MyBatis+Json项目(多模块项目)

    一.开发环境 Eclipse:eclipse-jee-luna-SR1a-win32; JDK:jdk-8u121-windows-i586.exe; MySql:MySQL Server 5.5; ...

  9. eclipse Maven新建一个项目并使用

      安装参考这篇博文eclipse配置maven + 创建maven项目(三)  打开pom.xml 试着添加MySQL的JDBC驱动 添加如下配置, <dependency> <g ...

  10. Android 字体修改,所有的细节都在这里 | 开篇

    版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 每周会统一更新到这里,如果喜欢,可关注公众号获取最新文章. 未经允许,不得转载. 序 在 Android 下使 ...