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 对象。

时间: 2024-08-01 06:31:10

javascript this 的工作原理的相关文章

我们应该如何去了解JavaScript引擎的工作原理

我们应该如何去了解JavaScript引擎的工作原理 JavaScript探秘:编写可维护的代码的重要性 JavaScript探秘:谨慎使用全局变量 JavaScript探秘:var预解析与副作用 JavaScript探秘:for循环(for Loops) JavaScript探秘:for-in循环(for-in Loops) JavaScript探秘:Prototypes强大过头了 JavaScript探秘:eval()是"魔鬼" JavaScript探秘:用parseInt()进行

JavaScript引擎的工作原理

(转) 1. 什么是JavaScript解析引擎? 简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序.比方说,当你写了 var a = 1 + 1; 这样一段代码,JavaScript引擎做的事情就是看懂(解析)你这段代码,并且将a的值变为2. 学过编译原理的人都知道,对于静态语言来说(如Java.C++.C),处理上述这些事情的叫编译器(Compiler),相应地对于JavaScript这样的动态语言则叫解释器(Interpre

如何去了解JavaScript引擎的工作原理

js:我们应该如何去了解JavaScript引擎的工作原理(转) http://www.nowamagic.net/librarys/veda/detail/1579 昨天收到一封来自深圳的一位前端童鞋的邮件,邮件内容如下(很抱歉,未经过他的允许,公开邮件内容,不过我相信其他人肯定也有同样的问题,所以,直接把问题原文抛出来): "读了你的几篇关于JS(变量对象.作用域.上下文.执行代码)的文章,我个人觉得有点抽象,难以深刻理解.我想请教下通过什么途径能够深入点的了解javascript解析引擎在

JavaScript原型的工作原理(以及如何利用它来实现类的继承)

各位先看一下下面的题目,看看能否给出答案以及真正了解原因. #include "stdio.h" #include "string.h" #include "malloc.h" void swap(int a,int b){ int temp; temp = a; a = b; b = temp; } int get_int(int a){ int i = 1 + a; return i; } char* get_memory0(){ char

JavaScript的计时器的工作原理

最近都在看一些JavaScript原理层面的文章,恰巧看到了jQuery的作者的一篇关于JavaScript计时器原理的解析,于是诚惶诚恐地决定把原文翻译成中文,一来是为了和大家分享,二来是为了加深自己对于JavaScript的理解.原文链接:http://ejohn.org/blog/how-javascript-timers-work/ 原文翻译: 从基础层面来讲,理解JavaScript计时器的工作原理是很重要的.由于JavaScript是单线程的,所以很多时候计时器并不是表现得和我们的直

How Javascript works (Javascript工作原理) (一) 引擎,运行时,函数调用栈

个人总结: 这篇文章对JS底层的工作原理进行了介绍. 原文:https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf 一.引擎,运行时,调用堆栈 这是 JavaScript 工作原理的第一章.本章会对语言引擎,运行时,调用栈做一个概述. 事实上,有很多开发者在每天日常开发中都会使用 JavaScript 但是却不了解其底层的知识. 概述 几乎所有人都已经听说过 V8 引擎的概念,并且很多人

JavaScript的工作原理:解析、抽象语法树(AST)+ 提升编译速度5个技巧

这是专门探索 JavaScript 及其所构建的组件的系列文章的第 14 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! JavaScript 是如何工作的:深入V8引擎&编写优化代码的5个技巧! JavaScript 是如何工作的:内存管理+如何处理4个常见的内存泄漏 ! JavaScript 是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式! JavaScript 是如何工作的:

javascript引擎工作原理

1. 什么是JavaScript解析引擎? 简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序.比方说,当你写了 var a = 1 + 1; 这样一段代码,JavaScript引擎做的事情就是看懂(解析)你这段代码,并且将a的值变为2. 学过编译原理的人都知道,对于静态语言来说(如Java.C++.C),处理上述这些事情的叫编译器(Compiler),相应地对于JavaScript这样的动态语言则叫解释器(Interpreter)

JavaScript工作原理

HTML代码所表示的文档是一种静态文档,几乎没有交互功能,很难使页面成为动态页面.增加脚本语言,可使数据发送到服务器之前先进行处理和校验,动态地创建新的Web内容,更重要的是,引入脚本语言使我们有了事件驱动的软件开发环境. (1)JavaScript简介 JavaScript的原名叫LiveScript,是NetScape公司在引入Sun公司有关Java的程序设计概念后,重新设计而更名的.JavaScript是一种可以嵌入HTML文档的,基于对象并具有某些面向对象特征的脚本语言. 说明:浏览器端