• 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));  //使用括号运算符去调用对象中的函数
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

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

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

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

     calaAge: function (birthYear) {
        return 2037 - ITshareArray.birthYear;
      },
    
    • 1
    • 2
    • 3

    这样也会完美的运行,但是在编程,我们始终会有一个原则,就是不要去使用重复的自己。什么意思么?就是如果对象的名称有改变,那么上述的代码就会出问题,但是如果你使用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);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

    注:这里一定要先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());
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

  • 相关阅读:
    Redis主从同步与故障切换,有哪些坑?
    zeno使用方法笔记
    数组常见算法
    特斯拉一则招聘暗示将进军南美市场?
    Azure - 机器学习企业级服务概述与介绍
    51单片机应用从零开始(二)
    【快应用】如何实现账号应用转移
    xv6---Lab: Xv6 and Unix utilities
    使用 VuePress 和 Vercel 打造个人技术博客:实现自动化部署
    利用union判断CPU大小端以及大小端转换(C++)
  • 原文地址:https://blog.csdn.net/weixin_42952508/article/details/132752923