this的指向问题

一、this初识

this是javascript中最复杂的机制之一。它尤为特殊,被自动定义在所有函数的作用域中。这篇文章将浅析this与函数的关系。

二、了解this

学习this的第一步就是明白this既不指向自身也不指向函数本身的词法作用域,而是指向当前行为的执行者,即:哪个函数调用函数,函数里面的this就指向哪个对象。

三、this指向

this的指向要分以下五种情况:

  • 普通函数
  • 自执行函数
  • 事件绑定
  • 构造函数
  • call、apply和bind

1、普通函数

function fn(){
console.log(this);
}
fn();

此时,fn()执行,实际上是window.fn();此时this指向window

function fn(){
console.log(this);
}
var obj = {fn:fn,name:"sean"};
obj.fn();

此时,使用obj调用fn(),此时this指向obj

2、自执行函数

(function(){
console.log(this)
})();

此时,this指向window

再看下面这个代码

var name = "gary";
function fn() {
console.log(this.name);
(function(){
console.log(this.name)
})();
}
var obj = { fn: fn, name: "sean" };
obj.fn();

此时控制台输出

所以,自调用函数的this指向永远指向window

3、事件绑定

  • DOM零级事件
oBtn.onclick = function(){
console.log(this); //this->oBtn
}
  • DOM二级事件
oBtn.addEventListener("click",function(){
console.log(this); //this->oBtn
})

4、构造函数

function Test(name,age){
this.name = name;
this.age = age;
this.print = function(){
console.log(this.name + " " + this.age);
}
}
var t = new Test("sean",22);
t.print();

此时,构造函数中的this,指向的是t这个实例,也就是说,哪个实例执行,this就指向谁

5、call、apply和bind

这一部分在我另一篇文章里,详情戳这里


参考文章


你还没懂this?

javascript中this的指向问题

this指哪儿的更多相关文章

  1. Hive安装配置指北(含Hive Metastore详解)

    个人主页: http://www.linbingdong.com 本文介绍Hive安装配置的整个过程,包括MySQL.Hive及Metastore的安装配置,并分析了Metastore三种配置方式的区 ...

  2. jQuery插件中的this指的是什么

    在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素.这常常会导致开发者误将 ...

  3. 剑指Offer面试题:1.实现Singleton模式

    说来惭愧,自己在毕业之前就该好好看看<剑指Offer>这本书的,但是各种原因就是没看,也因此错过了很多机会,后悔莫及.但是后悔是没用的,现在趁还有余力,把这本书好好看一遍,并通过C#通通实 ...

  4. 剑指Offer面试题:14.链表的倒数第k个节点

    PS:这是一道出境率极高的题目,记得去年参加校园招聘时我看到了3次,但是每次写的都不完善. 一.题目:链表的倒数第k个节点 题目:输入一个链表,输出该链表中倒数第k个结点.为了符合大多数人的习惯,本题 ...

  5. 剑指Offer面试题:17.树的子结构

    一.题目:树的子结构 题目:输入两棵二叉树A和B,判断B是不是A的子结构.例如下图中的两棵二叉树,由于A中有一部分子树的结构和B是一样的,因此B是A的子结构. 该二叉树的节点定义如下,这里使用C#语言 ...

  6. github的pull request是指什么意思?有什么用处

    github的pull request是指什么意思? 来看看某乎某位阿牛的理解,多么的简单粗暴! 我尝试用类比的方法来解释一下 pull reqeust.想想我们中学考试,老师改卷的场景吧.你做的试卷 ...

  7. 项 目 管 理 知 识 体 系 指 南 (PMBOK2008)

    项 目 管 理 知 识 体 系 指 南 (第4版) PMBOK2008 输入 工具与技术 输出 4.项目整合管理 4.1 制定项目章程 4.1.1.1 项目工作说明书 4.1.2.1 专家判断 4.1 ...

  8. JavaScript从数组中删除指定值元素的方法

    本文实例讲述了JavaScript从数组中删除指定值元素的方法.分享给大家供大家参考.具体分析如下: 下面的代码使用了两种方式删除数组的元素,第一种定义一个单独的函数,第二种为Array对象定义了一个 ...

  9. qt qml 九宫格划指锁屏视图

    九宫格划指锁屏视图Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2015-02 [先看效果] [下载] http://download.csdn. ...

  10. 剑指offer——树的子结构 (JAVA代码)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 题目描述: 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构). 解题思路: 首先看牛客网给出的测试用例: ...

随机推荐

  1. Spring aop 影响本地事务的回滚总结

    1  @Before   不会,因为还没执行到service的业务逻辑 2  @ After    默认情况下,报错会影响事务回滚., 当设置@Order属性并设置值优先级大小, 即使报错也不会回滚了 ...

  2. 消息中间件-activemq实战之整合Spring(四)

    前面的理论准备已经很充分,这一节我们来实战:将activemq整合到Spring框架才行中,因为Spring已经集成了JMS,这也为我们配置activermq带来了方便. 1. Spring对jms的 ...

  3. java并发编程(十六)----(线程池)java线程池的使用

    上节我们简单介绍了线程池,这次我们就来使用一下.Executors提供四种线程池,分别是:newCachedThreadPool,newFixedThreadPool ,newScheduledThr ...

  4. 微信小程序如何动态增删class类名达到切换tabel栏的效果

    微信小程序和vue还是有点差别的,要想实现通过动态切换class来达到切换css的效果,请看代码: //wxml页面: <view class="tab"> <v ...

  5. ArrayList用法整理

    System.Collections.ArrayList类是一个特殊的数组.通过添加和删除元素,就可以动态改变数组的长度. 一.优点 1.支持自动改变大小的功能 2.可以灵活的插入元素 3.可以灵活的 ...

  6. 消息中间件——RabbitMQ(三)理解RabbitMQ核心概念和AMQP协议!

    前言 本章学习,我们可以了解到以下知识点: 互联网大厂为什么选择RabbitMQ? RabbiMQ的高性能之道是如何做到的? 什么是AMQP高级协议? AMQP核心概念是什么? RabbitMQ整体架 ...

  7. 自己实现spring核心功能 三

    前言 前两篇已经基本实现了spring的核心功能,下面讲到的参数绑定是属于springMvc的范畴了.本篇主要将请求到servlet后怎么去做映射和处理.首先来看一看dispatherServlet的 ...

  8. python基础知识补充

    set 集合 {} 无序 集合天然去重 增 : s.add s.update 迭代添加 删 : s.pop( ) 随机删除 返回删除值 s.clear( ) 清空 获取到的是 set( ) del s ...

  9. Node.js安装详细步骤教程(Windows版)

    什么是Node.js? 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境: Node.js使用 ...

  10. FineReport - 项目连接Oracle数据库

    FineReport项目连接Oracle数据库 1:打开模板设计器,单击[服务器],选择[定义数据连接]: 2:单击[+],选择[JDBC]; 3:数据库选择[Oracle],驱动器选择[oracle ...