JavaScript中的this关键字的指向及常见使用场景

翻滚的胖子
2023-06-20 09:44:56
JavaScript Java

在JavaScript编程中，this关键字是常用的一个关键字。它的指向在不同的场景下会有所不同，因此理解this的指向及常见使用场景对于编程人员来说非常重要。

基础概念

this关键字指代的是函数运行时的上下文对象，也就是函数执行时所处的环境。它的指向是在函数执行时确定的，而不是在函数定义时确定的。

函数中的this

在函数中，this通常指向调用该函数的对象。例如：

var obj = {name: 'Tom', sayName: function() {console.log(this.name)}};
obj.sayName();

在这个例子中，this指的是obj对象，因此输出的结果是Tom。

常见使用场景

1.函数中的this

函数中的this指向调用该函数的对象，这个特性可以用来构造一个可复用的对象模板。例如：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var person1 = new Person('Tom', 18);
var person2 = new Person('Jerry', 20);
console.log(person1.name); // Tom
console.log(person2.age); // 20

在这个例子中，Person函数构造了一个Person对象模板，this指向了实例化的对象，从而实现了对不同对象的属性赋值。

2.对象中的this

在对象中，this指向该对象本身。例如：

var obj = {
    name: 'Tom',
    sayName: function() {
        console.log(this.name);
    }
}

obj.sayName(); // Tom

在这个例子中，this指向obj对象本身，从而实现了对obj对象中属性的访问。

3.事件中的this

在事件中，this指向触发该事件的元素。例如：

<button id="myButton">Click Me</button>

var button = document.getElementById('myButton');
button.addEventListener('click', function() {
    console.log(this.id);
});

在这个例子中，this指向了button元素本身，从而实现了对该元素id属性的访问。