// 沒有this的寫法，需要手動(dòng)傳遞對(duì)象
function identify(context) {
  return context.name.toUpperCase()
}
function speek(context) {
  var greeting = 'hello, I am ' + identify(context)
  console.log(greeting); // 輸出：hello, I am TOM
}
var me = { name: 'Tom' }
speek(me) // 每次調(diào)用都要手動(dòng)傳入me對(duì)象
// 有this的寫法，無需手動(dòng)傳遞，更簡(jiǎn)潔
function identify() {
  return this.name.toUpperCase() // this自動(dòng)指向調(diào)用者
}
function speek() {
  var greeting = 'Hello, I am ' + identify.call(this)
  console.log(greeting); // 輸出：Hello, I am TOM
}
var me = { name: 'Tom' }
speek.call(me) // 用call綁定this，無需重復(fù)傳參

{
  let a = this
  console.log(a); // 輸出：Window 對(duì)象（瀏覽器環(huán)境）
}
// 全局作用域直接打印this
console.log(this === window); // 輸出：true

// 實(shí)例1：直接調(diào)用函數(shù)
var a = 1
function foo() {
  console.log(this.a); // this指向window，window.a = 1
}
function bar () {
  var a = 2
  foo() // 獨(dú)立調(diào)用foo，this不指向bar，依然指向window
}
bar() // 輸出：1 ?
// 實(shí)例2：嵌套函數(shù)獨(dú)立調(diào)用
var a = 1
function bar () {
  var a = 2
  function foo() {
    console.log(this.a); // 獨(dú)立調(diào)用，this指向window
  }
  foo() // 獨(dú)立調(diào)用foo
bar() // 輸出：1 ?
// 實(shí)例3：無上下文調(diào)用函數(shù)
function foo() {
  var a = 1
  bar(this.a) // this指向window，window.a未定義，所以傳遞undefined
}
function bar(x) {
  console.log(x); // 輸出：undefined ?
}
foo() // 獨(dú)立調(diào)用foo，this指向window

// 實(shí)例1：對(duì)象直接調(diào)用函數(shù)
function foo() {
  console.log(this.a); // this指向調(diào)用者obj
}
var obj = {
  a: 1,
  foo: foo // foo作為obj的屬性
}
obj.foo() // 調(diào)用者是obj，輸出：1
// 實(shí)例2：多層對(duì)象調(diào)用（this指向最近的調(diào)用者）
function foo() {
  console.log(this.a);
}
var obj = {
  a: 1,
  foo: foo
}
var obj2 = {
  a: 2,
  foo: obj // obj2的foo屬性指向obj
}
obj2.foo.foo() // 最終調(diào)用foo的是obj，this指向obj，輸出：1

// 實(shí)例：函數(shù)引用被賦值，隱式丟失
function foo() {
  console.log(this.a);
}
var obj = {
  a: 1,
  foo: foo
}
// 把obj.foo賦值給變量bar，此時(shí)bar是獨(dú)立函數(shù)引用
var bar = obj.foo
var a = 2 // window.a = 2
bar() // 獨(dú)立調(diào)用bar，this指向window，輸出：2 （原本以為指向obj，實(shí)際丟失綁定）

// 共同前提
var obj = { a: 1 }
function foo(x, y) {
  console.log(this.a, x + y); // this指向我們手動(dòng)綁定的obj
}
// 1. call方法：直接調(diào)用函數(shù)，參數(shù)逐個(gè)傳遞
foo.call(obj, 1, 2) // 輸出：1 3 ?（call綁定this為obj，參數(shù)1、2逐個(gè)傳入）
// 2. apply方法：直接調(diào)用函數(shù)，參數(shù)以數(shù)組形式傳遞
var arr = [1, 2]
foo.apply(obj, arr) // 輸出：1 3 ?（apply參數(shù)是數(shù)組，會(huì)自動(dòng)解構(gòu)）
// 3. bind方法：不直接調(diào)用函數(shù)，返回一個(gè)“綁定了this”的新函數(shù)
const bar = foo.bind(obj, 2, 4) // 綁定this為obj，預(yù)設(shè)參數(shù)2、4
bar(3) // 調(diào)用新函數(shù)，額外傳入?yún)?shù)3，最終x=2，y=4+3=7？不！注意：bind預(yù)設(shè)參數(shù)在前
// 正確解析：bind預(yù)設(shè)的2、4是前兩個(gè)參數(shù)，bar(3)是第三個(gè)參數(shù)？不，foo只有x、y兩個(gè)參數(shù)
// 最終x=2，y=4，輸出：1 6 ?（bind綁定后，參數(shù)會(huì)固定，后續(xù)傳入的參數(shù)會(huì)忽略多余的）

// 實(shí)例1：正常new調(diào)用，this指向?qū)嵗?
function Animal() {
  this.name = '米奇' // this指向new創(chuàng)建的實(shí)例p
}
let a = new Animal()
let a2 = new Animal()
console.log(a.name); // 輸出：米奇 ?（a是實(shí)例，this指向a）
console.log(a2.name); // 輸出：米奇 ?（a2是另一個(gè)實(shí)例，this指向a2）
// 實(shí)例2：特殊情況——構(gòu)造函數(shù)return引用類型，new綁定失效（如果renturn 原始對(duì)象，對(duì)new的綁定不影響）
function Animal() {
  this.name = '米奇'
  return 123 // return的是原始類型
}
let a = new Animal()
console.log(a); // 輸出：Animal { name: '米奇' } ?
console.log(a.name); // 輸出：米奇 ?
function Animal() {
  this.name = '米奇'
  return {b: 1} // return的是引用類型（對(duì)象）
}
let a2 = new Animal()
console.log(a2); // 輸出：{b: 1} ?（new綁定失效，返回return的對(duì)象）
console.log(a2.name); // 輸出：undefined ?（a2不再是Animal實(shí)例，沒有name屬性）

function foo() {
  var bar = () => {
    this.a = 2 // 箭頭函數(shù)沒有this，指向外層非箭頭函數(shù)foo的this
  }
  bar()
}
var obj = {
  a: 1,
  baz: foo
}
obj.baz() // 調(diào)用foo，foo的this指向obj（隱式綁定）
console.log(obj); // 輸出：{a: 2, baz: ?} ?（箭頭函數(shù)的this指向obj，修改了obj.a）
// 驗(yàn)證：箭頭函數(shù)this無法修改
var obj2 = {a: 3}
bar.call(obj2) // 試圖用call修改this，無效
console.log(obj.a); // 依然是2 ?
console.log(obj2.a); // 還是3 ?