JavaScript构造函数方法与原型prototype的区别与使用

函数内方法与原型方法的基本定义

在JavaScript开发中，将方法定义在构造函数内部称为“函数内方法”，而将方法定义在构造函数的prototype属性上则称为“原型方法”。

函数内方法：访问私有变量

使用函数内方法的主要优势在于可以访问构造函数内部的私有变量。如果通过构造函数new出来的对象需要操作这些私有变量，则必须采用这种方式定义方法。

原型方法：内存优化与批量创建

当需要通过一个函数创建大量对象，且这些对象拥有许多共同方法时，将方法定义在prototype上更为合适。这种方式能有效减少内存占用，因为所有实例共享同一份方法引用。

在实际应用中，函数内方法和原型方法往往结合使用。开发者应首先明确具体需求，再决定采用哪种方式或如何组合使用。

// 构造函数A
function A(name) {
  this.name = name || 'a';
  this.sayHello = function() {
    console.log('Hello, my name is: ' + this.name);
  }
}

// 构造函数B
function B(name) {
  this.name = name || 'b';
}
B.prototype.sayHello = function() {
  console.log('Hello, my name is: ' + this.name);
};

var a1 = new A('a1');
var a2 = new A('a2');
a1.sayHello();
a2.sayHello();

var b1 = new B('b1');
var b2 = new B('b2');
b1.sayHello();
b2.sayHello();

初始化成本与执行速度分析

示例中定义了两个构造函数：A和B。构造函数A在内部定义了sayHello方法，而构造函数B将sayHello定义在其prototype属性上。将方法写在构造函数内部会增加初始化单个对象的成本，因为每个实例都会创建独立的方法副本；而写在prototype上则有效降低了这种成本。关于执行速度，虽然直觉上调用对象自身的方法可能比调用原型链上的方法更快，但实际上，如果对象的原型链不复杂，两者的速度差异微乎其微。

此外，在使用原型方法时还需注意以下几点：

原型方法的副作用与注意事项

首先，如果在函数的prototype属性上定义或修改方法，这一改变会立即反映由该构造函数产生的所有对象上，因为这些对象共享原型中的方法。

其次，需要注意JavaScript中的变量提升机制，具体表现如下代码所示：

func1(); // 这里会报错,因为在函数执行的时候,func1还没有被赋值. error: func1 is not a function
var func1 = function() {
  console.log('func1');
};

func2(); // 这个会被正确执行,因为函数的声明会被提升.
function func2() {
  console.log('func2');
}

最后，涉及对象序列化时，定义在函数prototype上的属性不会被序列化。参考以下代码示例：

function A(name) {
  this.name = name;
}
A.prototype.sayWhat = 'say what...';

var a = new A('dreamapple');
console.log(JSON.stringify(a));

执行上述代码后，控制台输出的结果为{"name":"dreamapple"}，可见原型属性未包含在序列化结果中。

以上关于JavaScript构造函数方法与原型prototype的解析内容供参考，希望能为开发者提供选型依据。