构造函数内的方法 直接写在构造函数内部 与 写在prototype上 的区别

文章目录


前言

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


区别

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

javascript 复制代码
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);

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

尝试调用对象内的属性时会先在对象内部查找, 如果找不到会去对象原型上查找.

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

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

刚才想了一下可不可以把属性也写在原型里, 不太能, 实例化多个对象必然是需要存在各对象内属性不同的情况, 那么属性写进去共用, 某处修改互相影响, 会造成麻烦, 而方法可以公用基本不会动所以可以写在原型里.

如果需要写在构造函数原型里的某方法在某实例内不同, 那就在该实例中新定义重名方法, 因为调用时还是优先在实例内查找的, 找到了就不会再去原型上找, 这并不是函数重载.


总结

--

相关推荐
吕彬-前端4 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱7 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
许野平14 分钟前
Rust: 利用 chrono 库实现日期和字符串互相转换
开发语言·后端·rust·字符串·转换·日期·chrono
guai_guai_guai16 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨17 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
狂奔solar26 分钟前
yelp数据集上识别潜在的热门商家
开发语言·python
blammmp1 小时前
Java:数据结构-枚举
java·开发语言·数据结构
何曾参静谧1 小时前
「C/C++」C/C++ 指针篇 之 指针运算
c语言·开发语言·c++
暗黑起源喵1 小时前
设计模式-工厂设计模式
java·开发语言·设计模式
WaaTong1 小时前
Java反射
java·开发语言·反射