this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要。接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解,希望能给到大家一些启示,权当交流之用。

全局作用域中的this

首先,看下面这行代码:

console.log(this); // Window全局对象

在浏览器中执行上面的语句后,我们将得到一个Window对象,这是一个全局对象。在全局作用域内,我们可以通过this访问到所有的全局属性。如下代码所示:

var a = 1;
console.log(this.a); //

函数作用域中的this

现在,我们将this关键字放到函数作用域中,测试代码如下:

var a = 1;
function test(){
var a = 2;
console.log(this.a); //
}
test();

我们可以看到此时打印出来的结果仍然是1,也就是说这时候this指向的还是全局对象。

这里也可以澄清的是,this并没有指向函数作用域(或者说是并没有指向函数作用域链中的活动对象),那么this是否会指向函数本身呢,我们接着来看下面一个例子:

var a = 1;
function test(){
var a = 2;
console.log(this.a); //
}
test.a = 3;
test();

通过上面的例子,我们知道this也并未指向函数本身。上面的例子中,this最终指向的都是全局对象,那么什么情况下this会指向其他对象呢?

我们再来看下面的例子:

var a = 1;
function test(){
var a = 2;
console.log(this.a); //
}
var obj = {a: 3};
test.call(obj);

上面的例子中this指向了对象obj。

不同函数调用方法下的this

直接调用

var a = 1;
function test(){
console.log(this.a); //
}
test();

很明显,函数被直接调用是this指向的就是全局对象。

作为对象的方法调用

var a = 1;
function test(){
console.log(this.a); //
}
var obj = {a: 2, fn: test};
obj.fn();

当函数作为对象的方法被调用时,this指向当前调用该方法的对象。

作为构造函数调用

var a = 1;
function test(){
this.a = 2;
}
var obj = new test();
console.log(a); //
console.log(obj.a); //

通过上面的代码结果可以看到,全局对象中的属性a并没有被改变,此时this指向该构造函数创建的对象。

通过call或apply方法调用

call和apply都是Function对象的方法,都可以用来动态改变this的指向,达成函数复用的目的。这里笔者不在详细介绍这两个方法,有兴趣的读者可以参考相关文章。需要特别说明的是,这两个方法的第一个参数就是this。由于这两个方法的用法类似,这里我们仅以call方法为例。上例子:

var a = 1;
function test(){
console.log(this.a); //
}
test.call();

call方法的第一个参数是this,在没有实参的情况下,上面例子中this默认指向的对象就是全局对象。

我们再来看一个例子:

var a = 1;
function test(){
console.log(this.a); //
}
var obj = {a: 2, fn: test};
obj.fn.call();

上面的例子进一步证明了,即便使用对象的方法调用call,this默认指向的依旧是全局对象。为了改变this的指向,我们需要显式的传递第一个参数过去,如下代码:

var a = 1;
function test(){
console.log(this.a); //
}
var obj = {a: 2};
test.call(obj);

嵌套函数作用域中的this

文章的最后我们再来看一下嵌套函数中的this引用。示例代码如下:

var a = 1;
function test(){
console.log(this.a); //
function test2(){
console.log(this.a); //
}
test2();
}
var obj = {a: 2, fn: test};
obj.fn();

上面的例子说明,嵌套函数被调用时并没有继承被嵌套函数的this引用,在嵌套函数被调用时,this指向全局对象。

在有些应用中,我们需要在嵌套函数中读取调用被嵌套函数的对象的属性,此时可以声明一个局部变量保存this引用,代码如下所示:

var a = 1;
function test(){
console.log(this.a); //
var self = this;
function test2(){
console.log(self.a); //
}
test2();
}
var obj = {a: 2, fn: test};
obj.fn();

转自:http://www.bkjia.com/webzh/984275.html

javaScript中的this关键字解析的更多相关文章

  1. Java中的static关键字解析

    Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键 ...

  2. Java中的static关键字解析 转载

    原文链接:http://www.cnblogs.com/dolphin0520/p/3799052.html Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到 ...

  3. 转载 深入理解JavaScript中的this关键字

    转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字   1. 一 ...

  4. Java中的static关键字解析(转自海子)__为什么main方法必须是static的,因为程序在执行main方法的时候没有创建任何对象,因此只有通过类名来访问。

    Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键 ...

  5. JavaScript中的this关键字的用法和注意点

    JavaScript中的this关键字的用法和注意点 一.this关键字的用法 this一般用于指向对象(绑定对象); 01.在普通函数调用中,其内部的this指向全局对象(window); func ...

  6. 【Java学习笔记之十五】Java中的static关键字解析

    Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键 ...

  7. 【转】Java中的static关键字解析

    一.static关键字的用途 在<Java编程思想>P86页有这样一段话: “static方法就是没有this的方法.在static方法内部不能调用非静态方法,反过来是可以的.而且可以在没 ...

  8. [ 转载 ] Java基础4--Java中的static关键字解析

    Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键 ...

  9. 如何理解JavaScript中的this关键字

    前言 王福朋老师的 JavaScript原型和闭包系列 文章看了不下三遍了,最为一个初学者,每次看的时候都会有一种 "大彻大悟" 的感觉,而看完之后却总是一脸懵逼.原型与闭包 可以 ...

随机推荐

  1. Hue 工具使用

    Hue 是一个 Web 接口的 Hadoop 分析数据工具,由 Cloudra 公司开源 官方网址 Github 地址 -> 安装方法 文档地址 一.Build 1.ubuntu安装所需环境(以 ...

  2. P2419 [USACO08JAN]牛大赛Cow Contest

    P2419 [USACO08JAN]牛大赛Cow Contest 题目背景 [Usaco2008 Jan] 题目描述 N (1 ≤ N ≤ 100) cows, conveniently number ...

  3. EF更新时出错,An error occurred while updating the entries. See the inner exception for details

           在使用EF进行更新数据时出错,报出的异常是 "An error occurred while updating the entries. See the inner excep ...

  4. js键盘相关知识总结

    一.相应事件 keydown:按下键盘上的任意键都可触发,按着不放则重复触发 keypress:按下键盘上的字符键时触发,按着不放则重复触发 keyup:释放按键时触发 事件顺序:keydown> ...

  5. C++学习008-delete与delete[]的差别

    对于简单的数据类型,delete与delete[]是没啥差别的,就是等价的 例如 int main() { int *pdata = new int[20]; delete pdata; //dele ...

  6. MySQL性能分析和优化-part 1

    MySQL性能优化 平时我们在使用MySQL的时候,怎么评估系统的运行状态,怎么快速定位系统瓶颈,又如何快速解决问题呢? 本文总结了多年来MySQL优化的经验,系统介绍MySQL优化的方法. OS性能 ...

  7. 拉普拉斯矩阵(Laplacian Matrix) 及半正定性证明

    摘自 https://blog.csdn.net/beiyangdashu/article/details/49300479 和 https://en.wikipedia.org/wiki/Lapla ...

  8. AndroidStudio0.5.5发布

    Google%E5%9C%A8%E5%BC%80%E6%BA%90%E4%B8%8A%E7%9A%84%E8%B4%A1%E7%8C%AE http://music.baidu.com/songlis ...

  9. Pro Git - 笔记1

    Getting Started About Version Control Local Version Control Systems Centralized Version Control Syst ...

  10. NOIP 2009 靶形数独(DLX)

    小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向Z 博士请教,Z 博士拿出了他最近发明的“靶形数独”,作 ...