JavaScript对象方法

在 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));  //使用括号运算符去调用对象中的函数

JavaScript对象方法_第1张图片

● 但是上述代码中,有一个设计问题,我们在打印时候,可以随意输入对象的出生年,会导致于对象中的年份不匹配,按照正确的设计理念来说,我们去计算对象中的年龄是,对象的年份应该是从对象获取,以来达到对象年龄的正确性,而想在对象方法中对象的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);

JavaScript对象方法_第2张图片

注:这里一定要先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());

JavaScript对象方法_第3张图片

你可能感兴趣的:(JavaScript,javascript,开发语言,ecmascript)