【this指向】之一：不同执行环境全局作用域和函数中的this

1.浏览器环境

var a = 'globalA'
this.b = 'global this B'
function fn () {
  console.log('globalFn>>>', this.a) 
  // globalFn>>> globalA
  
  console.log(this === window) // true
}
var obj = {
  a: 'objA',
  fn: function () {
    console.log('objFn>>>', this.a)
    // objFn>>> objA
    
    console.log('objFn>>>', window.b)
    // objFn>>> global this B
    
    console.log('objFn>>>', window.a)
    // objFn>>> globalA
  }
}
fn()
obj.fn()

浏览器环境中除了this和window之外，还有 self、frames、globalThis，都等同于window对象，看下面一段代码：

var a = 'globalA'
var obj = {
  a: 'objA',
  fn: function () {
    console.log('objFn>>>', this.a)   // objFn>>> objA
    console.log('objFn>>>', window.a) // objFn>>> globalA
    console.log('objFn>>>', self.a)   // objFn>>> globalA
    console.log('objFn>>>', frames.a) // objFn>>> globalA
    console.log('objFn>>>', globalThis.a) // objFn>>> globalA
  }
}
obj.fn()

下面看一段代码：严格模式下函数中的this

var a = 'globalA'
function fn2 () {
  'use strict'
  console.log('globalFn>>>', this.a)
}
fn2()
// Uncaught TypeError: Cannot read property 'a' of undefined
window.fn2() // globalFn>>> globalA

由此可见，严格模式下，函数中this是调用方，所以第一个中this为undefined，第二个是window.

2.node环境中：global

可以使用nodemon命令来进行测试，nodemon的使用后续补充。

var a = 'global A'
global.b = 'global B'
function fn () {
  console.log('globalFn>>>', this.a)
  // globalFn>>> undefined
  
  console.log('globalFn>>>', this.b)
  // globalFn>>> global B
}
var obj = {
  a: 'objA',
  fn: function () {
    console.log('objFn>>>', this.a)
    // objFn>>> objA
    
    console.log('objFn>>>', global.a)
    // objFn>>> undefined
    
    console.log('objFn>>>', global.b)
    // objFn>>> global B
    
    console.log('objFn>>>', window.a)
    // ReferenceError: window is not defined 
  }
}
fn()
obj.fn()

上面代码可以看出，在node环境中，需要手动将属性绑定到global上，才能通过global或者this获取属性：global.b = 'global B'

3.web worker环境中：self

略

4.结论

环境	全局作用域下的this指向	函数中this指向
浏览器环境	window	调用的对象
node环境	global	调用的对象
worker环境	self	调用的对象