构造函数内的方法直接写在构造函数内部与写在prototype上的区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了构造函数内的方法直接写在构造函数内部与写在prototype上的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

以前没注意过, 去创建一个构造函数的时候, 方法都是直接写在函数内的. 在构造函数需要多次实例化的情况下有缺点, 不过幸好以前项目里的构造函数也不需要多次实例化, 缺点没有生效.

区别

为了比较, 先在构造函数内部直接书写方法, 查看实例化结果:

function Person(age, sex) {
  this.age = age;
  this.sex = sex;
  this.getAge = function () {
    console.log(this.age);
    this.age++;
    return this.age;
  }
}

const person0 = new Person(20, 'female');
const person1 = new Person(20, 'female');
console.log(person0);
console.log(person1);

构造函数内的方法直接写在构造函数内部与写在prototype上的区别,JavaScript,原型模式,javascript,开发语言

如上图, 直接写在构造函数内, 在对象原型链上是找不到这个方法的, 只有对象内部存在该方法;

尝试调用对象内的属性时会先在对象内部查找, 如果找不到会去对象原型上查找.
如果把方法写在原型上, 实例化多个对象的时候就不会在每个对象内都定义这个方法, 而是实例化出的全部对象共用同一原型内的该方法, 每个对象内就不再存在存储该函数的键值对, 这占据更小的内存:

function Person(age, sex) {
  this.age = age;
  this.sex = sex;
}
Person.prototype.getAge = function () {
  this.age++;
  return this.age;
}

const person0 = new Person(20, 'female');
const person1 = new Person(30, 'female');
console.log(person0);
console.log(person1);