函數執行上下文中的 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 是怎麼一回事了。
關鍵詞：前端培訓
