写在前面

上一篇中,我们对于JavaScript中原始值、复杂值以及内存空间进行了一个深入浅出的总结,这次我们来聊一聊JavaScript中this关键字的深入浅出的用法.

在 JavaScript 中,this 是动态绑定,或称为运行期绑定的,这就导致 JavaScript 中的 this 关键字有能力具备多重含义,带来灵活性的同时,也为初学者带来不少困惑。希望这篇文章可以解决初学者心中what’s this ?的困惑。

创建函数时,系统会在默认创建一个名为this的关键字,这也就是说this,只能在函数内部使用;从根本上说,由于运期绑定的特性,JavaScript中this的关键字要丰富的多,这完全取决于函数调用的方式

  1)作为函数调用

  2)作为对象方法调用

  3)使用call,apply调用

  4)作为构造函数调用

我没有按这四种调用方式依次来介绍,但是在例子中都有体现。

1、如何确定this值?

我们来看一个例子:1)当从全局域中调用sayFoo函数时,this指向window对象;2)当它作为myObject的一种方法被调用时,this引用myObject;

  

通过上面的例子,我们发现this 是基于调用函数的上下文的,考虑一下myObject.sayFoo和sayFoo都指向了相同的函数,然而,调用sayFoo的方式不同,this的值也不同。

通过这个例子,我们也可以体会到了a、作为函数调用;b、作为对象的方法调用时,this的不同指向

2、在嵌套函数中用this关键字

当在嵌套函数内部使用this时,会发生什么事呢?通过下面的例子,我们明显看出嵌套函数内部的this都失去方向,都指向了window对象

我们在来看一种情况(原理是一样的),我们把一个匿名函数作为参数传递给一个对象的方法中:,当匿名函数在foo.func1(函数内的函数)内部被调用时,匿名函数的this值同样是window对象的引用.

3、充分利用作用域链研究嵌套函数的问题

JavaScript的程序员的力量是强大的,为了解决在嵌套函数内部this指向的问题,他们想出了变量代替的方法,可以简单的在父函数使用作用域链来保留对this的引用,以便this不丢失。约定俗成,我们一般把变量定义为that

我们来看一个例子:

这样,我们就很好的解决了嵌套函数内部this指向的问题

4、使用call()或apply()控制this值

我们可以通过apply()或call()来重写/控制this值,以便定义调用函数时this指向哪个对象。“嘿,告诉x函数,调用的时候把z对象作为this值使用”,这样做我们就可以改变JavaScript中决定this值的方式(取代默认模式)

上述代码使用了call(),但也可以使用apply()。两者区别在于为函数传递参数的方式不同:a、使用call(),参数只是使用逗号分隔的值;b、如果使用apply(),参数值在数组内传递。

下面使用apply可以达到同样的效果

5、在用户自定义构造函数内部使用this 关键字

在构造函数中,this默认值的变化与使用call或apply时this默认值变化不同,使用new关键词调用函数时,在构造函数中声明的this引用实例本身

在使用new关键词调用构造函数时,this引用’即将创建的对象’。如果不使用new关键词,this值将是调用Person的上下文 – 上例中是window对象

写在后面

this在不同调用方式下的含义 只是JavaScript中一个很小的概念,但是也是我们借此可以深入理解JavaScript函数的执行环境,更进一步帮组我们了解闭包等其他概念,掌握了这些概念,才能充分发挥JavaScript的特点,才会发挥JavaScript语言特性的强大之处。

