JavaScript中constructor构造函数与prototype原型定义方法的区别是什么

你提到的构造函数内定义方法会造成内存浪费，核心原因是每次通过new关键字创建实例时，构造函数内的代码都会完整执行一次，绑定到this上的方法会为每个实例单独创建一个独立的函数副本。比如你创建1000个Circle实例，就会生成1000个独立的draw函数，每个都占用单独的内存空间，自然就会产生不必要的浪费。

而在原型上定义的方法不会有这个问题，原因是：每个构造函数都有唯一的prototype原型对象，该对象是所有实例共享的公共存储空间。挂载到原型上的方法只会被创建一次，所有实例访问这个方法时，都会通过原型链找到原型上的这同一个方法引用，不会给每个实例单独复制副本，因此不会出现内存浪费。

注：你提供的构造函数内定义方法的示例存在笔误，this.draw() = function()的写法错误，赋值不需要加括号，正确写法参考下方示例。

两种写法的正确示例 #

1. 构造函数内定义方法

function Circle(){
    this.draw = function(){           
        console.log('draw')
    }
}

2. 原型上定义方法

Circle.prototype.draw = function(){
    console.log('draw')
}

我们可以用一段简单的代码验证内存占用的差异：

// 构造函数内定义方法
function Circle1() {
  this.draw = function () {
    console.log('draw')
  }
}
const c1 = new Circle1()
const c2 = new Circle1()
console.log(c1.draw === c2.draw) // 输出 false，是两个不同的函数

// 原型上定义方法
function Circle2() {}
Circle2.prototype.draw = function () {
  console.log('draw')
}
const c3 = new Circle2()
const c4 = new Circle2()
console.log(c3.draw === c4.draw) // 输出 true，是同一个函数

其他核心差异 #

除了内存占用外，两种写法还有几个明显的区别：

• 自有属性判断结果不同：构造函数内定义的方法属于实例的自有属性，调用实例.hasOwnProperty('draw')会返回true；原型上定义的方法不属于实例自有属性，调用后返回false。
• 修改影响范围不同：如果修改原型上的方法，所有已创建、后续创建的实例的对应方法都会同步更新；如果修改某个实例自身挂载的方法（构造函数内定义的），只会影响当前这一个实例，其他实例不受影响。
• 继承表现不同：原型上的方法可以被构造函数的子类通过原型链继承复用；构造函数内定义的方法属于实例私有，不会被继承。
• 执行上下文绑定一致：两种写法定义的方法，调用时的this都指向当前调用方法的实例，这一点上二者表现没有区别。

写法选择建议 #

• 如果方法需要访问实例的私有属性，或者每个实例的方法需要单独定制，可以选择在构造函数内定义。
• 如果是所有实例通用的公共方法，优先选择挂载到原型上，节省内存开销。

内容的提问来源于stack exchange，提问作者dark0307