JavaScript报错：Cannot read property 'show' of undefined 求代码排查

Hey there! Let's walk through the issues in your code that are causing that error, and fix them step by step.

Main Issues Identified #

• Missing Blob Class Definition: The core error happens because you’re trying to create a Blob object, but there’s no class or constructor function defined for it. When you later try to call blob.show(), blob is undefined—hence the "Cannot read property 'show' of undefined" message.
• Incorrect setInterval Usage: You wrote setInterval(draw(), 1000/30) which immediately runs the draw function once, instead of passing the function reference to be called repeatedly. It should be setInterval(draw, 1000/30) (no parentheses after draw).
• Incomplete draw Function: Your draw code is cut off (ctx.rect(0, 0, width, height...), so it doesn’t finish clearing the canvas or rendering the blob.
• Implicit Global Variables: Variables like c, ctx, width, and height are declared without let/const, making them global scope which can lead to unexpected behavior.

Corrected Code #

Here’s the fixed version with all issues addressed:

let blob; 
const blobs = []; 
let width = 300; 
let height = 300;
let c, ctx;

// Define the Blob class with a show method to draw the circle
class Blob {
  constructor(x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
  }

  show() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = '#2ecc71'; // Green fill for the blob
    ctx.fill();
    ctx.closePath();
  }
}

window.onload = function(){ 
  // Create and configure the canvas element
  c = document.createElement('canvas');
  c.width = width;
  c.height = height;
  ctx = c.getContext('2d');
  document.body.appendChild(c);

  // Initialize the blob and start the animation loop
  blob = new Blob(width/2, height/2, 64);
  setInterval(draw, 1000/30); // Pass function reference, not execute immediately
} 

function draw(){ 
  // Clear the canvas every frame to prevent overlapping drawings
  ctx.fillStyle = '#ecf0f1'; // Light gray background
  ctx.fillRect(0, 0, width, height);
  
  // Draw the blob
  blob.show();
}

Key Fixes Explained #

1. Added Blob Class: The class includes a constructor to set the blob’s position and radius, plus a show method that uses ctx.arc() to draw the circle.
2. Fixed setInterval: Changed draw() to draw so the function is called repeatedly at 30 FPS, creating a smooth animation.
3. Completed draw Function: Added code to clear the canvas each frame and call blob.show() to render the circle properly.
4. Proper Variable Declarations: Used let and const to avoid implicit global variables, making the code cleaner and less prone to bugs.

When you run this corrected code, you’ll see a green circle centered on a light gray canvas, updating smoothly each frame.

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