绝大部分的新手,在学习JavaScript时都会遇到一个非常常见的问题:无法理解 this 的指向问题。这也是Javascript的一个复杂和有争议性的部分,本攻略旨在帮助读者归纳总结“js中this的指向问题”。
什么是 this
this 是 JavaScript 中的一个关键字,它是一个对象,并且它是由函数来调用的。this 的值在每个函数调用的时候都可能发生变化,具体的指向对象取决于函数的调用方式。
this 的指向问题
在JavaScript中,this 的指向可以分成以下四种情况:
- 全局上下文中的this
当函数不作为对象的方法调用时,this 指向全局对象 window。
javascript
console.log(this); // window
- 对象方法中的this
当一个函数作为对象的方法被调用时,this会指向该对象。
javascript
var obj = {
name: 'John',
age: 20,
sayName: function(){
console.log(this.name); // John
}
}
obj.sayName();
- 构造函数中的 this
在构造函数中,this 指向新创建的对象。
javascript
function Person(name, age){
this.name = name;
this.age = age;
}
var john = new Person('John', 20);
console.log(john.name); // John
- 使用 call()、apply()、bind() 显式指定this
call()、apply()、bind() 方法可以显式的指定函数执行时 this 的指向:
```javascript
function sayHello() {
console.log('Hello, ' + this.name);
}
var person = {
name: 'John'
};
sayHello.call(person); // 输出 "Hello, John"
sayHello.apply(person); // 输出 "Hello, John"
var bindedFunction = sayHello.bind(person);
bindedFunction(); // 输出 "Hello, John"
```
总结
本攻略详细总结了JavaScript中this的指向问题,从全局上下文、对象方法、构造函数以及显式指向的角度全面讲解了this的使用方法。对于想要精通JavaScript编程的开发人员来说,理解和掌握this的指向问题是非常重要的。
示例说明
示例一:
var obj = {
name: 'John',
age: 20,
sayName: function() {
console.log(this.name);
}
};
obj.sayName(); // John
在这个示例中,this 指向 obj 对象,因此 sayName() 方法被执行时,会输出对象 obj 的属性 name 的值 "John"。
示例二:
function sayHello() {
console.log('Hello, ' + this.name);
}
var person = {
name: 'John'
};
var bindedFunction = sayHello.bind(person);
bindedFunction(); // 输出 "Hello, John"
在这个示例中,使用 bind() 方法显式地将函数 sayHello() 绑定到 person 对象上。因此,bindedFunction() 函数被调用时,this 指向了 person 对象,输出 "Hello, John"。