学习使用.prototype时无法查看Particle实例p的属性是什么原因

问题原因 #

你当前使用的是p5.js框架，出现p为undefined是执行顺序的问题：

• 全局声明的var p默认初始值就是undefined
• p = new Particle()代码包裹在setup()函数内，而setup()是p5.js的内置生命周期函数，只有框架完成资源加载、初始化完毕后才会自动调用
• 如果你在全局作用域直接打印p，或者在页面刚加载时就手动在控制台输出p，此时setup()还未执行，自然无法拿到Particle实例

解决方法 #

• 方法1：在setup()内赋值完成后添加打印语句，此时就能正常输出实例属性：

function setup() {
  createCanvas(600, 300);
  p = new Particle();
  console.log(p); // 此处打印可拿到正常的Particle实例
}

• 方法2：等页面完全加载、p5.js初始化流程走完后，再在控制台查看p的值，此时setup()已经执行完毕，p已经完成赋值

补充原型写法优化 #

如果你正在学习prototype的使用，可以将Particle的方法挂载到原型上，避免每次创建实例都重复生成方法函数：

function Particle(){
  this.x = 100
  this.y = 99
}
// 将show方法挂到构造函数原型上，所有实例共享
Particle.prototype.show = function(){
  point(this.x, this.y);
}

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