前  言

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指向问题的小内容对大家有一点点帮助吧,,毕竟我也是一个初入江湖的小菜鸟啊!!

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. php的mysql语句里变量加不加单引号问题

    第一种[{$_GET['id']}加不加单引号都能正常执行没问题] $sql = "select * from `news` where `id` = {$_GET['id']}" ...

  2. jQuery高级Ajax

    .load();加载远程的HTML文件代码,并插入到指定的DOM节点中.可以只传入一个参数,表示加载一个静态的HTML代码片段. $("#div1").load("loa ...

  3. 【集美大学1411_助教博客】团队作业8——第二次项目冲刺(Beta阶段)

    写在前面的话 此次团队作业8可以拆分成两部分:1.beta阶段冲刺计划安排,2.7天敏捷冲刺."我们很低调"没有使用leangoo,经过与张老师的商议,张老师同意他们不使用lean ...

  4. Beta阶段项目复审

    复审人:王李焕 六指神功:http://www.cnblogs.com/teamworkers/ wt.dll:http://www.cnblogs.com/TeamOf/ 六个核桃:http://w ...

  5. 201521123029《Java程序设计》第八周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 答: 2. 书面作业 本次作业题集集合 1.List中指定元素的删除( ...

  6. 201521123097《Java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1.clone方法 1.1 Object对 ...

  7. 201521123059 《Java程序设计》第三周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  8. 201521123067 《Java程序设计》第11周学习总结

    201521123067 <Java程序设计>第11周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线 ...

  9. java课程设计-猜数游戏(201521123029 郑佳明)

    1.团队课程设计博客链接 http://www.cnblogs.com/m1ng123/p/7056740.html 2.个人负责模板或任务说明 猜数运行3个主界面即相关功能 玩家信息存储的play类 ...

  10. Calico 的默认连通性 - 每天5分钟玩转 Docker 容器技术(69)

    前面我们完成了 Calico 网络的部署并运行了容器,今天将讨论 Calico 的连通性. 测试一下 bbox1 与 bbox2 的连通性: ping 成功,数据包流向如下图所示. ① 根据 bbox ...