JavaScript 对 this 对象的理解

一、this的概念

this是执行上下文中的一个属性，它指向最后一个调用这个方法的对象。（这句话听着很拗口）

简单理解就是：谁调用了函数（或方法），this就指向谁。（就这样记就好）

至于“指向最后一个调用这个方法的对象”，可以通过举一个例子解释：

const a = { name: '11', b: { name: '22', c: { name: '33', fn: function () { console.log(this.name) }, } } } a.b.c.fn()

可以看到。这里a、b、c 看着好像都调用了 fn 函数，但是我们都知道，最后调用者是 c，所以这里的“指向最后一个调用这个方法的对象”，也就能通过这个例子感受到。

二、this的指向可以通过四种调用模式来判断

1. 函数调用模式：当一个函数不是一个对象的属性时，直接作为函数来调用时，this 指向全局对象。（补充 -> 函数定义：不依附于任何对象、可以被直接调用的代码块。）

// 1. 函数调用模式 function fn() { console.log(this) // this 指向全局 (this === window) } fn() // 这里本质上是：window.fn() 这样调用函数的

2. 方法调用模式：如果一个函数作为一个对象的方法来调用时，this指向这个对象。（补充 -> 方法定义：作为对象属性存在，并通过“对象.属性()”形式调用的函数。）

// 2. 方法调用模式 const obj = { fn: function () { console.log(this) } } obj.fn() // this 指向调用者 -> obj

3. 构造器调用模式：如果一个函数用 new 调用时，函数执行前会新创建一个对象，此时，this会指向这个新对象。

// 3. 构造器调用模式 function Person(name, age) { this.name = name this.age = age } // 不使用 new 的情况 // const p1 = Person('lxy', 18) // 如果不使用 new 的话，这里相当于函数调用模式，window.Person()，那么此时 this 指向全局 // console.log(p1) // undefined // console.log(name) // lxy -> window.name // console.log(age) // 18 -> window.age // 使用 new 的情况 const p2 = new Person('778', 18) // 如果使用 new 的话，这里会创建一个新的对象出来，此时 this 会指向这个新对象，也就是下面的 p2 console.log(p2) // {name: '778', age: 18} console.log(p2.name) // 778 console.log(p2.age) // 18

4. apply、call、bind调用模式，这三个函数都可以指定调用函数的 this 指向。

// 4. apply, call, bind 调用模式 function fn(x, y) { console.log(this) return x + y } const obj = { name: 'lxy' } const res1 = fn(1, 2) // 此时 this 为 window（全局） console.log(res1) // 3 const res2 = fn.apply(obj, [2, 3]) // 此时 this 为 obj console.log(res2) // 5 const res3 = fn.call(obj, 3, 4) // 此时 this 为 obj console.log(res3) // 7 const newFn = fn.bind(obj, 4, 5) // 调用 bind 得到一个新函数，该函数的 this 指向 obj const res4 = newFn() // 调用新函数 console.log(res4) // 9

function fn(name) { console.log(`我的名字是：${name}`) console.log(`我的年龄是：${this.age}`) } fn('lxy') // name -> lxy ; age -> undefined console.log('----------------------------------------') const obj = { age: 18 } const newFn = fn.bind(obj, 'lxy') newFn() // name -> lxy ; age -> 18 （此时 this 指向 obj，所以 age 有值） console.log('----------------------------------------') // 使用 apply 去改变 newFn 的 this 指向 newFn.apply({ age: 20 }, ['zzz']) // 这里仍然 name -> lxy ; age -> 18 并没有发生改变，说明 this 指向并没有发生改变 // 注意：这里会发现，为什么传入了 zzz 参数，但是 name 并没有发生改变，这是因为： // "在第一次使用 bind 的时候，lxy 这个参数已经固定了，它会作为函数的第一个参数。 // 后续调用时传入的参数会排在 bind 固定参数的后面。 // 由于函数只定义了一个参数 name，它只会取参数列表中的第一个，也就是 bind 固定的 'lxy'。" console.log('----------------------------------------') // 使用 call 去改变 newFn 的 this 指向 newFn.call({ age: 30 }, ['ccc']) // 这里与前者效果一样，this 未发生改变 console.log('----------------------------------------') // 使用 new 的方式去改变 newFn 的 this 指向 const a = new newFn('eee') // 可以发现 age -> undefined 说明 this 发生了改变，this 现在指向了 new 出来的新对象上去了，新对象上没有 age 所以显示为 undefined，name 仍然没有变，还是跟上面的一个道理