this四种绑定方式之间的奇淫技巧

写在前面

上一篇中,我们对于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语言特性的强大之处。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏会跳舞的机器人

java并发编程的艺术笔记第一章——并发编程的挑战

单核处理器也支持多线程执行代码,CPU通过给每个线程分配CPU时间片来实现这个机制。时间片是CPU分配给各个线程的时间,因为时间片非常短,所以CPU通过不停地切...

823
来自专栏林德熙的博客

C# 谁改了我的代码

其中的 Foo 是其他的函数,大家可以猜到输出是 lindexi ,但是,实际上把Foo调用函数添加之后,输出是 Lindexi 被大写了。那么这时 Foo 做...

451
来自专栏AlgorithmDog的专栏

为了 1% 情形,牺牲 99% 情形下的性能:蜗牛般的 Python 深拷贝

最近使用 Python 一个项目,发现 Python 的深拷贝 copy.deepcopy 实在是太慢了。 ? 相关背景 在 Pytho...

2255
来自专栏C/C++基础

C/C++结构体初始化与赋值

结构体是常用的自定义构造类型,是一种很常见的数据打包方法。结构体对象的初始化有多种方式,分为指定初始化、顺序初始化、构造函数初始化。假如有如下结构体。

792
来自专栏移动端开发

Swift 内存管理详解

Swift内存管理: Swift 和 OC 用的都是ARC的内存管理机制,它们通过 ARC 可以很好的管理对象的回收,大部分的时候,程序猿无需关心 Swift...

1789
来自专栏杨建荣的学习笔记

通过单例模式模拟RAC连接 (r4笔记第76天)

单例模式基本是学习设计模式的第一个模式,而且在工作中使用太普遍了,通用到我们感觉就应该是这样,但是如果真给你纸和笔,在5分钟内写出一个完整的单例模式,估计还是有...

2153
来自专栏程序员互动联盟

【答疑释惑】C语言里面栈和堆的区别

很多初学者朋友对C语言里面的堆和栈理解的不是太清楚,模模糊糊。他们到底有哪些区别呢?我认为主要从以下几根方面来了解他们的不同之处: 1,变量位置:栈和堆都是程...

35212
来自专栏智能合约

Javascript闭包剖析(通俗易懂)

1033
来自专栏海天一树

小朋友学C语言(13):逻辑运算符

逻辑运算符有三种,“&&”(逻辑与)、“||”(逻辑或)和“!”(逻辑非) (一)逻辑与&& “&&”相当于生活中说的“并且”,就是两个条件都同时成立的情况下“...

33714
来自专栏C/C++基础

C++构造函数和析构函数中抛出异常的注意事项

从语法上来说,构造函数和析构函数都可以抛出异常。但从逻辑上和风险控制上,构造函数和析构函数中尽量不要抛出异常,万不得已,一定要注意防止资源泄露。在析构函数中抛出...

701

扫码关注云+社区