《复习计划一》你应该在五分钟内掌握的 this 规则

整理复习准备面试 ing ......
🌞 如有错误 欢迎指正

---

核心规则

this 永远指向最后调用它的那个对象

---

五大规则

• 箭头函数由外层作用域决定
• 如果 new 关键词出现，会创建新的对象，this 指向新创建的函数
• 显示绑定（通过 apply、call、bind 触发函数，this 指向传入的第一个参数）
• 隐式绑定（当函数有上下文对象时, 如 obj.foo()）
• 默认绑定（非严格模式下 this 指向全局，严格模式下为 undefined）
• 上述规则，优先级依次递减

---

例题

规则一 默认绑定

题目

var name = 'window'
let name2 = 'window10'
const name3 = 'window11'
function getName () {
  var name = 'wanli'
  function inner () { 
    console.log(this.name)
  }
  inner()
  console.log(this.name2)
  console.log(this.name3)
}

getName()

结果

// window
// undefined
// undefined
// undefined

getName() 函数内的 this 指向的是 window，因为是 window 调用的 getName()，内部 inner() 函数 this 指向同样是 window。
console.log(this.name2)、console.log(this.name3) 打印 undefined 是由于 let、const 是不会挂载到 window 上的。

---

规则二 隐式绑定

题目

const User2 = {
  name: "wanli2",
  getName2: function() {
    console.log(this.name); 
  }
};

User2.getName2(); 

结果

// wanli2

User2.getName2()，是个普通函数，this 指向最后调用它的对象，即 User2。

---

规则三 显示绑定

题目

function getName() {
  console.log(this.name)
  return function() {
    console.log(this.name)
  }
}
var cat = { name: 'wanli' }
var name = '史莱姆'

getName()
getName.call(cat)
getName().call(cat)

结果

// 史莱姆
// wanli
// 史莱姆
// wanli

getName() 中 this 指向 window，因此打印 史莱姆。
getName.call(cat) 中 this 指向 cat，因此打印 wanli。 getName().call(cat) 中 getName() 的 this 指向 window，因此打印 史莱姆，返回的函数 this 指向 cat，因此打印 wanli。

---

规则四 new 关键词

见下面题目

---

规则五 箭头函数

箭头函数并不会创建其自身的执行上下文，箭头函数中的 this 取决于它的外部函数，即谁调用它 this 就继承自谁。

题目

var name = "wanli";

function User(name) {
  this.name = name;
  this.getName = function() {
    console.log(this.name);
  };

  this.getName2 = () => {
    console.log(this.name);
  };
}

const User2 = {
  name: "wanli2",
  getName2: () => {
    console.log(this. name);
  }
};

var user1 = new User("史莱姆");
user1.getName(); 
user1.getName2();
User2.getName2(); 

结果

// 史莱姆
// 史莱姆
// wanli
// wanli2

user1.getName2() 为箭头函数，指向定义函数时外层作用域，此时的外层作用域为 User。
User2.getName2()，箭头函数，由于 User2 是个对象，因此 this 指向应该是 window。

总结

其实 this 指向并不困难，多熟悉熟悉就明白了，这也是比较基础的知识。

文中出现的史莱姆是谁？