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. 又拍云叶靖:OpenResty 在又拍云存储中的应用

    2019 年 7 月 6 日,OpenResty 社区联合又拍云,举办 OpenResty × Open Talk 全国巡回沙龙·上海站,又拍云平台开发部负责人叶靖在活动上做了<OpenRest ...

  2. SVG和canvas渲染的性能比较

    1.什么是SVG? 描述: 一种使用XML描述的2D图形的语言 SVG基于XML意味着,SVG DOM中的每个元素都是可用的,可以为某个元素附加Javascript事件处理器. 在 SVG 中,每个被 ...

  3. git常用指令整理

    git常用指令一览表 GIT指令 说明 git add . 将全部文件的内容加到Git索引以便执行commit. 这个指令不会检查文件夹中是否有文件被删除. 要注意的是,只有执行" git ...

  4. Asp.Net Core WebAPI+PostgreSQL部署在Docker中

     PostgreSQL是一个功能强大的开源数据库系统.它支持了大多数的SQL:2008标准的数据类型,包括整型.数值值.布尔型.字节型.字符型.日期型.时间间隔型和时间型,它也支持存储二进制的大对像, ...

  5. 大数据学习之旅2——从零开始搭hadoop完全分布式集群

    前言 本文从零开始搭hadoop完全分布式集群,大概花费了一天的时间边搭边写博客,一步一步完成完成集群配置,所以相信大家按照本文一步一步来完全可以搭建成功.需要注意的是本文限于篇幅和时间的限制,也是为 ...

  6. vue 异步加载远程组件(支持编译less语法)

    本代码已组件化,可以直接使用. 说明:本组件可以直接解析.vue文件,为了支持less语法解析,在组件中引入less.js,可在less官网下载. 组件代码 <template> < ...

  7. Mysql高可用(HA)

    MySQL特点: 1) 开放的源代码的关系型数据库 2) 适应于所有平台 3) 支持多线程,充分利用CPU资源,性能很出色 4) 价格便宜 5) 大数据库能处理5000万条记录. ACID 事务 一组 ...

  8. python报错 TypeError: a() got multiple values for argument 'name'

    [问题现象] 在一次调用修饰函数中出现了问题,折腾了一下午,一直报错 TypeError:  got multiple values for argument 只是很简单的调用 from tsu2Ru ...

  9. DC-2靶机渗透

    靶场下载链接: Download: http://www.five86.com/downloads/DC-2.zip Download (Mirror): https://download.vulnh ...

  10. vue-cli报错:Class constructor FileManager cannot be invoked without 'new'

    bug:vue-cli3开发的项目,今天项目重新下载依赖启动项目的时候出现错误:Class constructor FileManager cannot be invoked without 'new ...