Quiz

请看下面的代码,最后alert出来的是什么呢?(chrome下按F12,选择Console直接复制粘贴运行)

var name = "Bob";

var nameObj ={
name : "Tom",
showName : function(){
alert(this.name);
},
waitShowName : function(){
setTimeout(this.showName, 1000);
}
}; nameObj.waitShowName();

要解决这个问题我们需要了解Javascript的this关键字的用法。

this指向哪里?

一般而言,在Javascript中,this指向函数执行时的当前对象。

In JavaScript, as in most object-oriented programming languages, this is a special keyword that is used within methods to refer to the object on which a method is being invoked.

——jQuery Fundamentals (Chapter 2), by Rebecca Murphey

值得注意,该关键字在Javascript中和执行环境,而非声明环境有关。

The this keyword is relative to the execution context, not the declaration context.

我们举个例子来说明这个问题:

var someone = {
name: "Bob",
showName: function(){
alert(this.name);
}
}; var other = {
name: "Tom",
showName: someone.showName
} other.showName();  //Tom

this关键字虽然是在someone.showName中声明的,但运行的时候是other.showName,所以this指向other.showName函数的当前对象,即other,故最后alert出来的是other.name。

没有明确的当前对象时

当没有明确的执行时的当前对象时,this指向全局对象window。

By default, this refers to the global object.

为什么说是全局对象(the global object),因为非浏览器情况下(例如:nodejs)中全局变量并非window对象,而就是叫"全局变量"(the global object)。不过由于我们这片文章主要讨论的是前端开发知识,所以nodejs就被我们忽略了。

例如对于全局变量引用的函数上我们有:

var name = "Tom";

var Bob = {
name: "Bob",
show: function(){
alert(this.name);
}
} var show = Bob.show;
show();  //Tom

你可能也能理解成show是window对象下的方法,所以执行时的当前对象时window。但局部变量引用的函数上,却无法这么解释:

var name = "window";

var Bob = {
name: "Bob",
showName: function(){
alert(this.name);
}
}; var Tom = {
name: "Tom",
showName: function(){
var fun = Bob.showName;
fun();
}
}; Tom.showName();  //window

setTimeout、setInterval和匿名函数

文章开头的问题的答案是Bob。

在浏览器中setTimeout、setInterval和匿名函数执行时的当前对象是全局对象window,这条我们可以看成是上一条的一个特殊情况。

所以在运行this.showName的时候,this指向了window,所以最后显示了window.name。

浏览器中全局变量可以当成是window对象下的变量,例如全局变量a,可以用window.a来引用。

我们将代码改成匿名函数可能更好理解一些:

var name = "Bob";
var nameObj ={
name : "Tom",
showName : function(){
alert(this.name);
},
waitShowName : function(){
!function(__callback){
__callback();
}(this.showName);
}
}; nameObj.waitShowName();  //Bob

在调用nameObj.waitShowName时候,我们运行了一个匿名函数,将nameObj.showName作为回调函数传进这个匿名函数,然后匿名函数运行时,运行这个回调函数。由于匿名函数的当前对象是window,所以当在该匿名函数中运行回调函数时,回调函数的this指向了window,所以alert出来window.name。

由此看来setTimeout可以看做是一个延迟执行的:

function(__callback){
__callback();
}

setInterval也如此类比。

但如果我们的确想得到的回答是Tom呢?通过一些技巧,我们能够得到想要的答案:

var name = "Bob";
var nameObj ={
name : "Tom",
showName : function(){
alert(this.name);
},
waitShowName : function(){
var that = this;
setTimeout(function(){
that.showName();
}, 1000);
}
}; nameObj.waitShowName();  //Tom

在执行nameObj.waitShowName函数时,我们先对其this赋给变量that(这是为了避免setTimeout中的匿名函数运行时,匿名函数中的this指向window),然后延迟运行匿名函数,执行that.showName,即nameObj.showName,所以alert出正确结果Tom。

eval

对于eval函数,其执行时候似乎没有指定当前对象,但实际上其this并非指向window,因为该函数执行时的作用域是当前作用域,即等同于在该行将里面的代码填进去。下面的例子说明了这个问题:

var name = "window";

var Bob = {
name: "Bob",
showName: function(){
eval("alert(this.name)");
}
}; Bob.showName(); //Bob

apply和call

apply和call能够强制改变函数执行时的当前对象,让this指向其他对象。因为apply和call较为类似,所以我们以apply为例:

var name = "window";

var someone = {
name: "Bob",
showName: function(){
alert(this.name);
}
}; var other = {
name: "Tom"
}; someone.showName.apply(); //window
someone.showName.apply(other); //Tom

apply用于改变函数执行时的当前对象,当无参数时,当前对象为window,有参数时当前对象为该参数。于是这个例子Bob成功偷走了Tom的名字。

new关键字

new关键字后的构造函数中的this指向用该构造函数构造出来的新对象:

function Person(__name){
this.name = __name; //这个this指向用该构造函数构造的新对象,这个例子是Bob对象
}
Person.prototype.show = function(){
alert(this.name);
} var Bob = new Person("Bob");
Bob.show(); //Bob

