在这之前,我们需要来回顾一下执行上下文。

在前面几篇文章中,我有好几个地方都提到执行上下文的生命周期,为了防止大家没有记住,再次来回顾一下,如下图。

执行上下文生命周期

在执行上下文的创建阶段,会分别生成变量对象,建立作用域链,确定this指向。其中变量对象与作用域链我们都已经仔细总结过了,而这里的关键,就是确定this指向。

在这里,我们需要得出一个非常重要一定要牢记于心的结论,this的指向,是在函数被调用的时候确定的。也就是执行上下文被创建时确定的。因此我们可以很容易就能理解到,一个函数中的this指向,可以是非常灵活的。比如下面的例子中,同一个函数由于调用方式的不同,this指向了不一样的对象。

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

 

  1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法。
  2. call()和apply()方法时,就会改变this的指向。

JS中的call()方法和apply()方法用法总结

  1.  

除此之外,在函数执行过程中,this一旦被确定,就不可更改了。

  1. var a = 10;
  2. var obj = {
  3. a: 20
  4. }
  5.  
  6. function fn () {
  7. this = obj; // 这句话试图修改this,运行后会报错
  8. console.log(this.a);
  9. }
  10.  
  11. fn();

  

一、全局对象中的this

关于全局对象的this,我之前在总结变量对象的时候提到过,它是一个比较特殊的存在。全局环境中的this,指向它本身。因此,这也相对简单,没有那么多复杂的情况需要考虑。

  1. // 通过this绑定到全局对象
  2. this.a2 = 20;
  3.  
  4. // 通过声明绑定到变量对象,但在全局环境中,变量对象就是它自身
  5. var a1 = 10;
  6.  
  7. // 仅仅只有赋值操作,标识符会隐式绑定到全局对象
  8. a3 = 30;
  9.  
  10. // 输出结果会全部符合预期
  11. console.log(a1);
  12. console.log(a2);
  13. console.log(a3);

  

二、函数中的this

在总结函数中this指向之前,我想我们有必要通过一些奇怪的例子,来感受一下函数中this的捉摸不定。

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

  

  1. // demo02
  2. var a = 20;
  3. function fn() {
  4. function foo() {
  5. console.log(this.a);
  6. }
  7. foo();
  8. }
  9. fn();

  

  1. // demo03
  2. var a = 20;
  3. var obj = {
  4. a: 10,
  5. c: this.a + 20,
  6. fn: function () {
  7. return this.a;
  8. }
  9. }
  10.  
  11. console.log(obj.c);
  12. console.log(obj.fn());

这几个例子需要读者老爷们花点时间稍微感受一下,如果你暂时没想明白怎么回事,也不用着急,我们一点一点来分析。

分析之前,我们先直接了当抛出结论。

在一个函数上下文中,this由调用者提供,由调用函数的方式来决定。如果调用者函数,被某一个对象所拥有,那么该函数在调用时,内部的this指向该对象。如果函数独立调用,那么该函数内部的this,则指向undefined。但是在非严格模式中,当this指向undefined时,它会被自动指向全局对象。

从结论中我们可以看出,想要准确确定this指向,找到函数的调用者以及区分他是否是独立调用就变得十分关键。

  1. // 为了能够准确判断,我们在函数内部使用严格模式,因为非严格模式会自动指向全局
  2. function fn() {
  3. 'use strict';
  4. console.log(this);
  5. }
  6.  
  7. fn(); // fn是调用者,独立调用
  8. window.fn(); // fn是调用者,被window所拥有

  

在上面的简单例子中,fn()作为独立调用者,按照定义的理解,它内部的this指向就为undefined。而window.fn()则因为fn被window所拥有,内部的this就指向了window对象。

那么掌握了这个规则,现在回过头去看看上面的三个例子,通过添加/去除严格模式,那么你就会发现,原来this已经变得不那么虚无缥缈,已经有迹可循了。

但是我们需要特别注意的是demo03。在demo03中,对象obj中的c属性使用this.a + 20来计算,而他的调用者obj.c并非是一个函数。因此他不适用于上面的规则,我们要对这种方式单独下一个结论。

