JavaScript学习-对象方法this

JavaScript学习-对象方法this

注意：this的值在函数被调用时动态确定，函数如何被调用决定了this的值。

详细介绍：

1. 全局上下文下的this：

• 在全局上下文中，this指向全局对象（浏览器中通常指window）。
• 在浏览器环境下，this在全局作用域中指向window对象。

// 全局上下文中的 this
console.log(this); // 在浏览器中可能是 window 对象

2. 函数中的this：

• 在函数内部，this值取决于函数的调用方式。
• 若函数作为普通函数调用，this指向全局对象（在非严格模式下），或者是undefined（在严格模式下）。
• 若函数作为对象的方法调用，this指向的调用该方法的对象。

// 函数中的 this
function regularFunction() {
  console.log(this);
}
regularFunction(); // 在非严格模式下，可能是 window；在严格模式下，是 undefined
// 对象方法中的 this
const obj = {
  method: function() {
    console.log(this);
  }
};
obj.method(); // 指向 obj

注：严格模式就是在代码第一行添加'use strict';表示脚本以现代方式工作，摒弃旧方法。

3. 构造函数中的this：

• 当函数被用作构造函数（使用new关键字调用时），this指向新创建的对象实例。
• 在构造函数中，通过this可以将属性和方法添加到新创建的对象。

// 构造函数中的 this
function Constructor() {
  this.property = 'value';
}
const instance = new Constructor(); // 指向新创建的对象实例instance

4. 事件处理函数中的this：

• 在事件处理函数中，this通常指向触发事件的函数。
• 但是在使用箭头函数的事件处理函数中，this的值由外围的上下文决定不是动态确定的。

// 事件处理函数中的 this
document.getElementById('example').addEventListener('click', function() {
  console.log(this); // 指向触发事件的元素
});

5. 箭头函数中的this：

• 箭头函数没有自己的this，它继承了外部函数的this。
• 在箭头函数中，this的值由定义时外部上下文决定，而不是调用时。

// 箭头函数中的 this
const arrowFunction = () => {
  console.log(this); // 继承外部上下文的 this
};
arrowFunction();

例题

创建对象calculator有以下三种方法：
read()提示输入两个值并将它们保存为对象属性，名称分别为a和b。
sum()返回保存值的总和。
mul()将保存的值相乘并返回结果。

代码如下：

let calculator = {
    read: function() {
      this.a = prompt("请输入一个值：",0);  
      this.b = prompt("请输入另一个值：",0);
    },
    sum: function() {
    //因为prompt返回的是字符串，因此需要转换，我这里使用parseFloat转换为浮点数进行运算。
      return parseFloat(this.a) + parseFloat(this.b);
    },
    mul: function() {
      return parseFloat(this.a) * parseFloat(this.b);
    }
  }
  calculator.read();
  alert( calculator.sum() );
  alert( calculator.mul() );

阔以思考下以上的this指向的谁。