this指向的研究

一、全局环境下的this指向

在浏览器中：
如果你在浏览器中运行你的 JavaScript 代码（像我们大多数人经常做的那样），全局上下文中的this指的是window对象。这是因为，在浏览器中，window 对象就是全局对象。

console.log(this === window); // true
var variable = “我是一个全局变量！”;
console.log(this.variable); // “我是一个全局变量！”

在这里，当我们声明变量时，它被附加到 window 对象上。因此，在全局上下文中使用this.variable 会给我们那个变量的值。

在Node.js中：
如果你在Node.js环境中运行你的代码，情况会有所不同。在Node.js中，this 的顶级值是一个空对象，不等同于 global。

console.log(this); // {}
global.globalVar = “我在Node中的全局对象上！”;
console.log(global.globalVar); // “我在Node中的全局对象上！”

了解 this 在全局上下文中的行为可能会根据代码的执行位置而有所不同。

二、函数里面的this指向

1、普通函数

a、严格模式下

• 直接test()调用函数,this指向undefined，
• window.test()调用函数this指向window。

ps: 在严格模式下， 我们对代码的的调用必须严格的写出被调用的函数的对象。

function test(){
   'use strict'
    console.log(this)
}
test() //undefined
window.test() //window对象

b、非严格模式下

• 当你在全局上下文中调用一个函数时，this 将引用全局对象。
• 当一个函数被定义为对象方法时，this 将引用拥有该方法的对象。

//全局中使用
function test(){
    console.log(this)
}
test() //window对象

//对象内使用
const obj = {
name: “John”,
sayName: function() {
console.log(this.name);
}
};
obj.sayName(); // “John”

2、箭头函数

箭头函数中没有自己的this，所用到的this都是上下文中的this。箭头函数可以保留this的指向，因为它本身没有。

const obj = {
value: ‘hello’,
  print: () => {
    console.log(this.value); //这里的this指向 window
  }
};
const anotherObj = { value: ‘world’ };
obj.call(anotherObj); // 输出：undefined

const person = {
  name: ‘Anna’,
  activities: [‘reading’, ‘hiking’],
  printActivities() {
    this.activities.forEach(activity => {
    console.log(${this.name} loves ${activity});//这里的this指向对象person，箭头函数继承了printActivities方法的this，普通函数printActivities在对象内，this指向对象。
  });
 }
};
person.printActivities();
// 输出：
// Anna loves reading
// Anna loves hiking

3、箭头函数和普通函数的区别

1、外形不同：箭头函数使用箭头定义，普通函数中没有。
2、 箭头函数全都是匿名函数；普通函数可以有匿名函数，也可以有具名函数
3、箭头函数不能用于构造函数；普通函数可以用于构造函数，以此创建对象实例。
4、指向不同：箭头函数中 this 的指向上下文；在普通函数中，this 总是指向调用它的对象，如果用作构造函数，它指向创建的对象实例。
5、箭头函数不具有 arguments 对象：每一个普通函数调用后都具有一个arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。
6、bind、call、applay不能改变箭头函数中的this指向