JS 构造函数存在的问题

最新推荐文章于 2024-11-08 16:09:18 发布

Yohann丶blog

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量126

点赞数

文章标签： js vue javascript prototype 面向对象编程

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_35505543/article/details/120345839

版权

本文探讨了JavaScript中构造函数DuelMonster的问题，即每次实例化对象时都会重新创建相同的useSkill方法，导致内存浪费。提出了两种解决方案：一是将方法定义在外部，二是利用原型链共享方法，从而提高代码效率。

摘要由CSDN通过智能技术生成

e4b867b91685cb2b19cd6622924f9c839e3a2373.jpg_640w_400h.png

问题

function DuelMonster(name, gender, attack) {
  this.name = name;
  this.gender = gender;
  this.attack = attack;
  this.useSkill = function () {
    console.log("黑魔导");
  };
}

var m1 = new DuelMonster("黑魔术师", "male", 2500);
m1.useSkill(); // 打印黑魔导

var m2 = new DuelMonster("黑魔导少女", "female", 2000);
m2.useSkill(); // 打印黑魔导

console.log(m1.useSkill == m2.useSkill); // 结果为 false

在创建完DuelMonster构造函数后，又创建两个实例化对象m1和m2去调用useSkill()方法，然后打印这两个方法是否相等，返回了 false 。由于每个对象都是由 new DuelMonster创建出来的，因此每创建一个对象，函数 useSkill()都会被重新创建一次，这个时候，每个对象都调用了功能完全相同的方法，但是它们分别是独立的。

解决

方法一

function useSkill() {
  console.log("黑魔导");
}

function DuelMonster(name, gender, attack) {
  this.name = name;
  this.gender = gender;
  this.attack = attack;
  this.useSkill = useSkill;
}

var m1 = new DuelMonster("黑魔术师", "male", 2500);
m1.useSkill(); // 打印黑魔导
var m2 = new DuelMonster("黑魔导少女",  "female", 2000);
m2.useSkill(); // 打印黑魔导
console.log(m1.useSkill == m2.useSkill); // 结果为 true

单独把useSkill()方法提出来，再每次调用

方法二

function DuelMonster(name, gender, attack) {
  this.name = name;
  this.gender = gender;
  this.attack = attack;
}

DuelMonster.prototype.useSkill = function () {
  console.log("黑魔导");
};

var m1 = new DuelMonster("黑魔术师", "male", 2500);
m1.useSkill(); // 打印黑魔导
var m2 = new DuelMonster("黑魔导少女",  "female", 2000);
m2.useSkill(); // 打印黑魔导
console.log(m1.useSkill == m2.useSkill); // 结果为 true