javaScript中的this关键字解析
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关键字解析的更多相关文章
- Java中的static关键字解析
Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键 ...
- Java中的static关键字解析 转载
原文链接:http://www.cnblogs.com/dolphin0520/p/3799052.html Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到 ...
- 转载 深入理解JavaScript中的this关键字
转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字 1. 一 ...
- Java中的static关键字解析(转自海子)__为什么main方法必须是static的,因为程序在执行main方法的时候没有创建任何对象,因此只有通过类名来访问。
Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键 ...
- JavaScript中的this关键字的用法和注意点
JavaScript中的this关键字的用法和注意点 一.this关键字的用法 this一般用于指向对象(绑定对象); 01.在普通函数调用中,其内部的this指向全局对象(window); func ...
- 【Java学习笔记之十五】Java中的static关键字解析
Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键 ...
- 【转】Java中的static关键字解析
一.static关键字的用途 在<Java编程思想>P86页有这样一段话: “static方法就是没有this的方法.在static方法内部不能调用非静态方法,反过来是可以的.而且可以在没 ...
- [ 转载 ] Java基础4--Java中的static关键字解析
Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键 ...
- 如何理解JavaScript中的this关键字
前言 王福朋老师的 JavaScript原型和闭包系列 文章看了不下三遍了,最为一个初学者,每次看的时候都会有一种 "大彻大悟" 的感觉,而看完之后却总是一脸懵逼.原型与闭包 可以 ...
随机推荐
- 43-Identity MVC:UI
1-打开之前写的MvcCookieAuthSample项目, 在AccountController新加Register,Login方法 public class AccountController : ...
- python2.7练习小例子(二十五)
25):题目:有5个人坐在一起,问第五个人多少岁?他说比第4个人大2岁.问第4个人岁数,他说比第3个人大2岁.问第三个人,又说比第2人大两岁.问第2个人,说比第一个人大两岁.最后问第一个人,他 ...
- MinGW安装图文教程以及如何配置C语音编程环境
MinGW安装图文教程以及如何配置C语音编程环境 转载自:http://www.jb51.net/softjc/192017.html MinGW 是一组包含文件和端口库,其功能是允许控制台模式的程序 ...
- Borland和Micorsoft的对话(转载自月光软件网)
Borland与Microsoft关于Delphi的对话 Bear 1.Delphi较贵 一套Delphi的价格大约相当于两套Visual Studio ------------------- ...
- 孤荷凌寒自学python第七十一天开始写Python的第一个爬虫
孤荷凌寒自学python第七十一天开始写Python的第一个爬虫 (完整学习过程屏幕记录视频地址在文末) 在了解了requests模块和BeautifulSoup模块后,今天开始真正写一个自己的爬虫代 ...
- Tensorflow Serving介绍及部署安装
TensorFlow Serving 是一个用于机器学习模型 serving 的高性能开源库.它可以将训练好的机器学习模型部署到线上,使用 gRPC 作为接口接受外部调用.更加让人眼前一亮的是,它支持 ...
- 平衡二叉树(AVL Tree)
在学习算法的过程中,二叉平衡树是一定会碰到的,这篇博文尽可能简明易懂的介绍下二叉树的相关概念,然后着重讲下什么事平衡二叉树. (由于作图的时候忽略了箭头的问题,正常的树一般没有箭头,虽然不影响描述的过 ...
- React错误总结解决方案(二)
1.React native: Cannot add a child that doesn't have a YogaNode or parent node 该错误一般是因为render方法中注释语句 ...
- 并查集——poj2236(带权并查集)
题目:Wireless Network 题意:给定n台已损坏计算机的位置和计算机最远通信距离d,然后分别根据命令执行以下两种操作: "O p" (1 <= p <= N ...
- Jlink 软件断点和硬件断点
调试2440 RAM拷贝至SDRAM遇到的问题 汇编代码主要是初始化一些寄存器,关狗,初始化时钟,初始化存储管理器以便访问内存,然后将SoC上4k RAM数据拷贝至SDRAM,然后在SRAM里面运行, ...