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

全局作用域中的this

首先,看下面这行代码:

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

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

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

函数作用域中的this

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

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

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

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

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

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

我们再来看下面的例子:

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

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

不同函数调用方法下的this

直接调用

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

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

作为对象的方法调用

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

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

作为构造函数调用

  1. var a = 1;
  2. function test(){
  3. this.a = 2;
  4. }
  5. var obj = new test();
  6. console.log(a); //
  7. console.log(obj.a); //

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

通过call或apply方法调用

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

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

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

我们再来看一个例子:

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

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

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

嵌套函数作用域中的this

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

  1. var a = 1;
  2. function test(){
  3. console.log(this.a); //
  4. function test2(){
  5. console.log(this.a); //
  6. }
  7. test2();
  8. }
  9. var obj = {a: 2, fn: test};
  10. obj.fn();

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

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

  1. var a = 1;
  2. function test(){
  3. console.log(this.a); //
  4. var self = this;
  5. function test2(){
  6. console.log(self.a); //
  7. }
  8. test2();
  9. }
  10. var obj = {a: 2, fn: test};
  11. 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. Sqoop的安装配置及使用

    一.Sqoop基础:连接关系型数据库与Hadoop的桥梁 1.1 Sqoop的基本概念 Hadoop正成为企业用于大数据分析的最热门选择,但想将你的数据移植过去并不容易.Apache Sqoop正在加 ...

  2. 7.Mongodb复制(副本集)

    1.复制 什么是复制 复制提供了数据的冗余备份,并在多个服务器上存储数据副本,提高了数据的可用性,并可以保证数据的安全性 复制还允许从硬件故障和服务中断中恢复数据 为什么要复制 数据备份 数据灾难恢复 ...

  3. P2678 跳石头(二分答案)

    P2678 跳石头 题目背景 一年一度的“跳石头”比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间 ...

  4. laravel跨域问题

    // 只有同源策略才允许发送cookies // header('Access-Control-Allow-Credentials:true'); 需要要index.php下开启 最近写登录图形验证码 ...

  5. Win10下Pytorch的安装和使用[斗之力三段]

    简介: 看到paper的代码是用Pytorch实现的,试图理解代码,但是看不懂,只能先学一些基础教程来帮助理解.笔记本电脑配置较低,所以安装一个没有CUDA的版本就可以了.安装完之后,就可以跟着教程边 ...

  6. python之*args和**kwargs参数,以及迭代器

    *args让函数可以接受不限制多个位置参数,**kwargs让函数可以接受不限制多个关键字参数,用法如图 2.迭代器总结

  7. Git&GitHub&GitBook

    一.定义 Git(分布式版本控制系统) GitHub gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub. gitHub于2008年4 ...

  8. android桌面悬浮窗仿QQ手机管家加速效果

    主要还是用到了WindowManager对桌面悬浮进行管理. 需要一个火箭的悬浮窗 一个发射台悬浮窗  ,判断火箭是否放到了发射台,如果放上了,则使用AsyTask 慢慢将火箭的图片往上移.结束后., ...

  9. PAT 1065 单身狗

    https://pintia.cn/problem-sets/994805260223102976/problems/994805266942377984 “单身狗”是中文对于单身人士的一种爱称.本题 ...

  10. java连接mysql底层封装

    package com.dao.db; import java.sql.Connection; import java.sql.SQLException; /** * 数据库连接层MYSQL * @a ...