在 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());