Skip to content

Commit 7509501

Browse files
ceilf6ceilf6
committed
feat[ptr]: JS执行 - call stack 执行上下文中的 this 和 变量对象VO
虽然 ES6 后 const 和 let 不会污染对象，但是之前代码都用的 var 还是得了解
1 parent a66b479 commit 7509501

8 files changed

Lines changed: 235 additions & 3 deletions

File tree

‎JS/call-stack/!test7.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
10+
<body>
11+
<script>
12+
var foo = 1;
13+
14+
function bar(a) {
15+
var a1 = a;
16+
var a = foo;
17+
function a() {
18+
console.log(a); // 1
19+
}
20+
a1();
21+
}
22+
23+
bar(3);
24+
25+
/*
26+
27+
GO:
28+
foo: undefined 执行=> 1
29+
bar: fn
30+
31+
AO:
32+
a: 3 函数字面量覆盖=> fn-a 执行赋值=> 找到上一层的foo=1
33+
a1: undefined 执行赋值=> fn-a
34+
35+
*/
36+
</script>
37+
</body>
38+
39+
</html>

‎JS/call-stack/test1.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
10+
<body>
11+
<script>
12+
this.a = 1
13+
var b;
14+
this.console.log(this.a, this.b)
15+
16+
var c = function () {
17+
console.log(a)
18+
}
19+
var c = function () {
20+
console.log("get from Global Object => a:", a)
21+
}
22+
console.log("=== c", c)
23+
c()
24+
25+
console.log("=== d", d) // 不会报错，因为 var 有变量提升: undefined
26+
var d = "d";
27+
console.log("=== d", d) // d
28+
29+
30+
console.log(this)
31+
32+
console.log("Global: 代码开始执行，console.log 入栈，执行完后出栈", this);
33+
34+
function A() {
35+
console.log("A() 被调用 → A 入栈，console.log 入栈，执行完后 console.log 出栈", this);
36+
37+
function B() {
38+
console.log("B() 被调用 → B 入栈，console.log 入栈，执行完后 console.log 出栈", this);
39+
}
40+
41+
B(); // 调用 B → B 入栈
42+
} // A 执行结束 → A 出栈
43+
44+
A(); // 调用 A → A 入栈
45+
</script>
46+
</body>
47+
48+
</html>

‎JS/call-stack/test1.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
console.log("Global: 代码开始执行，console.log 入栈，执行完后出栈");
1+
console.log(this)
2+
3+
console.log("Global: 代码开始执行，console.log 入栈，执行完后出栈", this);
24

35
function A() {
4-
console.log("A() 被调用 → A 入栈，console.log 入栈，执行完后 console.log 出栈");
6+
console.log("A() 被调用 → A 入栈，console.log 入栈，执行完后 console.log 出栈", this);
57

68
function B() {
7-
console.log("B() 被调用 → B 入栈，console.log 入栈，执行完后 console.log 出栈");
9+
console.log("B() 被调用 → B 入栈，console.log 入栈，执行完后 console.log 出栈", this);
810
}
911

1012
B(); // 调用 B → B 入栈

‎JS/call-stack/test2.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
</head>
10+
11+
<body>
12+
<script>
13+
console.log(this.name);
14+
var a = 2;
15+
function A() {
16+
this.abc = 123;
17+
18+
function B() {
19+
console.log(this); // window: 直接调用函数，this指向全局对象
20+
}
21+
B();
22+
}
23+
var a = new A(); // this 跟随 new 绑定到了 A 实例上
24+
25+
console.log(a.abc); // 123
26+
</script>
27+
</body>
28+
29+
</html>

‎JS/call-stack/test3.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
</head>
10+
11+
<body>
12+
<script>
13+
var g1 = 123;
14+
var a = 2;
15+
function A(a, b) {
16+
console.log(a, b); // 1, fn(被函数字面量声明覆盖了)
17+
18+
console.log(g1, g2, g3) // 不存在属性，向上一层上下文找到了
19+
20+
var b = 123; // 赋值覆盖了
21+
22+
function b() { }
23+
24+
var a = function () { } // 赋值覆盖了
25+
26+
console.log(a, b); // fn, 123
27+
}
28+
var g2 = 456;
29+
30+
var g3 = function () { }
31+
32+
A(1, 2);
33+
</script>
34+
</body>
35+
36+
</html>

‎JS/call-stack/test4.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
10+
<body>
11+
<script>
12+
var foo = 1;
13+
function bar() {
14+
console.log(foo); //undefined
15+
if (!foo) {
16+
var foo = 10; // 区别于外部的、内部自己的提升到顶部，初始化为 undefined
17+
}
18+
console.log(foo); //10
19+
}
20+
21+
bar();
22+
</script>
23+
</body>
24+
25+
</html>

‎JS/call-stack/test5.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
10+
<body>
11+
<script>
12+
var a = 1;
13+
function b() {
14+
console.log(a); // 函数字面量声明覆盖了 fn
15+
a = 10;
16+
return;
17+
function a() { }
18+
}
19+
b();
20+
console.log(a); // 全局的 1
21+
</script>
22+
</body>
23+
24+
</html>

‎JS/call-stack/test6.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
10+
<body>
11+
<script>
12+
console.log(foo); // fn C
13+
var foo = "A";
14+
console.log(foo) // A
15+
var foo = function () {
16+
console.log("B");
17+
}
18+
console.log(foo); // fn B
19+
foo(); // B
20+
function foo() {
21+
console.log("C");
22+
}
23+
console.log(foo) // fn B
24+
foo(); // B
25+
26+
</script>
27+
</body>
28+
29+
</html>

0 commit comments

Comments
 (0)