函数执行上下文中的 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

25

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 是怎么一回事了。

关键词：前端培训