JavaScript中的this

cucumber 发布于2019-08-26 10:18 / 3223人阅读

摘要：在中，只有两种指向，一种是指向当前的封闭作用域，或者是指向当前作用域的外层，的最顶层就是对象。在非严格模式下，默认指向全局对象。浏览器环境全局函数方法用于在指定的毫秒数后调用函数或计算表达式。它会不停地调用函数，指导被调用或者窗口被关闭。

1：基本概念

this字面意思是当前，当前执行代码的环境对象或者是上下文。代表着当前方法执行的环境上下文，那么何为环境上下文，通俗的说，谁调用了函数，谁就是这个函数的环境上下文。

在js中，this只有两种指向，一种是指向当前的封闭作用域，或者是指向当前作用域的外层，this的最顶层就是window对象。

关于this必须要了解的是严格模式，严格模式是js里面的一个子集，是具有限制性JavaScript变体，严格模式也是js的一种，但是加了一些限制。

比如：

在严格模式下通过抛出错误来消除了一些原有的静默错误(静默错误：语法有错误但是js并没有提示，默认允许这个操作)。比如要取一个函数的传入参数，在非严格模式下，可以直接拿到它的grument，但在严格模式下会抛出一个错误。

严格模式修复了一些导致JavaScript引擎难以执行优化的缺陷

禁用了在ECMAScript的未来版本中可能会定义的一些语法

进入"严格模式"的标志："use strict";

    // 为整个脚本开启严格模式 
    "use strict";
    var v = "Hi!  I"m a strict mode script!";
    
    // 为函数开启严格模式 
    function strict() {
        "use strict";
        function nested() { 
            return "And so am I!"; 
        }
        return "Hi!  I"m a strict mode function!  " + nested();
    }

2：全局环境

在全局环境下，无论是否在严格模式下，在全局执行环境下(任何函数体外部)this指向全局对象。也就是说在全局执行环境，这个this永远指向全局对象，这个全局对象在浏览器中就是window。

    //浏览器环境
    var name = "Eric";
    console.log(window.name === this.name);  /* true */
    console.log(window === this);            /* true */

3：函数体内部

在函数体内部，this的值取决于函数被调用的方式。函数被调用的方式有很多种：

简单调用，也就是说没有添加任何额外的操作，没有添加一个this的绑定或者是改变。

简单调用分为严格模式与非严格模式。

在非严格模式下，this默认指向全局对象。

  // 浏览器环境
  function simple(){
      return this;
  }
  console.log(simple() === window);
  // true

在严格模式下，保持进入执行环境时的值，没有指定时默认undefined。

  // 浏览器环境
  function simple2(){
      "use strict";
      return this;
  }
  simple2() === undefined;
  // true 
  window.simple2() === window;
  // true

this传递，在js中this绑定有两种：

一种是call/apply，可以看作是一种，它们都是一个绑定this的立即执行的一个方法，绑定之后会立即执行这个函数，两者的区别在于传递参数的不同，一个是传一个参数，一个是传一堆参数；call/apply实际上是绑定值的是一个对象，存在一个ToObject过程。call/apply是一个立即执行的绑定this的一个操作。

  // 浏览器环境 
  var object = {
      name: "Eric"
  };
  var name = "Iven";
  function getName(arg) {
      return this.name;
  }
  
  getName(); /* Iven */
  getName.call(object); /* Eric */
  getName.apply(object); /* Eric */

另一种是bind，与上面不同的是bind不会立即执行，它只是实现一个绑定的过程，返回的是一个柯里化的函数，这个柯里化的函数就是call/apply。bind只能被绑定一次。

  name = "Davy";
  function bindThis(){
      return this.name;
  }
  var getName1 = bindThis.bind({ name: "Eric" });
  console.log(getName1()); /* Eric */
  
  var getName2 = getName1.bind({ name: "Iven" });
  console.log(getName2()); /* Eric */

箭头函数在执行的时候会形成一个封闭的作用域，this与封闭作用域的this保持一致，call/apply/bind都将会被忽略。

// 浏览器环境 
var globalThis = this;
var arrowsFunction = () => this;
console.log(arrowsFunction() === globalObject); /* true */

作为对象的方法被调用(有一个靠近原则)：在对象里面定义了一个函数，然后通过对象去调用这个函数。

// 浏览器环境 
var object = {
    name: "Eric",

    getName: function() {
        return this.name;
    }
};
console.log(object.getName()); /* Eric */


function getName2() {
    return this.name;
}
object.getName = getName2;
console.log(object.getName()); /* Eric */


object.object = {
    getName: getName2,
    name: "Iven"
};
console.log(object.object.getName()); /* Iven */

4：全局函数

setTimeout

setInterval

alert

setInterval()方法用于在指定的毫秒数后调用函数或计算表达式。

语法：setTimeout(code，millisec)，参数code必需，要调用的函数后执行的JavaScript代码串；millisec必需，在执行代码前等待的毫秒数。

注意：setTimeout()只执行code一次，如果需要多次调用，请使用setInterval()或者让code自身再次调用setTimeout()，也就是利用递归。

setInterval()方法可按照指定的周期来调用函数或计算表达式。它会不停地调用函数，指导clearInterval()被调用或者窗口被关闭。由setInterval()返回的ID值可以用作clearInterval()方法的参数。

语法：setInterval(code，millisec[,"lang"])

GPU云服务器云服务器 javaScript中的this js中的this js中的this机制 js中的this与html

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

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

JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
学习React之前你需要知道的的JavaScript基础知识

摘要：和类在开始时遇到类组件，只是需要有关类的基础。毕竟，中的条件呈现仅再次显示大多数是而不是特定的任何内容。在我的研讨会期间，更多的材料是关于JavaScript而不是React。其中大部分归结为JavaScript ES6以及功能和语法，但也包括三元运算符，语言中的简写版本，此对象，JavaScript内置函数（map，reduce，filter）或更常识性的概念，如：可组合性，可重用...

bitkylin 2019-08-02 11:01 评论0 收藏0
JavaScript中的面向对象（object-oriented）编程

摘要：对象在中，除了数字字符串布尔值这几个简单类型外，其他的都是对象。那么在函数对象中，这两个属性的有什么区别呢表示该函数对象的原型表示使用来执行该函数时这种函数一般成为构造函数，后面会讲解，新创建的对象的原型。这时的函数通常称为构造函数。。本文原发于我的个人博客，经多次修改后发到sf上。本文仍在不断修改中，最新版请访问个人博客。最近工作一直在用nodejs做开发，有了nodejs，...

JerryZou 2019-08-21 10:26 评论0 收藏0
JavaScript进阶之’this‘

摘要：所以相同点是，在全局范围内，全局变量终究是属于老大的。只生效一次引入了。只生效一次在箭头函数中，与封闭词法环境的保持一致。我通常把这些原始函数叫做构造函数。在里面你可以嵌套函数，也就是你可以在函数里面定义函数。 showImg(https://img-blog.csdnimg.cn/20190522000008399.jpg?x-oss-process=image/watermark,...

shenhualong 2019-08-23 18:37 评论0 收藏0
理解 JavaScript 中的 this 关键字

摘要：原文许多人被中的关键字给困扰住了，我想混乱的根源来自人们理所当然地认为中的应该像中的或中的一样工作。尽管有点难理解，但它的原理并不神秘。在浏览器中，全局对象是对象。运算符创建一个新对象并且设置函数中的指向调用函数的新对象。原文：Understanding the this keyword in JavaScript 许多人被JavaScript中的this关键字给困扰住了，我想混乱的...

jayzou 2019-08-21 10:32 评论0 收藏0