函数执行上下文中的 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
jszhang 打开新网页在新打开的网页中的控制台，输入 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 是怎么一回事了。
关键词：前端培训
