JavaScript对象方法

news2024/11/29 20:47:56

在 JavaScript 中，对象可以包含方法，即函数作为它的属性。这些被称为对象函数或方法。
例如：

const ITshareArray = {
  firstname: "张三",
  secondname: "二愣子",
  birthYear: "1996",
  job: "程序员",
  friends: ["李四", "王五", "牛二"],

  calaAge: function (birthYear) {
    return 2037 - birthYear;
  },
};

console.log(ITshareArray.calaAge(1998));  //使用点号运算符去调用对象中的函数
console.log(ITshareArray["calaAge"](1998));  //使用括号运算符去调用对象中的函数

在这里插入图片描述

● 但是上述代码中，有一个设计问题，我们在打印时候，可以随意输入对象的出生年，会导致于对象中的年份不匹配，按照正确的设计理念来说，我们去计算对象中的年龄是，对象的年份应该是从对象获取，以来达到对象年龄的正确性，而想在对象方法中对象的key，我们可以使用this关键字
这里简单的介绍一个this这个关键字，后面我们会对this这个关键字做详细解释；

this

例：

const ITshareArray = {
  firstname: "张三",
  secondname: "二愣子",
  birthYear: "1996",
  job: "程序员",
  friends: ["李四", "王五", "牛二"],

  calaAge: function (birthYear) {
    return 2037 - this.birthYear;
  },
};

console.log(ITshareArray.calaAge());
// console.log(ITshareArray["calaAge"](1998));

当在 JavaScript 中使用 this 关键字时，它引用的是当前代码执行的上下文对象。这个上下文对象可以是一个函数内部的对象或一个对象本身。
注：如果没有正确地设置 this，可能会导致代码出错或返回预期外的结果。在函数作为方法调用时，this 的值是调用该方法的对象。在函数作为普通函数调用时，this 的值通常是全局对象（浏览器中的 window）。但是，在严格模式下，函数作为普通函数调用时，this 的值为 undefined。

● 但是，这里有一个问题，为什么我们不可以写成如下？

 calaAge: function (birthYear) {
    return 2037 - ITshareArray.birthYear;
  },

这样也会完美的运行，但是在编程，我们始终会有一个原则，就是不要去使用重复的自己。什么意思么？就是如果对象的名称有改变，那么上述的代码就会出问题，但是如果你使用this关键字的话，就不会出问题，因为this是始终指向对象方法中的整个对象，对象名称进行改变，并不会影响this的指向出现问题；

● 除此之外，我们还可以通过this关键字，将我们计算出来的年龄存储到对象中，以方便我们后面如果需要大量重复的去计算年龄的时候，我们只需要去对象中检索关键字即可，如下所示

const ITshareArray = {
  firstname: "张三",
  secondname: "二愣子",
  birthYear: "1996",
  job: "程序员",
  friends: ["李四", "王五", "牛二"],
  calaAge: function () {
    this.age = 2037 - this.birthYear;
    return this.age;
  },
};
console.log(ITshareArray.calaAge());
console.log(ITshareArray.age);

在这里插入图片描述

注：这里一定要先console.log(ITshareArray.calaAge());才能正确的打印出age，如果直接console.log(ITshareArray.age);的话，会返回undefined，原因是age 属性只有在调用 calaAge 方法后才会被赋值。因此，在调用 calaAge 方法之前，this.age 是不存在的，并且尝试访问它将会返回 undefined。

挑战

输出“ITshareArray是一个46岁的程序员，并且她拥有了驾照”

const ITshareArray = {
  firstname: "张三",
  secondname: "二愣子",
  birthYear: "1996",
  job: "程序员",
  friends: ["李四", "王五", "牛二"],
  hasDrivesLicense: true,

  caclAge: function () {
    this.age = 2020 - this.birthYear;
    return this.age;
  },

  getSummary: function () {
    return `${this.firstname}是一个${this.caclAge()}岁的${this.job},他${
      this.hasDrivesLicense ? "有" : "没有"
    }驾照`;
  },
};

console.log(ITshareArray.caclAge());
console.log(ITshareArray.getSummary());