思考题

1.  请问下面代码会alert出什么,为什么?

var name = "Bob";
var nameObj ={
name : "Tom",
showName : function(){
alert(this.name);
},
waitShowName : function(){
var that = this;
setTimeout(that.showName(), 1000);
}
}; nameObj.waitShowName();//Tom

2.  请问下面代码会alert出什么,为什么?

var fun = new Function("alert(this)");
fun();//[object Window]

3.  下面代码分别在IE和其他浏览器上运行有什么差异,可以用什么方法解决这个差异问题?

IE:

<button id = "box" name = "box">Click Me!</button>

<script>
var name = "window"; function showName(){
alert(this.name);
} document.getElementById("box").attachEvent("onclick", showName);//IE8 下为window,chrome报错
</script>

Others:

<button id = "box" name = "box">Click Me!</button>

<script>
var name = "window"; function showName(){
alert(this.name);
} document.getElementById("box").addEventListener("click", showName, false); // chrome 下为box,IE8报错 </script>

解决办法:

<button id = "box" name = "box">Click Me!</button>
<script>
var name = "window"; function showName(){
alert(this.name);
}
if(document.getElementById("box").attachEvent){
document.getElementById("box").attachEvent("onclick", showName);
}
else{
document.getElementById("box").addEventListener("click", showName,false);
}
</script>

更多:addEventListener()及attachEvent()区别分析

[No000069]Javascript中this关键字详解的更多相关文章

  1. javascript中this关键字详解

    不管学习什么知识,习惯于把自己所学习的知识列成一个list,会有助于我们理清思路,是一个很好的学习方法.强烈推荐. 以下篇幅有点长,希望读者耐心阅读. 以下内容会分为如下部分: 1.涵义 1.1:th ...

  2. javascript中new关键字详解

    和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...

  3. Javascript中prototype属性详解 (存)

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

  4. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  5. 【转载】C/C++中extern关键字详解

    1 基本解释:extern可以置于变量或者函数前,以标示变量或者函数的定义在别的文件中,提示编译器遇到此变量和函数时在其他模块中寻找其定义.此外extern也可用来进行链接指定. 也就是说extern ...

  6. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  7. 【JavaScript中的this详解】

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  8. JavaScript中的this详解

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  9. JS中this关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...

随机推荐

  1. 什么是Servlet?

    HTML只能用来保存静态内容,而通常情况下,静态页面很难满足实际应用的需要,鉴于此,动态页面被引入.所谓动态页面,指的是能够根据不同时间,不同用户而显示不同内容的页面,例如常见的论坛.留言板.电子商务 ...

  2. Runnable和Thread

    1.Runnable是一个接口,当实现该接口时需要复用run方法,在run方法中实现自己的逻辑. 2.Thread是一个类,它其实实现了Runnable方法,也就是说当你通过new 一个Thread得 ...

  3. php实现设计模式之 备忘录模式

    <?php /*备忘录模式:在不破坏封装的前提下,获取对象的内部状态,并且在对象外保存该状态.这样就可以将该对象恢复到保存之前的状态(行为模式) * * 发起人:记录当前时刻的内部状态,负责定义 ...

  4. JMeter专题系列(三)元件的作用域与执行顺序

    1.元件的作用域 JMeter中共有8类可被执行的元件(测试计划与线程组不属于元件),这些元件中,取样器是典型的不与其它元件发生交互作用的元件,逻辑控制器只对其子节点的取样器有效,而其它元件(conf ...

  5. Hadoop2.6.0安装—单机/伪分布

    目录 环境准备 创建hadoop用户 更新apt 配置SSH免密登陆 安装配置Java环境 安装Hadoop Hadoop单机/伪分布配置 单机Hadoop 伪分布Hadoop 启动Hadoop 停止 ...

  6. Storm的ack机制在项目应用中的坑

    正在学习storm的大兄弟们,我又来传道授业解惑了,是不是觉得自己会用ack了.好吧,那就让我开始啪啪打你们脸吧. 先说一下ACK机制: 为了保证数据能正确的被处理, 对于spout产生的每一个tup ...

  7. [翻译]用 Puppet 搭建易管理的服务器基础架构(2)

    我通过伯乐在线翻译了一个Puppet简明教程,一共分为四部分,这是第二部分. 原文地址:http://blog.jobbole.com/87680/ 本文由 伯乐在线 - Wing 翻译,黄利民 校稿 ...

  8. UITableViewHeaderFooterView的封装

    UITableViewHeaderFooterView的封装 特点 1. 封装的 UITableViewHeaderFooterView 能够让用户更好的自定义自己的 headerView; 2. 封 ...

  9. Objective-C Runtime 运行时之四:Method Swizzling

    理解Method Swizzling是学习runtime机制的一个很好的机会.在此不多做整理,仅翻译由Mattt Thompson发表于nshipster的Method Swizzling一文. Me ...

  10. iOS开发工程师面试题(二)

    1.手写冒泡跟插入排序 冒泡排序来源于生活常识,相当于把数组竖起来,轻的向上,重的向下.void bubbleSort(int[] unsorted) { ; i < unsorted.Leng ...