当obj在全局声明时,无论obj.c在什么地方调用,这里的this都指向全局对象,而当obj在函数环境中声明时,这个this指向undefined,在非严格模式下,会自动转向全局对象。可运行下面的例子查看区别。

  1. 'use strict';
  2. var a = 20;
  3. function foo () {
  4. var a = 1;
  5. var obj = {
  6. a: 10,
  7. c: this.a + 20,
  8. fn: function () {
  9. return this.a;
  10. }
  11. }
  12. return obj.c;
  13.  
  14. }
  15. console.log(foo()); // 运行会报错

实际开发中,并不推荐这样使用this;

上面多次提到的严格模式,需要大家认真对待,因为在实际开发中,现在基本已经全部采用严格模式了,而最新的ES6,也是默认支持严格模式。

再来看一些容易理解错误的例子,加深一下对调用者与是否独立运行的理解。

  1. var a = 20;
  2. var foo = {
  3. a: 10,
  4. getA: function () {
  5. return this.a;
  6. }
  7. }
  8. console.log(foo.getA()); // 10
  9.  
  10. var test = foo.getA;
  11. console.log(test()); // 20

 

foo.getA()中,getA是调用者,他不是独立调用,被对象foo所拥有,因此它的this指向了foo。而test()作为调用者,尽管他与foo.getA的引用相同,但是它是独立调用的,因此this指向undefined,在非严格模式,自动转向全局window。

稍微修改一下代码,大家自行理解。

  1. var a = 20;
  2. function getA() {
  3. return this.a;
  4. }
  5. var foo = {
  6. a: 10,
  7. getA: getA
  8. }
  9. console.log(foo.getA()); // 10

灵机一动,再来一个。如下例子。  

  1. function foo() {
  2. console.log(this.a)
  3. }
  4.  
  5. function active(fn) {
  6. fn(); // 真实调用者,为独立调用
  7. }
  8.  
  9. var a = 20;
  10. var obj = {
  11. a: 10,
  12. getA: foo
  13. }
  14.  
  15. active(obj.getA);

  

三、使用call,apply显示指定this

JavaScript内部提供了一种机制,让我们可以自行手动设置this的指向。它们就是call与apply。所有的函数都具有这两个方法。它们除了参数略有不同,其功能完全一样。它们的第一个参数都为this将要指向的对象。

如下例子所示。fn并非属于对象obj的方法,但是通过call,我们将fn内部的this绑定为obj,因此就可以使用this.a访问obj的a属性了。这就是call/apply的用法。

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

  

而call与applay后面的参数,都是向将要执行的函数传递参数。其中call以一个一个的形式传递,apply以数组的形式传递。这是他们唯一的不同。

 

  1. function fn(num1, num2) {
  2. console.log(this.a + num1 + num2);
  3. }
  4. var obj = {
  5. a: 20
  6. }
  7.  
  8. fn.call(obj, 100, 10); // 130
  9. fn.apply(obj, [20, 10]); // 50

  

因为call/apply的存在,这让JavaScript变得十分灵活。因此就让call/apply拥有了很多有用处的场景。简单总结几点,也欢迎大家补充。

1、将类数组对象转换为数组

  1. function exam(a, b, c, d, e) {
  2.  
  3. // 先看看函数的自带属性 arguments 什么是样子的
  4. console.log(arguments);
  5.  
  6. // 使用call/apply将arguments转换为数组, 返回结果为数组,arguments自身不会改变
  7. var arg = [].slice.call(arguments);
  8.  
  9. console.log(arg);
  10. }
  11.  
  12. exam(2, 8, 9, 10, 3);
  13.  
  14. // result:
  15. // { '0': 2, '1': 8, '2': 9, '3': 10, '4': 3 }
  16. // [ 2, 8, 9, 10, 3 ]
  17. //
  18. // 也常常使用该方法将DOM中的nodelist转换为数组
  19. // [].slice.call( document.getElementsByTagName('li') );

  

2、根据自己的需要灵活修改this指向

  1. var foo = {
  2. name: 'joker',
  3. showName: function() {
  4. console.log(this.name);
  5. }
  6. }
  7. var bar = {
  8. name: 'rose'
  9. }
  10. foo.showName.call(bar);

3、实现继承

  1. // 定义父级的构造函数
  2. var Person = function(name, age) {
  3. this.name = name;
  4. this.age = age;
  5. this.gender = ['man', 'woman'];
  6. }
  7.  
  8. // 定义子类的构造函数
  9. var Student = function(name, age, high) {
  10.  
  11. // use call
  12. Person.call(this, name, age);
  13. this.high = high;
  14. }
  15. Student.prototype.message = function() {
  16. console.log('name:'+this.name+', age:'+this.age+', high:'+this.high+', gender:'+this.gender[0]+';');
  17. }
  18.  
  19. new Student('xiaom', 12, '150cm').message();
  20.  
  21. // result
  22. // ----------
  23. // name:xiaom, age:12, high:150cm, gender:man;

  

