JavaScript中this指向详解：普通函数、箭头函数与call/apply/bind用法

console.log(this === window); // 在浏览器中输出 true

function regularFunction() {
  console.log(this);
}

regularFunction(); // 非严格模式下指向 window，严格模式下为 undefined

// 演示严格模式下的情况
(function () {
  "use strict";
  regularFunction();
})();

var person = {
  name: "John",
  sayName: function () {
    console.log(this.name);
  }
};

person.sayName(); // 输出 "John"，这里的 this 指向 person 对象

function Person(name) {
  this.name = name;
  this.sayHello = function () {
    console.log("Hello, I'm " + this.name);
  };
}

var john = new Person("John");
john.sayHello(); // 输出 "Hello, I'm John"，这里 this 指向 john 实例

<button id="myButton">Click me</button>

<script>
  var button = document.getElementById("myButton");
  button.onclick = function () {
    console.log(this); // 点击按钮时，这里的 this 指向按钮元素
    				  //打印 ：<button id="myButton">Click me</button>
  };
</script>

// 普通函数
function outerFunction() {
  this.name = "Outer";
  var innerFunction = function () {
    console.log(this.name);
  };
  innerFunction();
}

// 箭头函数
function outerFunctionWithArrow() {
  this.name = "Outer with Arrow";
  var innerFunction = () => {
    console.log(this.name);
  };
  innerFunction();
}

new outerFunction(); // 输出 undefined，因为 innerFunction 中的 this 指向全局对象，全局对象没有 name 属性
new outerFunctionWithArrow(); // 输出 "Outer with Arrow"，箭头函数的 this 继承自 outerFunctionWithArrow 的 this

var obj = { name: 'Jack' }
function fn(a, b) {
  console.log(this)
  console.log(a)
  console.log(b)
}
fn(1, 2)
fn.call(obj, 1, 2)

var obj = { name: 'Jack' }
function fn(a, b) {
  console.log(this)
  console.log(a)
  console.log(b)
}
fn(1, 2)
fn.apply(obj, [1, 2])

var obj = { name: 'Jack' }
function fn(a, b) {
  console.log(this)
  console.log(a)
  console.log(b)
}
fn(1, 2)
var newFn = fn.bind(obj)
newFn(1, 2)

var myObject = {
  value: 10,
  callbackFunction: function () {
    console.log(this.value);
  }
};
[1,2,3].forEach(() => {
  myObject.callbackFunction()
});        //输出三个10

function outerFunction() {
  this.name = "Outer";
  var array = [1, 2, 3];
  array.forEach(() => {
    console.log(this.name);  //打印三次Outer
  });
}
new outerFunction();

//被一个全局函数调用
setTimeout(function () {
  console.log(this); 
}, 1000);

//在全局作用域中独立调用
  function outer(){
    inner()
  }
  function inner(){
    console.log(this);
  }
  outer()

//回调函数中错误使用this
var person = {
  name: "Eve",
  greetLater: function () {
    setTimeout(function () {
      console.log(this.name); // 此处的function为普通函数，作为setTimeout的参数this指向全局对象
    }, 1000);
  }
};

person.greetLater();

var person = {
  name: "Eve",
  greetLater: function () {
    setTimeout( ()=> {
      console.log(this.name); // 输出Eve
    }, 1000);
  }
};

person.greetLater();

//在嵌套函数中混淆 this 指向
var outer = {
  name: "Outer Object",
  innerFunction: function () {
    var inner = {
      name: "Inner Object",
      nestedFunction: function () {
        console.log(this.name); // 这里 this 指向 inner，而不是 outer
      }
    };
    inner.nestedFunction();
  }
};

outer.innerFunction();

var outer = {
  name: "Outer Object",
  innerFunction: function () {
    var self = this;
    var inner = {
      name: "Inner Object",
      nestedFunction: function () {
        console.log(self.name); // 现在可以访问到 outer 的 name 属性，输出 "Outer Object"
      }
    };
    inner.nestedFunction();
  }
};

outer.innerFunction();

var outer = {
  name: "Outer Object",
  innerFunction: function () {
    var inner = {
      name: "Inner Object",
      nestedFunction: () => {
        console.log(this.name); // 输出 "Outer Object"
      }
    };
    inner.nestedFunction();
  }
};

outer.innerFunction();