先來看一下 this 的指向問題：

var name = '小王', age = 12; const obj = {name: '小李',objAge: this.age,info: function () {console.log(this.name + '的年齡是：' + this.age)} } console.log(obj.name, obj.objAge) obj.info()

輸出結(jié)果：

小李 12 小李的年齡是：undefined

解析：

• 在 obj 中的 objAge: this.age 中的 this 指向的是 window，所以獲取的結(jié)果是 12
• 在 obj.info() 調(diào)用時， this 指向的是 obj，調(diào)用 this.age 值為 undefined

var name = '小張' function showName() {console.log(this)console.log(this.name) } showName()

輸出結(jié)果：

Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …} 小張

解析：

• 在全局環(huán)境中： this 指向的都是全局對象，window 對象即是全局對象
• 在函數(shù)環(huán)境中：this 指向的是最終調(diào)用它的那個對象

js中如何使 this 的指向改變

使用 apply、bind 和 call 方法來改變 this 的指向

apply() 的用法

將一個對象作為 apply 的第一個參數(shù)，this 將會綁定到這個參數(shù)對象上，其他參數(shù)都要放進(jìn)數(shù)組中
語法：

fn.apply(target, [aparam1, param2, ... , paramn])

實例：

// 通過 apply() 將 this 指向的 window 對象，重新指向到 obj 對象 var name = '小張' var obj = { name: '小王' } function info() {console.log(this.name) } info() // 小張 info.apply(obj) // 小王// 通過 apply() 將 this 指向的 obj 對象，重新指向到 db 對象 const obj = {name: '小李',age: 33,info: function () {console.log(this.name + '的年齡是：' + this.age)} } const db = {name: '小麗',age: 22 } obj.info.apply(db) //小麗的年齡是：22// apply() 傳遞參數(shù)的形式 const obj = {name: '小李',age: 33,info: function (param1, param2) {console.log(this.name + '的年齡是：' + this.age + '，喜歡' + param1 + '和' + param2)} } const db = {name: '小麗',age: 22 } obj.info.apply(db, ['香蕉','冰淇淋']) //小麗的年齡是：22，喜歡香蕉和冰淇淋

bind() 的用法

第一格參數(shù)為 this 的指向?qū)ο?#xff0c;調(diào)用 fn.bind(target) 會創(chuàng)建一個與 ``fn 相同的函數(shù)體和作用域的函數(shù)，但是，在這個新函數(shù)中，this 將被永久地綁定到了 bind 的第一個參數(shù)，不管函數(shù)是怎么調(diào)用的
語法：

fn.bind(target, param1, ... , param2)

注意：bind() 返回的是一個新的函數(shù)，你必須調(diào)用它才會被執(zhí)行
實例：

// 通過 bind() 將 this 指向的 window 對象，重新指向到 obj 對象 var name = '小張' var obj = { name: '小王' } function info() {console.log(this.name) } info() // 小張 // bind() 返回的是一個新函數(shù)，必須調(diào)用它才會被執(zhí)行 info.bind(obj)() // 小王// 通過 bind() 將 this 指向的 obj 對象，重新指向到 db 對象 const obj = {name: '小李',age: 33,info: function () {console.log(this.name + '的年齡是：' + this.age)} } const db = {name: '小麗',age: 22 } obj.info.bind(db)() //小麗的年齡是：22// bind() 傳遞參數(shù)的形式 const obj = {name: '小李',age: 33,info: function (param1, param2) {console.log(this.name + '的年齡是：' + this.age + '，喜歡' + param1 + '和' + param2)} } const db = {name: '小麗',age: 22 } obj.info.bind(db, '香蕉','冰淇淋')() //小麗的年齡是：22，喜歡香蕉和冰淇淋

call() 的用法

將一個對象作為 call() 的第一個參數(shù)，this 將會被綁定到這個參數(shù)對象上
語法：

fn.call(target, param1, ... , paramn)

實例：

// 通過 call() 將 this 指向的 window 對象，重新指向到 obj 對象 var name = '小張' var obj = { name: '小王' } function info() {console.log(this.name) } info() // 小張 info.call(obj) // 小王// 通過 call() 將 this 指向的 obj 對象，重新指向到 db 對象 const obj = {name: '小李',age: 33,info: function () {console.log(this.name + '的年齡是：' + this.age)} } const db = {name: '小麗',age: 22 } obj.info.call(db) //小麗的年齡是：22// call() 傳遞參數(shù)的形式 const obj = {name: '小李',age: 33,info: function (param1, param2) {console.log(this.name + '的年齡是：' + this.age + '，喜歡' + param1 + '和' + param2)} } const db = {name: '小麗',age: 22 } obj.info.call(db, '香蕉','冰淇淋') //小麗的年齡是：22，喜歡香蕉和冰淇淋

區(qū)別

• apply()、bind()、call() 都可以用來改變 this 的指向問題
• apply() 傳遞的參數(shù)形式是 [param1, ... , paramn] ，bind() 和 call() 傳遞的參數(shù)是 (param1, ... , paramn)
• bind() 會返回一個新函數(shù)，必須調(diào)用它才會執(zhí)行

總結(jié)

以上是生活随笔為你收集整理的js中apply、bind、call的用法和区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。