一文搞定JavaScript不同场景中 this 的指向问题

"use strict"; // 严格模式
var name = "王五"; // var声明变量会挂载到window全局对象
let test = "测试"; // let/const 不会污染window
console.log(window.name); // 王五
console.log(window.test); // undefined

function normalFn() {
  console.log(this); // window
  console.log(this.name); // 王五
}
normalFn();

"use strict";
function normalFn() {
  console.log(this); // undefined
  console.log(this.name); // Uncaught TypeError
}
normalFn();

let obj = {
  name: "张三",
  say: function () {
    console.log(this.name);
  }
};
const fn = obj.say; // 仅拿到函数引用，脱离对象
fn(); // 严格模式下undefined，非严格模式输出全局name

let obj = {
  name: "张三",
  say: function () {
    console.log(this); // {name: "张三", say: ƒ}
    console.log(this.name); // 张三
  }
};
obj.say();

let a = { name: "A", fn: function() { console.log(this.name) } }
let b = { name: "B", a: a }
b.a.fn(); // 输出A，this指向a，不是b

let obj2 = { name: "李四" };
obj.say.call(obj2); // this指向obj2，输出 李四
obj.speak.call(obj2, "你好", "我是李四");

obj.speak.apply(obj2, ["你好", "我是李四"]);

const fn2 = obj.speak.bind(obj2);
fn2("你好", "我是李四"); // 新函数执行，this永远固定obj2

const oForm = document.querySelector('.add-items');
function addItem(e) {
  console.log(this.name); // 想要拿到obj的name
  e.preventDefault();
}
// call/apply会直接执行函数，不能丢给addEventListener
const addItemBind = addItem.bind(obj); 
oForm.addEventListener('submit', addItemBind);

document.querySelector('.lnk').addEventListener('click', goBaidu);
function goBaidu(e) {
  console.log(this); // <a class="lnk"> 触发点击的a标签
  e.preventDefault(); // 阻止a标签默认跳转
}

function Person(name) {
  this.name = name; // this指向新建实例
}
const p = new Person("小明");
console.log(p.name); // 小明

let testObj = {
  name: "箭头测试",
  fn: () => {
    console.log(this.name); // 外层全局name：王五，不会指向testObj
  }
}
testObj.fn();

"use strict";
// 全局var挂载window
var name = "王五";
let oForm = document.querySelector('.add-items');

let obj = {
  name: "张三",
  say: function () {
    console.log("say的this：", this);
    console.log("name：", this.name)
  },
  speak: function (a, b) {
    console.log("参数：", a, b);
    console.log("speak的this：", this);
  }
}
let obj2 = { name: "李四" };

// 1. 对象方法调用
obj.say();

// 2. 提取为普通函数调用
const fn = obj.say;
// fn(); // 严格模式 this = undefined

// 3. call / apply 临时修改this
obj.say.call(obj2);
obj.say.apply(obj2);
obj.speak.call(obj2, '你好', '我是李四');
obj.speak.apply(obj2, ['你好', '我是李四']);

// 4. bind 返回新函数，永久绑定this
const fn2 = obj.speak.bind(obj2);
fn2('你好', '我是李四');

// 5. bind用于事件监听
function addItem(e) {
  console.log("表单提交this：", this);
  e.preventDefault();
}
const addItemBind = addItem.bind(obj);
oForm.addEventListener('submit', addItemBind);

// 6. DOM事件原生this指向DOM
document.querySelector('.lnk').addEventListener('click', goBaidu);
function goBaidu(e) {
  console.log("点击链接this：", this);
  e.preventDefault();
}

// 7. 箭头函数无自身this
const arrowTest = () => {
  console.log("箭头函数this：", this);
}
arrowTest();