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. gRPC的简单使用

    目录 前言 gRPC的简单介绍 基本用法 服务的定义 服务端代码编写 客户端代码编写 运行效果 服务治理(注册与发现) .NET Core 2.x 和 .NET Core 3.0的细微区别 扩展阅读 ...

  2. abc -- 牛客

    题目描述 设a.b.c均是0到9之间的数字,abc.bcc是两个三位数,且有:abc+bcc=532.求满足条件的所有a.b.c的值. 输入描述: 题目没有任何输入. 输出描述: 请输出所有满足题目条 ...

  3. Spring 2017 Assignments1

    一.作业要求 原版:http://cs231n.github.io/assignments2017/assignment1/ 翻译:http://www.mooc.ai/course/268/lear ...

  4. Appium+python自动化(三十二)- 代码写死一时爽,框架重构火葬场 - PageObject+unittest(超详解)

    简介 江湖有言:”代码写死一时爽,框架重构火葬场“,更有人戏言:”代码动态一时爽,一直动态一直爽

  5. StudyAndroid.2 Activity生命周期

    onCreate(): 当我们点击activity的时候,系统会调用activity的oncreate()方法,在这个方法中我们会初始化当前布局setContentLayout()方法. onStar ...

  6. Feign详细构建过程及自定义扩展

    探究清楚 feign 的原理,自定义 feign 功能 **spring-cloud-openfeign-core-2.1.1.RELEASE.jar** 中 **HystrixFeign** 的详细 ...

  7. Scrapy框架解读

    1. Scrapy组件a. 主体部分i. 引擎(Scrapy):处理整个系统的数据流处理,触发事务(框架核心)ii. 调度器(Scheduler):1) 用来接受引擎发过来的请求, 压入队列中, 并在 ...

  8. js 分享一个 时钟效果

    <style>        *{            margin: 0;            padding: 0;        }        #outLine{       ...

  9. Vue仿微信app页面跳转动画

    10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...

  10. 《Effective Java第二版》总结

    第1条:考虑用静态工厂方法代替构造器 通常我们会使用 构造方法 来实例化一个对象,例如: // 对象定义 public class Student{ // 姓名 private String name ...