p5.js入门学习-作用域

48 阅读1分钟

变量是有作用于范围的,我们可以以{}作为辨识方法,在{}内部定义的变量叫做局部变量,在{}外部定义的变量叫全局变量。

不同{}内的同名局部变量,其值是互不影响的。

但在{}内,却可以直接使用全局变量,并且对其进行修改。

let a = 80; // 创建一个全局变量"a"
function setup() {
  createCanvas(720, 400);
  noLoop();
}
function draw() {
  background(0);
  stroke(255);
  //   使用全局变量 “a” 绘制一条线
  line(a, 0, a, height);
  for (let a = 120; a < 200; a += 3) {
    line(a, 0, a, height);
  }
  // 调用自定义函数 drawAnotherLine(),注意观察,自定义函数中的变量是a,与全局变量是同名的。
  drawAnotherLine();
  // 调用自定义函数 drawYetAnotherLine(),思考一下,当前函数中的a是全局变量的值80,还是上一个自定义函数中的值320呢?
  drawYetAnotherLine();
  // 全局变量的值被修改至320
  a = 320;
  drawYetAnotherLine();
}
function drawAnotherLine() {
  // 在此函数的本地创建一个新变量 “a”,由于
  let a = 320;
  // 使用本地变量 “a” 画一条线
  line(a, 0, a, height);
}
function drawYetAnotherLine() {
  // 因为没有设置新的本地变量 “a”,所以该线使用设置为值 20 的原始全局变量 “a” 进行绘制,注意理解变量的作用域。
  line(a + 3, 0, a + 3, height);
}
new p5();

p5js 开源社区 - 乐述云享 (aleshu.com)