目录
- 对this对象的理解
- 1. 函数调用模式:
- 2. 方法调用模式:
- 3. 构造器调用模式:
- 4. apply、call和bind调用模式:
对this对象的理解
在JavaScript中,this关键字是一个非常重要的概念,它用于指向当前执行上下文中的对象。具体来说,this的值是在函数调用时确定的,它的值取决于函数的调用方式。
在JavaScript中,this的指向可以通过四种调用模式来判断:
1. 函数调用模式:
当一个函数不是一个对象的属性时,直接作为函数来调用时,this指向全局对象(在浏览器中是window对象,在Node.js中是global对象)。例如:
function test() {
console.log(this)
}
test() // 输出全局对象,一般是window对象
2. 方法调用模式:
如果一个函数作为一个对象的方法来调用时,this指向这个对象。例如:
var obj = {
name: 'Xin',
sayName: function () {
console.log(this.name)
}
}
obj.sayName() // 输出Xin
3. 构造器调用模式:
如果一个函数用new调用时,函数执行前会新创建一个对象,this指向这个新创建的对象。例如:
function Person(name) {
this.name = name
}
var person = new Person('Xin')
console.log(person.name) // 输出Xin
4. apply、call和bind调用模式:
这三个方法都可以显示的指定调用函数的this指向。其中apply方法接收两个参数:一个是this绑定的对象,一个是参数数组。call方法接收的参数,第一个是this绑定的对象,后面的其余参数是传入函数执行的参数。也就是说,在使用call()方法时,传递给函数的参数必须逐个列举出来。bind方法通过传入一个对象,返回一个this绑定了传入对象的新函数。这个函数的this指向除了使用new时会被改变,其他情况下都不会改变。例如:
function sayName() {
console.log(this.name)
}
var obj1 = {
name: 'John'
}
var obj2 = {
name: 'Mike'
}
sayName.call(obj1) // 输出John
sayName.call(obj2) // 输出Mike
var boundSayName = sayName.bind(obj1)
boundSayName() // 输出John
需要注意的是,在JavaScript中,函数嵌套时,this的指向可能会发生变化。在这种情况下,需要使用that或self等变量来保存正确的this指向。另外,在使用箭头函数时,this的指向与普通函数不同,它的值继承自外层函数的this值。
持续学习总结记录中,回顾一下上面的内容:
在JavaScript中,this关键字是一个非常重要的概念,它用于指向当前执行上下文中的对象。this的指向可以通过四种调用模式来判断。需要注意,在函数嵌套和使用箭头函数时,this的指向可能会发生变化。