javascript中关于this指向问题详解
前 言
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指向问题详解的更多相关文章
- JavaScript中的鼠标滚轮事件详解
JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...
- JavaScript中typeof和instanceof深入详解
这次主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方. typeof 先来说说typeof吧.首先需要注意的是,typeof方法返回一个字 ...
- JavaScript 中 apply 、call 的详解
apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已. 原文作者:林 ...
- Javascript中的this关键字用法详解
在javascript里面,this是一个特殊的对象,它不像其他编程语言那样,是存储在实例中的值,直接指向此实例. 而是作为一个单独的指针,在不同的情况之下,指向不同的位置,这也是为什么我们会将它搞混 ...
- JavaScript中定义类的方式详解
本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...
- JavaScript中var关键字的使用详解
作用 声明作用:如声明个变量. 语法 ? 1 var c = 1; 省略var 在javascript中,若省略var关键字而直接赋值,那么这个变量为全局变量,哪怕是在function里定义的. ? ...
- JavaScript中事件委托(事件代理)详解
在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...
- javascript中6种基本数据类型详解
javascript中有5中数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String,还有一种复杂数据类型——object,object本质是由一组键值 ...
- JavaScript中继承的实现方法--详解
最近看<JavaScript王者归来>中关于实现继承的方法,做了一些小总结: JavaScript中要实现继承,其实就是实现三层含义:1.子类的实例可以共享父类的方法:2.子类可以覆盖父类 ...
随机推荐
- vSphere笔记01~02
Vmware vsphere 虚拟化 云和大数据的底层!!!! 分类 1.开源:openstack:Linux:难(无图形化) nosqleasystack公司 2.企业版本:vsphere sdn! ...
- IPv4子网掩码回顾
子网掩码的介绍: IP协议标准规定:每一个使用子网的节点都选择一个32位的位模式,若位模式中的某位置为1,则对应IP地址中的某位就为网络地址(包括网络部分和子网号)中的一位:若位模式中的某位置0,则对 ...
- Swing-JMenu菜单用法-入门
菜单是Swing客户端程序不可获取的一个组件.窗体菜单大致由菜单栏.菜单和菜单项三部分组成,如下图所示: 由图可见,对于一个窗体,首先要添加一个JMenuBar,然后在其中添加JMenu,在JMenu ...
- 201521123050 《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 代码: public boolean contains(Object o) ...
- 201521123014 《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 1.关于异常上次作业已经概括得差不多了,创建自己的异常时可以使用Java类库中已经定义好的类,也可自定义异常 ...
- 03标准对象-02-RegExp 正则表达式
1.基本概念 和 定义 用一种描述性的语言来给字符串定义一个规则,你可以形象地理解正则表达式是一个"框",凡是符合大小形状条件的字符串,都算是"匹配"了. JS ...
- 《Java从入门到放弃》JavaSE入门篇:练习——单身狗租赁系统
今天,我们要玩个大的!!! 我们把之前使用数组做的这个单身狗系统改版成数据库版本,并且使用面向对象里面的一些简单思想.如果有不知道这个系统的看官,请跳转到目录页,然后再选择单身狗系统(数组版)先围观五 ...
- Maven搭建SpringMVC+MyBatis+Json项目(多模块项目)
一.开发环境 Eclipse:eclipse-jee-luna-SR1a-win32; JDK:jdk-8u121-windows-i586.exe; MySql:MySQL Server 5.5; ...
- eclipse Maven新建一个项目并使用
安装参考这篇博文eclipse配置maven + 创建maven项目(三) 打开pom.xml 试着添加MySQL的JDBC驱动 添加如下配置, <dependency> <g ...
- Android 字体修改,所有的细节都在这里 | 开篇
版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 每周会统一更新到这里,如果喜欢,可关注公众号获取最新文章. 未经允许,不得转载. 序 在 Android 下使 ...