在 JavaScript 中 this 常常指向方法调用的对象,但有些时候并不是这样的,本文将详细解读在不同的情况下 this 的指向。

一、指向 window:

在全局中使用 this,它将会指向全局对象,因为浏览器中运行的 JavaScript 的全局对象默认为 window,
所以,此时 this 指向 window。

例如:

console.log(this) // 控制台将打印出 window 对象

在全局作用域内的函数调用, this 也会执行 window。

function foo(){
console.log(this);
};
foo(); // 控制台也会打印出 window 对象

此处并不难理解,因为全局对象默认为 window,则 foo() 实质是 window.foo()。

其实,在javascript中函数调用时,this都会指向window对象。看下面的执行结果:

function foo(){
console.log(this);
}; var demo = document.querySelector(".demo"); demo.onclick = foo; //this指向demo元素对象 demo.onclick = function(){
foo(); //this指向window对象
};

注意:在 ES5 中,使用严格模式时,不存在全局变量, 此时 this 将不再指向 window, 而是 undefined 。

二、指向方法调用的对象

在对象的方法调用中,this 指向该方法调用的对象。

var obj = {
getMe: function(){
console.log(this)
}
}; obj.getMe(); // 控制台打印出 obj 对象

三、构造函数内,指向调用构造函数所创建的对象实例:

通常我们会使用 new 关键词调用构造函数创建新的对象实例,此时构造函数内的 this 就会指向这个新创建出来的对象。

如:

//构造函数
function Person(name){
this.name = name;
this.getMe = function(){
console.log(this);
}
}; var joe = new Person("joe"); joe.getMe(); //控制台打印出一个新的名字为 “joe” 的 Person 实例

四、使用函数的 call 或 apply 方法时,this 将会被显式设置为函数调用的第一个参数:

例:

var obj = {
name: "object"
}; function a(){
console.log(this)
}; a.call(obj); //控制台打印出 obj 对象

出现这样的结果是由 call 和 apply 的实现原理决定的,call 和 apply 改变 this 指向的原理是它改变了函数的运行上下文环境。

详解javascript中this的工作原理的更多相关文章

  1. 【转】详解JavaScript中的this

    ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...

  2. (转载)详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  3. HTTPS详解二:SSL / TLS 工作原理和详细握手过程

    HTTPS 详解一:附带最精美详尽的 HTTPS 原理图 HTTPS详解二:SSL / TLS 工作原理和详细握手过程 在上篇文章HTTPS详解一中,我已经为大家介绍了 HTTPS 的详细原理和通信流 ...

  4. 详解 javascript中offsetleft属性的用法(转)

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

  5. 详解javascript中的this对象

    详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...

  6. 详解JavaScript中的原型

    前言 原型.原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己. 最早一篇原型链文章写于2019年07月,那个时候也是费了老大劲才理解到了七八成,到现在 ...

  7. 详解JavaScript中的this

    JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一. 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不 ...

  8. JavaScript中this的工作原理以及注意事项

    在JavaScript中,this 的概念比较复杂.除了在面向对象编程中,this 还是随处可用的.这篇文章介绍了this 的工作原理,它会造成什么样的问题以及this 的相关例子. 要根据this  ...

  9. 【转】详解JavaScript中的异常处理方法

    有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个 ...

随机推荐

  1. 使用 WebStorm IDE 调试 Pomelo 应用程序

    使用得心应手的IDE来开发应用程序,可以使我们的工作事半功倍.而调试则更可以让我们准确的定位BUG,发现问题.本文讲述如何使用 WebStorm 这个怪兽级JavaScript IDE来调试 Chat ...

  2. Linux regulator framework(1) - 概述【转】

    转自蜗窝科技:http://www.wowotech.net/pm_subsystem/regulator_framework_overview.html 1. 前言 Regulator,中文名翻译为 ...

  3. js入门-文本框输入特定内容控制另一个文本框

    在填写表单时,有时需要某些文本框隐藏,当一文本框输入特定内容时才会显示隐藏的文本框,这一功能可以用onchange事件或oninput事件实现.下面对比下两种方法实现的区别: onchange()定义 ...

  4. 【PAT】B1078 字符串压缩与解压(20 分)

    主函数接收下第一个字符,接着一个分支就转到两个函数中的一个 1.压缩简单,只要与下一个一样就只计数,如果不同了就直接输出 2.至于解压不知道数字是几位数,所以我直接用了sscanf,然后判断是几位数字 ...

  5. 02LaTeX学习系列之---TeX环境的搭建

    目录 02Latex的下载与安装及其编译IDE 目录 前言 (一)Tex Live的下载 1. Tex Live官方下载网站: (二)TeXStudio 1.TeXStudio官网下载 2.TeXSt ...

  6. January 20th, 2018 Week 3rd Saturday

    We may encounter many defeats but we must not be defeated. 我们可能会失败很多次,但决不能被打败. As long as we are con ...

  7. python基础 - 控制语句

    判断-if mood = True if mood: print('mood ok'); else: print('mood not OK') if-elif-else if a == 1: pass ...

  8. python2.7.15 + PyQt4部署

    安装python模块首先想到的就是 https://pypi.org/,但在上面下载的PyQt4的包却找不到安装的方法,于是找找试其它方法,下面介绍通过pip安装whl的安装方式 1.先打开 http ...

  9. visual studio code前端插件及常用快捷键【转】

    通用插件 HTML Snippets 超级实用且初级的 H5代码片段以及提示 HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的样式新版已经支持scss文件检 ...

  10. JS获取本周、本季度、本月、上月的开始日期、结束日期

    /** * 获取本周.本季度.本月.上月的开始日期.结束日期 */ var now = new Date();                    //当前日期 var nowDayOfWeek = ...