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 的工作原理的更多相关文章

  1. JavaScript定时器的工作原理(翻译)

    JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...

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

    “读了你的几篇关于JS(变量对象.作用域.上下文.执行代码)的文章,我个人觉得有点抽象,难以深刻理解.我想请教下通过什么途径能够深入点的了解javascript解析引擎在执行代码前后是怎么工作的,ec ...

  3. 【转】我们应该如何去了解JavaScript引擎的工作原理

    原文地址:http://www.nowamagic.net/librarys/veda/detail/1579 昨天收到一封来自深圳的一位前端童鞋的邮件,邮件内容如下(很抱歉,未经过他的允许,公开邮件 ...

  4. JavaScript原型继承工作原理

    原型继承的定义 当你阅读关于JS原型继承的解释时,你时常会看到以下这段文字: 当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止.——出自JavaScript秘 ...

  5. js:我们应该如何去了解JavaScript引擎的工作原理(转)

    http://www.nowamagic.net/librarys/veda/detail/1579 昨天收到一封来自深圳的一位前端童鞋的邮件,邮件内容如下(很抱歉,未经过他的允许,公开邮件内容,不过 ...

  6. 浏览器中“JavaScript解析器”工作原理

    浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的“JavaScript解析器”开始工作. JavaScript解析器工作步骤: 1.“找一些东西”: v ...

  7. JavaScript引擎的工作原理

    http://my.oschina.net/fuckBAT/blog/318355?fromerr=jK6wCh1p#OSC_h4_4

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

    http://www.nowamagic.net/librarys/veda/detail/1579

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

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 14 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

随机推荐

  1. VT控制码

    VT100 是一个终端类型定义,VT100 控制码是用来在终端扩展显示的代码.比如果终端上任意坐标用 不同的颜色显示字符. 所有的控制符是 \033 打头(即 ESC 的 ASCII 码)用输出字符语 ...

  2. 如何在os x或ubuntu下安装最新的ruby

    os x下基本上可以安装到比较新的ruby,首先先安装rvm,然后用rvm list known看当前可供安装的ruby的版本,不过这也不是绝对的,比如在我的os x 10.9上,命令返回如下: # ...

  3. Oracle12c(12.1)中性能优化&amp;功能增强之通过参数THREADED_EXECTION使用多线程模型

    1.   后台 UNIX/Linux系统上,oracle用多进程模型.例如:linux上一个常规安装的数据库会有如下进程列: $ ps -ef | grep [o]ra_ oracle  15356  ...

  4. Android studio统计项目总行数

    有时候在项目开发中会用到统计项目的总行数功能,今天就教大家如何利用studio进行总行数的统计: 1.打开要统计总行数的项目,按住Ctrl+Shift+A(或者点击导航栏的Help->Find ...

  5. Spring3 MVC使用@ResponseBody的乱码问题及解决办法

    近日用Spring3的MVC写东西,深感其之于Webwork/Struts2的便利,但是在通过@ResponseBody这个annotation输出一个json字符串的时候,发现页面上获得的json字 ...

  6. VS报错 error LNK2005: _DllMain@12 已经在 MSVCRTD.lib(dllmain.obj) 中定义

    链接报错: 错误 33 error LNK2005: _DllMain@12 已经在 MSVCRTD.lib(dllmain.obj) 中定义 E:\客户问题\w_王鹏\EventLibTest_Ti ...

  7. nvm使用笔记

    1.先发个中文博客的链接:http://www.cnblogs.com/kaiye/p/4937191.html 2.安装node版本的命令问题,版本号前面要加v,安装6.9.1的正确命令是: nvm ...

  8. OSG嵌入QT(QT界面使用Qt Designer编辑)

    本文主要内容:使用Qt Designer编辑好QT界面后,将OSG中的ViewerWidget嵌入到QT的Widget中. 在VS中嵌入QT工具,建立QT GUIApplication后,打开自动生成 ...

  9. 【Java入门提高篇】Day16 Java异常处理(上)

    当当当当当当,各位看官,好久不见,甚是想念. 今天我们来聊聊Java里的一个小妖精,那就是异常. 什么是异常?什么是异常处理? 异常嘛,顾名思义就是不正常,(逃),是Java程序运行时,发生的预料之外 ...

  10. 在Windows上安装FFmpeg程序的方法(you-get下载视频必备程序)

    FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进的音频/视频编解码库libavcodec. 该程序 ...