简单给有面向对象基础的朋友解释一下。在Student的构造函数中,借助call方法,将父级的构造函数执行了一次,相当于将Person中的代码,在Sudent中复制了一份,其中的this指向为从Student中new出来的实例对象。call方法保证了this的指向正确,因此就相当于实现了基层。Student的构造函数等同于下。

  1. var Student = function(name, age, high) {
  2. this.name = name;
  3. this.age = age;
  4. this.gender = ['man', 'woman'];
  5. // Person.call(this, name, age); 这一句话,相当于上面三句话,因此实现了继承
  6. this.high = high;
  7. }

  

4、在向其他执行上下文的传递中,确保this的指向保持不变

如下面的例子中,我们期待的是getA被obj调用时,this指向obj,但是由于匿名函数的存在导致了this指向的丢失,在这个匿名函数中this指向了全局,因此我们需要想一些办法找回正确的this指向。

  1. var obj = {
  2. a: 20,
  3. getA: function() {
  4. setTimeout(function() {
  5. console.log(this.a)
  6. }, 1000)
  7. }
  8. }
  9.  
  10. obj.getA();

  

常规的解决办法很简单,就是使用一个变量,将this的引用保存起来。我们常常会用到这方法,但是我们也要借助上面讲到过的知识,来判断this是否在传递中被修改了,如果没有被修改,就没有必要这样使用了。

  1. var obj = {
  2. a: 20,
  3. getA: function() {
  4. var self = this;
  5. setTimeout(function() {
  6. console.log(self.a)
  7. }, 1000)
  8. }
  9. }

  

另外就是借助闭包与apply方法,封装一个bind方法。

  1. function bind(fn, obj) {
  2. return function() {
  3. return fn.apply(obj, arguments);
  4. }
  5. }
  6.  
  7. var obj = {
  8. a: 20,
  9. getA: function() {
  10. setTimeout(bind(function() {
  11. console.log(this.a)
  12. }, this), 1000)
  13. }
  14. }
  15.  
  16. obj.getA();

  

当然,也可以使用ES5中已经自带的bind方法。它与我上面封装的bind方法是一样的效果。

  1. var obj = {
  2. a: 20,
  3. getA: function() {
  4. setTimeout(function() {
  5. console.log(this.a)
  6. }.bind(this), 1000)
  7. }
  8. }

  

四、构造函数与原型方法上的this

在封装对象的时候,我们几乎都会用到this,但是,只有少数人搞明白了在这个过程中的this指向,就算我们理解了原型,也不一定理解了this。所以这一部分,我认为将会为这篇文章最重要最核心的部分。理解了这里,将会对你学习JS面向对象产生巨大的帮助。

结合下面的例子,我在例子抛出几个问题大家思考一下。

  1. function Person(name, age) {
  2.  
  3. // 这里的this指向了谁?
  4. this.name = name;
  5. this.age = age;
  6. }
  7.  
  8. Person.prototype.getName = function() {
  9.  
  10. // 这里的this又指向了谁?
  11. return this.name;
  12. }
  13.  
  14. // 上面的2个this,是同一个吗,他们是否指向了原型对象?
  15.  
  16. var p1 = new Person('Nick', 20);
  17. p1.getName();

  

我们已经知道,this,是在函数调用过程中确定,因此,搞明白new的过程中到底发生了什么就变得十分重要。

通过new操作符调用构造函数,会经历以下4个阶段。

  • 创建一个新的对象;
  • 将构造函数的this指向这个新对象;
  • 指向构造函数的代码,为这个对象添加属性,方法等;
  • 返回新对象。

因此,当new操作符调用构造函数时,this其实指向的是这个新创建的对象,最后又将新的对象返回出来,被实例对象p1接收。因此,我们可以说,这个时候,构造函数的this,指向了新的实例对象,p1。

而原型方法上的this就好理解多了,根据上边对函数中this的定义,p1.getName()中的getName为调用者,他被p1所拥有,因此getName中的this,也是指向了p1。

