详解javascript中this的工作原理
在 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的工作原理的更多相关文章
- 【转】详解JavaScript中的this
ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...
- (转载)详解Javascript中prototype属性(推荐)
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- HTTPS详解二:SSL / TLS 工作原理和详细握手过程
HTTPS 详解一:附带最精美详尽的 HTTPS 原理图 HTTPS详解二:SSL / TLS 工作原理和详细握手过程 在上篇文章HTTPS详解一中,我已经为大家介绍了 HTTPS 的详细原理和通信流 ...
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- 详解javascript中的this对象
详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...
- 详解JavaScript中的原型
前言 原型.原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己. 最早一篇原型链文章写于2019年07月,那个时候也是费了老大劲才理解到了七八成,到现在 ...
- 详解JavaScript中的this
JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一. 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不 ...
- JavaScript中this的工作原理以及注意事项
在JavaScript中,this 的概念比较复杂.除了在面向对象编程中,this 还是随处可用的.这篇文章介绍了this 的工作原理,它会造成什么样的问题以及this 的相关例子. 要根据this ...
- 【转】详解JavaScript中的异常处理方法
有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个 ...
随机推荐
- 使用 WebStorm IDE 调试 Pomelo 应用程序
使用得心应手的IDE来开发应用程序,可以使我们的工作事半功倍.而调试则更可以让我们准确的定位BUG,发现问题.本文讲述如何使用 WebStorm 这个怪兽级JavaScript IDE来调试 Chat ...
- Linux regulator framework(1) - 概述【转】
转自蜗窝科技:http://www.wowotech.net/pm_subsystem/regulator_framework_overview.html 1. 前言 Regulator,中文名翻译为 ...
- js入门-文本框输入特定内容控制另一个文本框
在填写表单时,有时需要某些文本框隐藏,当一文本框输入特定内容时才会显示隐藏的文本框,这一功能可以用onchange事件或oninput事件实现.下面对比下两种方法实现的区别: onchange()定义 ...
- 【PAT】B1078 字符串压缩与解压(20 分)
主函数接收下第一个字符,接着一个分支就转到两个函数中的一个 1.压缩简单,只要与下一个一样就只计数,如果不同了就直接输出 2.至于解压不知道数字是几位数,所以我直接用了sscanf,然后判断是几位数字 ...
- 02LaTeX学习系列之---TeX环境的搭建
目录 02Latex的下载与安装及其编译IDE 目录 前言 (一)Tex Live的下载 1. Tex Live官方下载网站: (二)TeXStudio 1.TeXStudio官网下载 2.TeXSt ...
- January 20th, 2018 Week 3rd Saturday
We may encounter many defeats but we must not be defeated. 我们可能会失败很多次,但决不能被打败. As long as we are con ...
- python基础 - 控制语句
判断-if mood = True if mood: print('mood ok'); else: print('mood not OK') if-elif-else if a == 1: pass ...
- python2.7.15 + PyQt4部署
安装python模块首先想到的就是 https://pypi.org/,但在上面下载的PyQt4的包却找不到安装的方法,于是找找试其它方法,下面介绍通过pip安装whl的安装方式 1.先打开 http ...
- visual studio code前端插件及常用快捷键【转】
通用插件 HTML Snippets 超级实用且初级的 H5代码片段以及提示 HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的样式新版已经支持scss文件检 ...
- JS获取本周、本季度、本月、上月的开始日期、结束日期
/** * 获取本周.本季度.本月.上月的开始日期.结束日期 */ var now = new Date(); //当前日期 var nowDayOfWeek = ...