先来看一下 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()
会返回一个新函数,必须调用它才会执行