js中apply、bind、call的用法和区别

小咪咪 2023-03-04 15:28 48阅读 0赞

先来看一下 `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()

**输出结果：**

小李 12
    小李的年龄是：undefined

**解析：**

*  在 obj 中的 `objAge: this.age` 中的 `this` 指向的是 `window`，所以获取的结果是 `12`
 *  在 `obj.info()` 调用时， `this` 指向的是 `obj`，调用 `this.age` 值为 `undefined`

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

**输出结果：**

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

**解析：**

*  在全局环境中： `this` 指向的都是全局对象，`window` 对象即是全局对象
 *  在函数环境中：`this` 指向的是最终调用它的那个对象

## js中如何使 this 的指向改变 ##

使用 `apply`、`bind` 和 `call` 方法来改变 `this` 的指向

## apply() 的用法 ##

将一个对象作为 `apply` 的第一个参数，`this` 将会绑定到这个参数对象上，其他参数都要放进**数组**中  
语法：

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() 传递参数的形式
    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() 的用法 ##

第一格参数为 `this` 的指向对象，调用 `fn.bind(target)` 会创建一个与 \`\`fn 相同的函数体和作用域的函数，但是，在这个新函数中，`this` 将被永久地绑定到了 `bind` 的第一个参数，不管函数是怎么调用的  
语法：

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

**注意：bind() 返回的是一个新的函数，你必须调用它才会被执行**  
实例：

// 通过 bind() 将 this 指向的 window 对象，重新指向到 obj 对象
    var name = '小张'
    var obj = {  name: '小王' }
    function info() { 
    	console.log(this.name)
    }
    info() // 小张
    // bind() 返回的是一个新函数，必须调用它才会被执行
    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() 传递参数的形式
    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()` 的第一个参数，`this` 将会被绑定到这个参数对象上  
语法：

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() 传递参数的形式
    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，喜欢香蕉和冰淇淋

## 区别 ##

*  `apply()`、`bind()`、`call()` 都可以用来改变 `this` 的指向问题
 *  `apply()` 传递的参数形式是 `[param1, ... , paramn]` ，`bind()` 和 `call()` 传递的参数是 `(param1, ... , paramn)`
 *  `bind()` 会返回一个新函数，必须调用它才会执行