js 之 this 指向问题 - 函数执行上下文中的 this - 个人文章

函数执行上下文中的 this

在上面我们知道，一般的调用方法，是调用 window 上的方法。

那怎么获取当前函数的 this 呢？

1 通过 call/bind/apply 改变 this

this.myName = 'jszhang';
let foo = function() {
  this.myName = 'zhangsan';
}
foo();
console.log(window.myName); // 输出啥？
console.log(foo.myName); // 输出啥？

这时候的 this 指向 window，所以输出结果为；

zhangsan

undefined

通过 call 绑定后：

this.myName = 'jszhang';let foo = function() {
  this.myName = 'zhazhazhang';}foo.call(foo);console.log(window.myName);
   // 输出啥？
console.log(foo.myName); // 输出啥？

输出结果为：

jszhang

zhazhazhang

当然你也可以换成 apply 和 bind，这里不做累述。

2 通过对象调用方法设置
使用对象来调用其内部的一个方法，该方法的 this 是指向对象本身的。

案例 1

let myObj = {
  name: 'jszhang',
  showThis: function() {
    console.log(this.name);
  },};myObj.showThis(); // 输出啥？

答案：输出 jszhang。

我们要时刻牢记：谁调用的指向谁。这里是通过 myObj 进行的一个调用，所以此刻的 this 指向 myObj。而 myObj 里面存有 name: jszhang，所以输出 jszhang。

当然，我们要有自知之明：

案例 2

let myObj = {
  myName: 'jszhang',
  showThis: function() {
    console.log(this.myName);
  },};
let foo = myObj.showThis;foo(); // 输出啥？

这时候它又变成 window 指向了，此刻 let foo = myObj.showThis 只是一个定义，真正执行是在 foo()。那么此刻 foo() 是咋搞的呢？window.foo() 啊！毋庸置疑输出 undefined。

案例 3


let myObj = {
  name: 'jszhang',
  showThis: function() {
    console.log(this.name);
  },}
let foo = myObj.showThis;foo(); // 输出啥？

一般来说，这段代码输出应该是 undefined。

但是，这里需要注意的是，window.name 是当前 window 的名称，它是 window.open() 打开新网页这个方法的第二个参数的值。

所以这里输出的 window.name 是个空值 ''，或者当前存在的 window 的名称。

jszhang 通过一个例子带小伙伴们看看这个是怎么来的：

index.html


<!DOCTYPE html><html><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jszhang</title></head><body>
  <button>打开新网页</button>
 
  <script>
    (function() {
      const btn = document.querySelector('.btn');
      btn.onclick = function() {
        window.open('index.html', 'jszhang 的网页');
      }
    })()
  </script></body></html>

在新打开的网页中的控制台，输入 window.name，获取 jszhang 的网页。

结论：

在全局环境中调用一个函数，函数内部的 this 指向的是全局变量 window。

通过一个对象来调用其内部的一个方法，该方法的执行上下文中的 this 指向对象本身。

3 通过构造函数中设置

this.name = 'jszhang';let Foo = function() {
  this.name = 'zhazhazhang';}let foo = new Foo();console.log
  (foo.name);// 输出啥？
  console.log(window.name); // 输出啥？

答案是：

zhazhazhang

jszhang

在将这个答案的缘故之前，我们看下 new Foo() 中，JavaScript 引擎做了什么事：

首先创建一个空对象 tempObj = {}。

接着调用 Foo.apply 方法，将 tempObj 作为 apply 方法的参数，这样当 Foo 的执行上下文创建时，它的 this 就指向 tempObj 对象。

然后执行 Foo 函数，此时的 Foo 函数执行上下文中的 this 指向了 tempObj 对象。

最后返回 tempObj 对象。

function myNew(func, ...args) {
  const tempObj = {};
  func.apply(tempObj, args);
  return tempObj;}
this.name = 'jszhang';let Foo = function(name, age) {
  this.name = name;
  this.age = age;}let foo = myNew(Foo, 'zhazhazhang', 25);console.log
  (foo.name);  // 输出啥？
  console.log(foo.age); // 输出啥？
  console.log(window.name); // 输出啥？

如上，我们可以看到此时 this 是属于 tempObj 的，绑定到 foo 上去了，从而获取到：

zhazhazhang

jszhang

当然，了解到这里，我们还是完善下 new 这个手写方法，免得误导小伙伴们觉得 new 就做了那么点事：

function myNew(func, ...args) {
  // 1. 判断方法体
  if (typeof func !== 'function') {
    throw '第一个参数必须是方法体';
  }

  // 2. 创建新对象
  const obj = {};

  // 3. 这个对象的 __proto__ 指向 func 这个类的原型对象
  // 即实例可以访问构造函数原型（constructor.prototype）所在原型链上的属性
  obj.__proto__ = Object.create(func.prototype);

  // 为了兼容 IE 可以让步骤 2 和 步骤 3 合并
  // const obj = Object.create(func.prototype);

  // 4. 通过 apply 绑定 this 执行并且获取运行后的结果
  let result = func.apply(obj, args);

  // 5. 如果构造函数返回的结果是引用数据类型，则返回运行后的结果
  // 否则返回新创建的 obj
  const isObject = typeof result === 'object' && result !== null;
  const isFunction = typeof result === 'function';
  return isObject || isFunction ? result : obj;}
// 测试function Person(name) {
  this.name = name;
  return function() { // 用来测试第 5 点
    console.log('返回引用数据类型');
  };}// 用来测试第 2 点和第 3 点Person.prototype.sayName = function() {
  console.log(`My name is ${this.name}`);}const me = myNew(Person, 'jszhang'); // 用来测试第 4 点me.sayName(); // My name is jszhangconsole.log(me); // Person {name: 'jszhang'}
// 用来测试第 1 点// const you = myNew({ name: 'jszhang' }, 'jszhang'); 
// 报错：第一个参数必须是方法体

这样，我们就知道构造函数中的 new 是怎么一回事了。

关键词：前端培训

js 之 this 指向问题 - 函数执行上下文中的 this

小谷哥

引用和评论

MySQL核心技术_常见函数