共计 3379 个字符，预计需要花费 9 分钟才能阅读完成。
函数执行上下文中的 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 是怎么一回事了。
关键词：前端培训
