javascript this 的工作原理
JavaScript 有一套完全不同于其它语言的对 this
的处理机制。 在五种不同的情况下 ,this
指向的各不相同。
1.全局范围内
当在全部范围内使用 this
,它将会指向全局对象。
2.函数调用
foo(); 这里的this,也指向全局对象。
3.方法调用
var test = {}; test.foo = function(){ console.log( this === test ); // true } test.foo(); // 这里this指的是test
4.调用构造函数
var Foo = function(name){ this.name = name; //这里的this指的是通过new关键字创建的实例对象 } var foo = new Foo("Mr.枫"); console.log(foo.name); //Mr.枫
5.显式的设置 this
var bar = {}; function foo(a, b, c) { console.log(this === bar); // true } foo.call(bar, 1, 2, 3); foo.apply(bar, [1, 2, 3]);
当使用 Function.prototype
上的 call
或者 apply
方法时,函数内的 this
将会被 显式设置为函数调用的第一个参数。
注意:
在对象的字面声明语法中,this
不能用来指向对象本身。
eg:
var obj = { me : this }
这里的 obj.me 不会指向 obj 指向的是这段代码的当前作用域下的this,若在浏览器中运行,指向的是window对象。
常见误解:
1.第二个规则,也就是直接调用函数时,this
指向全局对象,被认为是JavaScript语言一个错误设计的地方,因为它从来就没有实际的用途。
Foo.method = function() { function test() { // this 将会被设置为全局对象(译者注:浏览器环境中也就是 window 对象) } test(); }
一个常见的误解是 test
中的 this
将会指向 Foo
对象,实际上不是这样子的。
为了在 test
中获取对 Foo
对象的引用,我们需要在 method
函数内部创建一个局部变量指向 Foo
对象。
Foo.method = function() { var that = this; function test() { // 使用 that 来指向 Foo 对象 } test(); }
that
只是我们随意起的名字,不过这个名字被广泛的用来指向外部的 this
对象。
2.另一个看起来奇怪的地方是函数别名,也就是将一个方法赋值给一个变量。
var test = someObject.methodTest;// 将方法赋值给变量test test();
上例中,test
就像一个普通的函数被调用;因此,函数内的 this
将不再被指向到 someObject
对象。
javascript this 的工作原理的更多相关文章
- JavaScript定时器的工作原理(翻译)
JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...
- 我们应该如何去了解JavaScript引擎的工作原理
“读了你的几篇关于JS(变量对象.作用域.上下文.执行代码)的文章,我个人觉得有点抽象,难以深刻理解.我想请教下通过什么途径能够深入点的了解javascript解析引擎在执行代码前后是怎么工作的,ec ...
- 【转】我们应该如何去了解JavaScript引擎的工作原理
原文地址:http://www.nowamagic.net/librarys/veda/detail/1579 昨天收到一封来自深圳的一位前端童鞋的邮件,邮件内容如下(很抱歉,未经过他的允许,公开邮件 ...
- JavaScript原型继承工作原理
原型继承的定义 当你阅读关于JS原型继承的解释时,你时常会看到以下这段文字: 当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止.——出自JavaScript秘 ...
- js:我们应该如何去了解JavaScript引擎的工作原理(转)
http://www.nowamagic.net/librarys/veda/detail/1579 昨天收到一封来自深圳的一位前端童鞋的邮件,邮件内容如下(很抱歉,未经过他的允许,公开邮件内容,不过 ...
- 浏览器中“JavaScript解析器”工作原理
浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的“JavaScript解析器”开始工作. JavaScript解析器工作步骤: 1.“找一些东西”: v ...
- JavaScript引擎的工作原理
http://my.oschina.net/fuckBAT/blog/318355?fromerr=jK6wCh1p#OSC_h4_4
- 我们应该如何去了解JavaScript引擎的工作原理 系列
http://www.nowamagic.net/librarys/veda/detail/1579
- JavaScript的工作原理:解析、抽象语法树(AST)+ 提升编译速度5个技巧
这是专门探索 JavaScript 及其所构建的组件的系列文章的第 14 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...
随机推荐
- android SurfaceView绘制实现原理解析
在Android系统中,有一种特殊的视图,称为SurfaceView,它拥有独立的绘图表面,即它不与其宿主窗口共享同一个绘图表面.由于拥有独立的绘图表面,因此SurfaceView的UI就可以在一个独 ...
- 一个简单的基于 DirectShow 的播放器 1(封装类)
DirectShow最主要的功能就是播放视频,在这里介绍一个简单的基于DirectShow的播放器的例子,是用MFC做的,今后有机会可以基于该播放器开发更复杂的播放器软件. 注:该例子取自于<D ...
- RHEL 6 mdadm 实现Soft Raid
环境:RHEL 6.9 x64 1.mdadm命令用于管理系统软件RAID硬盘阵列 格式为:"mdadm [模式] <RAID设备名称> [选项] [成员设备名称]". ...
- 如何让DIV中的文字垂直居中
var h = $("div").innerHeight(); $("#text").css("font-size", h); $(&quo ...
- SpringBoot yml 配置
1. 在 spring boot 中,有两种配置文件,一种是application.properties,另一种是application.yml,两种都可以配置spring boot 项目中的一些变量 ...
- Gradle初探
(一):创建一个Gradle项目 1. 环境准备 1.1. 先上Gradle官网下载最新版的程序,地址:https://gradle.org/gradle-download/. 1.2. 配置环境变量 ...
- Day5_协程函数_面向过程
def func(count): while True: yield count count +=1 #这是一个生成器,需要利用next()来执行. func(10) #yield: #1.把函数的执 ...
- Spring Boot实战:模板引擎
虽然现在很多开发,都采用了前后端完全分离的模式,即后端只提供数据接口,前端通过AJAX请求获取数据,完全不需要用的模板引擎.这种方式的优点在于前后端完全分离,并且随着近几年前端工程化工具和MVC框架的 ...
- HTML 学习笔记 day three
HTML学习笔记 Day three 7.2插入多媒体元素 插入音乐 语法结构:<embed src=”音乐文件的路径”></embed> 属性: Autostart:他只有 ...
- AUTOSAR-关于配置文件的思考
基于Can: 1. Can_Cfg.h contains compile time configurations. It should be included by Can.h which is sp ...