JavaScript 严格模式下this的几种指向

smallStone 发布于2019-08-21 15:59 / 1580人阅读

摘要：前言曾经被中的弄晕了，今天整理总结一下在严格模式下的几种指向。严格模式构造函数中的事件处理函数中的在严格模式下，在事件处理函数中，指向触发事件的目标对象。

前言

曾经被 JavaScript 中的 this 弄晕了，今天整理总结一下在严格模式下 this 的几种指向。

1. 全局作用域中的this

在严格模式下，在全局作用域中，this指向window对象

    "use strict";
    
    console.log("严格模式");
    console.log("在全局作用域中的this");
    console.log("this.document === document",this.document === document);
    console.log("this === window",this === window);
    this.a = 9804;
    console.log("this.a === window.a===",window.a);

2. 全局作用域中函数中的this

在严格模式下，这种函数中的this等于undefined

    "use strict";
    
    console.log("严格模式");
    console.log("在全局作用域中函数中的this");
    function f1(){
      console.log(this);
    }
    
    function f2(){
      function f3(){
        console.log(this);
      }
      f3();
    }
    f1();
    f2();

3. 对象的函数（方法）中的this

在严格模式下，对象的函数中的this指向调用函数的对象实例

    "use strict";
    
    console.log("严格模式");
    console.log("在对象的函数中的this");
    var o = new Object();
    o.a = "o.a";
    o.f5 = function(){
      return this.a;
    }
    console.log(o.f5());

4. 构造函数的this

在严格模式下，构造函数中的this指向构造函数创建的对象实例。

    "use strict";
    
    console.log("严格模式");
    console.log("构造函数中的this");
    function constru(){
      this.a = "constru.a";
      this.f2 = function(){
        console.log(this.b);
        return this.a;
      }
    }
    var o2 = new constru();
    o2.b = "o2.b";
    console.log(o2.f2());

5. 事件处理函数中的this

在严格模式下，在事件处理函数中，this指向触发事件的目标对象。

    "use strict";
    
    function blue_it(e){
      if(this === e.target){
        this.style.backgroundColor = "#00f";
      }
    }
    var elements = document.getElementsByTagName("*");
    for(var i=0 ; i
6. 内联事件处理函数中的this

在严格模式下，在内联事件处理函数中，有以下两种情况：
    
    
    
    
    
后语
参考资料
MDN https://developer.mozilla.org...

延伸资料

阮一峰的网络日志 > JavaScript 严格模式详解 http://www.ruanyifeng.com/blo...

菜鸟教程 > JavaScript 严格模式 http://www.runoob.com/js/js-s...

云服务器私有云 javascript严格模式严格模式最基本的几种 html的几种轮播

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88319.html

影响JavaScript中this指向的几种函数调用方法

摘要：前言初学总会对指向感到疑惑，想要深入学习，必须先理清楚和相关的几个概念。中总是指向一个对象，但具体指向谁是在运行时根据函数执行环境动态绑定的，而并非函数被声明时的环境。除去不常用的和的情况，具体到实际应用中，指向大致可以分为以下种。前言初学javascript总会对this指向感到疑惑，想要深入学习javascript，必须先理清楚和this相关的几个概念。javascript中t...

Drinkey 2019-08-23 13:04 评论0 收藏0
js里this的几种用法

摘要：的几种用法关于是什么理论上是执行上下文的一个属性，的值在进入到执行上下文的时候就已经确定了，且不会再改变。默认绑定这种情况下，不属于任何一个函数方法内，即在全局作用域下，这种情况下称为默认绑定。最后的总结用伪代码的形式来表示例外例外本文参考 this的几种用法关于this this是什么？理论上this是执行上下文的一个属性，this的值在进入到执行上下文的时候就已经确定了，且不会...

melody_lql 2019-08-20 15:37 评论0 收藏0
理解JavaScript中的this关键词

摘要：除此之外，还有一种情况也会修改，在一些库中传入回调函数，可能会强制改变的绑定，例如在中本例中的就是被强制改变绑定到了触发事件的元素上。它们的第一个参数是一个对象，它们会把这个对象绑定到，接着在调用函数时指定这个。理解JavaScript中的this关键词 this关键词是JavaScript语言中一个很重要，同时也是一个非常复杂的机制，它同时也是一个很特殊的关键词，它一般会被自动定义...

paulquei 2019-08-20 10:45 评论0 收藏0
JavaScript中的this

摘要：作为构造函数何为构造函数所谓构造函数就是用来对象的函数，像等都是全局定义的构造函数。正在跑步正在说话正在跑步正在说话如上，如果函数作为构造函数用，那么其中的就代表它即将出来的对象。前言总括:详解JavaScript中的this的一篇总结，不懂this这个难点，很多时候会造成一些困扰，写出一些bug不知如何收场，所以一起来写bug吧，不对，一起来写代码吧。原文地址：JavaScr...

SimpleTriangle 2019-08-20 18:15 评论0 收藏0
#yyds干货盘点# 前端基础知识面试集锦3

摘要：当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体如何实现继承构造继承原型继承实例继承拷贝继承原型机制或和方法去实现较简单，建议使用构造函数与原型混合方式。它是基于的一个子集。 JavaScript介绍js的基本数据类型。Undefined、Null、Boolean、Number、Stri...

番茄西红柿 2021-11-22 15:29 评论0 收藏2637