this的用法 – JavaScript深入浅出(二)的更多相关文章

  1. 函数原型属性-JavaScript深入浅出(三)

    前两次总结了JavaScript中的基本数据类型(值类型<引用类型>,引用类型<复杂值>)以及他们在内存中的存储,对内存空间有了一个简单的了解,以及第二次总结了this深入浅出 ...

  2. 原型那些事 - JavaScript深入浅出(三)

    前两次总结了JavaScript中的基本数据类型(值类型<引用类型>,引用类型<复杂值>)以及他们在内存中的存储,对内存空间有了一个简单的了解,以及第二次总结了this深入浅出 ...

  3. 从头开始学JavaScript (十二)——Array类型

    原文:从头开始学JavaScript (十二)--Array类型 一.数组的创建 注:ECMAscript数组的每一项都可以保存任何类型的数据 1.1Array构造函数 var colors = ne ...

  4. 学习javascript数据结构(二)——链表

    前言 人生总是直向前行走,从不留下什么. 原文地址:学习javascript数据结构(二)--链表 博主博客地址:Damonare的个人博客 正文 链表简介 上一篇博客-学习javascript数据结 ...

  5. JavaScript深入浅出6-函数和作用域

    慕课网教程视频地址:Javascript深入浅出 函数的概念:定义一次可调用多次的javascript代码段 创建函数:声明 function fuc(){}  声明前置   表达式 var fuc= ...

  6. JavaScript深入浅出5-数组

    慕课网教程视频地址:Javascript深入浅出 数组:值的有序集合 创建数组:字面量,构造器new array() 数组的读写:push() 尾部加入新元素 unshift() 头部加入新元素 po ...

  7. 初探JavaScript(二)——JS如何动态操控HTML

    除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...

  8. JavaScript深入浅出4-对象

    慕课网教程视频地址:Javascript深入浅出 对象的结构:包含一系列无序的属性,每个属性都有字符串key和对应的值 创建对象:对象字面量.new/原型链.Object.create 对象的属性操作 ...

  9. JavaScript深入浅出3-语句

    慕课网教程视频地址:Javascript深入浅出 程序由语句组成,语句遵守特定语法规则 块 block  {}   没有块级作用域 声明    var 异常   try catch finally 函 ...

随机推荐

  1. Tornado-StaticFileHandler参考

    StaticFileHandler ====== tornado.web.StaticFileHandler 源代码中的解释 class StaticFileHandler(RequestHandle ...

  2. 庖丁解牛——CY7C68013A开发框架

    大家好,好久不见了,距离上次发文章都有两个多星期了,非常高兴同时也非常感谢你们能一直关注我.之前在公众号上收到网友的消息,其大概意思就是问我能不能出点USB干货,为此我就把第二篇--解密USB2.0数 ...

  3. Base:一种 Acid 的替代方案

    原文链接: BASE: An Acid Alternative 数据库 ACID,都不陌生:原子性.一致性.隔离性和持久性,这在单台服务器就能搞定的时代,很容易实现,但是到了现在,面对如此庞大的访问量 ...

  4. 2016 "Bird Cup" ICPC7th@ahstu--“波导杯”安徽科技学院第七届程序设计大赛

    "波导杯"安徽科技学院第七届程序设计大赛 原文章网页 Contest - 2016 "Bird Cup" ICPC7th@ahstu Start time:   ...

  5. 转载的log4cplus使用指南

    以下转载的log4cplus使用指南的版本可能不是最新,仅作参考了解.应以最新安装包中的示例代码为准. 目    录1 Log4cplus简介    52 安装方法    53 主要类说明    64 ...

  6. 在CentOS 6上安装Apache和PHP

    本文演示如何在CentOS 6上安装Apache和PHP.CentOS 6自带的是Apache 2.2.3和PHP 5.1.6,您可以使用默认的CentOS包管理器进行安装yum.使用yum(而不是使 ...

  7. 窗体调用 OCX 的使用方法(MFC,WINFORM)

    在上一篇中,我们做了一个OCX控件,叫mfcActive.ocx,在这一篇我们要做的就是使用这个ocx控件.第一步:创建一个MFC的对话框工程(其实winform 也是一样的) 第二步:在工具箱中常规 ...

  8. DB2 执行SQL脚本

    今天有网友问到这个问题,平时也没怎么留意.刚刚做了测试在db2的SQL脚本中,直接写命令就好了. 例如: [db2inst1@win backups]$ cat test.ddl ---------- ...

  9. vs2012中自带IIS如何让其他电脑访问

    在一些场景中,我们需要让其他电脑或者说模拟器访问我们的服务进行调试,而vs2012自带的iis Express启动的程序其他设备是不能访问,iis express启动的程序路径是http://loca ...

  10. 我读<代码整洁之道>--读书笔记整理

    第一章 整洁代码 "我可以列出我留意到的整洁代码的所有特点,但其中有一条是根本性的,整洁的代码总是看起来像是某位特别在意他的人写的.几乎没有改进的余地,代码作者设么都想到了,如果你企图改进它 ...