JavaScript中的this

jiezi

5 年前

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();}

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

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

在函数体内部，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 */

setTimeout
setInterval
alert

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

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

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

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

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

JavaScript中的this

1：基本概念

2：全局环境

3：函数体内部

4：全局函数