JavaScript构造函数疑问：berries未输出值却返回空数组？

嘿，我来帮你搞定这个Constructor Functions的问题！这种情况我之前也碰到过，大概率是你在实例属性绑定或者方法操作实例属性的时候踩了坑，下面给你拆解几种最常见的场景：

1. 构造函数里没把berries绑定到实例的this上 #

很多新手容易犯的错：在构造函数里直接声明了变量，却没有挂到this上，导致实例根本没有berries这个属性（或者你误以为它存在，实际输出的是其他地方的空数组）。

错误示例： #

function Fruit(name) {
  this.name = name;
  // 这里只是声明了一个局部变量，和实例无关！
  let berries = [];
}

const myFruit = new Fruit('Strawberry');
console.log(myFruit.berries); // 输出 undefined，若环境默认处理可能显示为空数组

修正方法： #

把berries绑定到实例的this上，这样每个实例都会有自己独立的berries数组：

function Fruit(name) {
  this.name = name;
  // 关键：用this.berries给实例添加属性
  this.berries = [];
}

const myFruit = new Fruit('Strawberry');
console.log(myFruit.berries); // 输出初始化的空数组 []，后续可正常添加元素

2. 原型方法里没使用this操作实例的berries #

另一个常见坑：在原型方法里重新声明了局部的berries变量，而不是引用实例上的this.berries，导致你以为在添加元素，其实根本没碰实例的数组。

错误示例： #

function Fruit(name) {
  this.name = name;
  this.berries = []; // 这里初始化是对的
}

Fruit.prototype.addBerry = function(berry) {
  // 这里又创建了一个局部数组，和实例的berries没关系！
  let berries = [];
  berries.push(berry);
}

const myFruit = new Fruit('Blueberry');
myFruit.addBerry('dark blue');
console.log(myFruit.berries); // 还是空数组 []

修正方法： #

在方法里用this.berries来引用实例的属性，这样操作的才是当前实例的数组：

function Fruit(name) {
  this.name = name;
  this.berries = [];
}

Fruit.prototype.addBerry = function(berry) {
  // 关键：用this指向当前实例的berries
  this.berries.push(berry);
}

const myFruit = new Fruit('Blueberry');
myFruit.addBerry('dark blue');
console.log(myFruit.berries); // 输出 ['dark blue']

3. 错误地把berries放在原型对象上（共享数组的坑） #

虽然这个情况不是直接返回空数组，但也是常见的误区：如果你把berries定义在原型上，所有实例会共享同一个数组，可能导致你误以为自己的实例数组是空的（其实是其他实例修改了它，或者你没操作对）。

错误示例： #

function Fruit(name) {
  this.name = name;
}

// 把berries放在原型上，所有实例共享这个数组
Fruit.prototype.berries = [];

const apple = new Fruit('Apple');
const banana = new Fruit('Banana');
apple.berries.push('red');
console.log(banana.berries); // 输出 ['red']（这显然不是你想要的）

修正方法： #

还是把berries放在构造函数里，用this绑定，每个实例拥有独立的数组。

如果你的代码和上面的场景都不一样，可以把你的具体代码贴出来，我再帮你精准定位问题！

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