pythontutor网站推荐

# 概述

本文主要是推荐一个网站:Python Tutor (opens new window).

网站首页写道：

Online Compiler, Visual Debugger, and AI Tutor for Python, Java, C, C++, and JavaScript Python Tutor helps you do programming homework assignments in Python, Java, C, C++, and JavaScript. It contains a unique step-by-step visual debugger and AI tutor to help you understand and debug code.

翻译过来就是

Python Tutor 是一个在线编译器、可视化调试器和 AI 辅导工具，支持 Python、Java、C、C++ 和 JavaScript。它帮助你完成 Python、Java、C、C++ 和 JavaScript 编程作业，提供独特的逐步可视化调试功能，并通过 AI辅导帮助你理解和调试代码。

# 网站实操

我们以Javascript的几个例子讲解下，就会很快明白这个网站的神奇之处。

# 不同数据的存储方式

代码如下

var intNum = 42;
var floatNum = 3.14159;
var nanNum = NaN;
var infNum = Infinity;
var ninfNum = -Infinity;

var str = "hello world";

var boolTrue = true;
var boolFalse = false;

var nullVal = null;
var undefVal = undefined;

var lst = ['a', 'b', 3, 4, 5, 'f'];

var obj = {name: 'John', age: 35, hasChildren: true};

var i = 5;
var obj_lst = [i, {foo: i+1, poop: [1, 2, 3]}, {bar: i+2}];

obj.name = 'Jane';

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

内存分布如下：

# `closure`闭包

代码如下：

var globalZ = 10;

function foo(y) {
  function bar(x) {
    globalZ += 100;
    return x + y + globalZ;
  }
  return bar;
}

var b = foo(1);
b(2);

1
2
3
4
5
6
7
8
9
10
11
12

具体执行过程
- 第 1 步：初始化状态，初始化了三个变量:globalZ、foo和b,其值分别为undefined、指向Objects中的某一内存块函数、undefined。
- 第 2 步： globalZ变量赋值10
- 第 3 步： b变量赋值，执行foo(1)函数，在Global frame中开辟一块foo的空间，里面定义了bar函数以及参数y(其值为1)
- 第 4 步：定义foo frame中函数的返回值，并将其赋值给变量b
- 第 5 步：可以看出上面第 4 步的运行结果，变量b指向bar函数
- 第 6 步：执行b(2)
- 第 7 步：执行b(2)的内部逻辑，此时参数x为2,参数y是parent frame中的值1
- 第 8 步：返回运算结果
- 第 9 步：最末状态，b(2)执行完返回运算结果后，销毁了bar frame