好啦,我所知道的,关于this的一切,已经总结完了,希望大家在阅读之后,能够真正学到东西,然后给我点个赞^_^。如果你发现有什么错误,请在评论中指出,我会尽快修改。先谢过了。

  1.  

前端高质量知识(五)-JS详细图解全方位解读this的更多相关文章

  1. 前端高质量知识(四)-JS详细图解作用域链与闭包

    攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你是初入前端的朋友,我没有办法 ...

  2. JS详细图解全方位解读this

    JS详细图解全方位解读this 对于this指向的理解中,有这样一种说法:谁调用它,this就指向谁.在我刚开始学习this的时候,我是非常相信这句话的.因为在一些情况下,这样理解也还算说得通.可是我 ...

  3. 前端高质量知识(一)-JS内存空间详细图解

    变量对象与堆内存   var a = 20;   var b = 'abc';   var c = true;   var d = { m: 20 } 因为JavaScript具有自动垃圾回收机制,所 ...

  4. 前端高质量知识(二)-JS执行上下文(执行环境)详细图解Script

    先随便放张图 我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题.比如先来一个简单一点的. console.log(a); // 这里会打印出什么? var a = 20; PS: 变量提 ...

  5. 前端高质量知识(三)-JS变量对象详解

    在JavaScript中,我们肯定不可避免的需要声明变量和函数,可是JS解析器是如何找到这些变量的呢?我们还得对执行上下文有一个进一步的了解. 在上一篇文章中,我们已经知道,当调用一个函数时(激活), ...

  6. JS详细图解作用域链与闭包

    JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你 ...

  7. 如何编写高质量的 JS 函数(3) --函数式编程[理论篇]

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/EWSqZuujHIRyx8Eb2SSidQ作者:杨昆 [编写高质量函数系列]中, <如何 ...

  8. 如何编写高质量的 JS 函数(4) --函数式编程[实战篇]

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/ZoXYbjuezOWgNyJKmSQmTw作者:杨昆 [编写高质量函数系列],往期精彩内容: ...

  9. 如何编写高质量的 JS 函数(1) -- 敲山震虎篇

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm7Xi7JxQ作者:杨昆 一千个读者,有一千个哈姆雷特. 此系列文 ...

随机推荐

  1. management & Actuator

    self define indicator https://docs.spring.io/spring-boot/docs/current/reference/html/production-read ...

  2. Filter责任链模式

    Filter责任链的创建 org.apache.catalina.core.ApplicationFilterFactory#createFilterChain,  此方法是被org.apache.c ...

  3. 安装pyautogui时报错备注

    python3.6用pip安装pyautogui时报错,找了蛮多方法都不行,最后通过安装低版本的pyautogui解决,这里备注下 报错图 解决方法: pip install pyautogui==0 ...

  4. java——斗地主小游戏之洗牌发牌

    遇到的问题: 1.int和Integer的区别? 1)Integer是int的包装类,int则是java的一种基本数据类型 . 2)Integer变量必须实例化后才能使用,而int变量不需要 . 3) ...

  5. 德国生活tips

    提要: 在德国生活也近7个月的时间了,简单给准备来德国留学,生活或者是旅游的人写一些小tips.想到什么就写什么咯. (1)德国交通篇 在德国,交通是第一要点,一般大家都会看到城市里有Straßenb ...

  6. @ControllerAdvice 拦截异常并统一处理

    在spring 3.2中,新增了@ControllerAdvice 注解,可以用于定义@ExceptionHandler.@InitBinder.@ModelAttribute,并应用到所有@Requ ...

  7. 如何使用python将二维数组去重呢?

    二维数组的去重,能和一维的方法类似吗?import numpyc=np.array(((1,2),(3,4),(5,6),(7,8),(7,8),(3,4),(1,2)))print('二维数组:\n ...

  8. [转]ASP.NET Core集成微信登录

    本文转自:http://www.cnblogs.com/early-moon/p/5819760.html 工具: Visual Studio 2015 update 3 Asp.Net Core 1 ...

  9. jq实例

    1.导航栏 <style type="text/css"> * {padding:0;margin:0;list-style:none;} img { width:11 ...

  10. C#中 计时器用法 运行时间

    有时候我们会需要计算某段代码运行的时间 比如一个sql查询,记录一段代码所花费的时间等等代码如下: System.Diagnostics.Stopwatch watch = new System.Di ...