让人费解的 GO 和 AO

最新推荐文章于 2023-03-09 09:30:00 发布
最新推荐文章于 2023-03-09 09:30:00 发布
阅读量607 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 函数 预编译 GO AO
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27575925/article/details/113758298
版权

让人费解的 GO 和 AO

引言

今天得空再来写一篇文章，本篇要讲解的内容是关于 函数基础 ，一起来探索一下吧。

img

仰望星空的人，不应该被嘲笑

函数基础

函数种类、字面量

开门见山，下面代码会输出什么，不知道小伙伴平常有咩有想过这类问题

var test = function test1() {
  var a = 1;
  console.log(a);
}
test()
test1()

答案是 1 和 报错，报错信息如下：

img

这是为什么呢？实际上，我们申明了一个变量 test，把这个函数 test1赋给它的时候，就已经把这个变量赋予了函数的功能，调用 test()方法当然能够正常运行，输出 1。而对于表达式赋值，会自动忽略后面的函数名称，也就是说写与不写并不影响 test()方法的执行。不信，看看下面代码会输出什么？

var test = function() {
  var a = 1;
  console.log(a);
}
test() // 1

那这样，是不是说 test1完全没作用了，那写着干嘛，还多几个字符。当然不是！，test1在函数体内部是可见的，而在外部却不可见，通过这样，我们就可以实现递归操作

var test = function() {
  var a = 1;
  console.log(a);
}

而对于上述代码，后面函数体没有名字，我们称之为 匿名函数，是不是有点印象了，原来就是这东西，哟西~

而通过这种方式赋值的表达式，我们称之为 匿名函数表达式，也称为 函数字面量，这些专有名词一出来，瞬间觉得有点逼格了有没有！

字面量这种东西，简单来说就是数据，例如下述，有数字字面量，字符串字面量，数组字面量等等。简单理解就是，对于赋值的过程，右边的数据就是字面量。

var a = 10
var b = '111'
var c = [1,2,3]

形参实参映射

补充：如何获取形参和实参对应的长度？

function test (a,b) {
  console.log(test.length)  // 形参的长度 2
  console.log(arguments.length) // 实参的长度 3
}
test(1,2,3)

我想小伙伴们应该清楚实参和形参是什么玩意，但是我们可以更改实参的值吗？例如下述代码，会输出什么呢？

function test(a, b) {
  a =3;
  console.log(arguments[0]);
}
test(1,2);

答案是 3，我们可以修改实参的值。

刚刚那题只是简单热个身，继续下一题吧，我们可以改变 b 的值吗？（提示：注意我并没有传对应实参哦~）

function test(a, b) {
  b = 3;
  console.log(arguments[1]);
}
test(1);

答案是 undefined，因此对于上一题表述，要修改一下：对于实参传递过来确定的值，我们是可以进行修改的，而如果实参并没有传递值过来，我们是不能进行修改的。这就是形参和实参的映射关系。

简单解释一下形参和实参的映射关系，其实实参和形参不能说是一类的，看上述代码，我们可以通过 arguments 来获取我们的实参，可以看做是一个数组里面的某一项值，而数组是存放堆内存的，而对应我们形参其实是存放在栈内存的，它们之间会有一个映射关系，并且是一对一对应的，上述我们实参没有对b进行赋值，尽管修改了形参，但改变不了我们的 arguments[1] 就是这个道理。（没有建立一对一映射关系）。

让人费解的 GO 和 AO

作用域引入

再来一道引申题，为后续内容做铺垫。下面 a b c 分别会输出什么？

a = 1;
function test1 () {
  var b = 2;
  console.log(a)  // 
  function test2() {
    var c = 3
    console.log(b); // 
  }
  test2();
  console.log(c); // 
}
test1();

答案是 1 2 报错，这就牵扯到 scope 问题了，简单理解就是函数内部能访问外面的变量，而函数外面却不能访问内部的变量，也就是闭包问题。（这个后文会提到）

函数默认参数

如果实参没有赋值，那么形参怎样设置默认参数呢？说到默认参数，我想你应该会想到如下代码：

function test(a = 1, b = 1) {
  console.log(a)
  console.log(b)
}
test() // 1 1

好的，上述问题算是开胃小菜，我们继续，我如果给 a 设定默认值，而 b 通过实参传递过来呢？可以实现吗？之前没有传参的话，不是默认打印 undefined吗，那我现在给 a 传递一个 undefined，是不是就会定为默认值。

function test(a = 1, b) {
  console.log(a)
  console.log(b)
}
test(undefined, 2)

答案是可以的，上述代码输出结果为 1 2。简单解释一下，在之前我们将了形参实参是有一个映射关系，对于堆内存 arguments 里面，如果给了 undefined，那么就会去栈内存形参里面找，如果不为 undefined，则会设置形参的默认值。（其实这是 es6 的语法了）

那么，可以用es5的方式实现一下吗？（当然可以，见代码）

function test(a, b) {
  a = arguments[0] || 1
  b = arguments[1] || 1
  console.log(a)
  console.log(b)
}
test(undefined, 2)

预编译

预编译总结一下就是如下几点：

  • 检查通篇的语法错误
  • 解释一行，执行一行

下面这两段代码，熟悉的同学一下就明白了，面试常考的经典题！

test()
function test(){
  console.log(1)
}

console.log(a);
var a = 1;

这就扯到了函数声明提升和变量提升相关的问题了。这里总结整理一下：

函数声明会进行整体的提升，而变量只有声明进行了提升，赋值不会提升

关于变量那块，举例下面代码，其实是有两个步骤：第一，进行变量声明 var a; 第二，进行赋值操作，a = 1;

var a = 1;

好了，这里我就认为你已经理解了提升相关的知识了，我们来看一道题吧：

console.log(a)
function a(a) {
  var a = 10;
  var a = function () {

  }
}
var a = 1;

答案是[Function: a] （即函数 a），这里可能一下也想不明白，我们先来讲一下知识，再来解决这个问题吧。

讲解暗示全局变量 imply golbal variable

下面代码会输出 1，比较简单，就直接说答案了。实际上这里就暗示全局变量了，因为全局有一个 window对象 ，下面代码也可以这样表示 window.a = 1，所有权归 window。

a = 1;
console.log(a);

这又让我想到了下述代码，b 能打印出来吗？还是会报错？

function test() {
  var a = b = 1;
}
test();
console.log(b)

答案是 1，能打印出来 b，这种写法就是经典的变量泄露问题。而 a没办法打印，因为它是test函数的局部变量，相当于闭包内的变量，外层没办法访问闭包内的变量。

继续，这次加大一点难度。下面代码又分别输出什么呢？

function test(a){
  console.log(a);
  var a = 1;
  console.log(a);
  function a() {}
  console.log(a);
  var b = function(){}
  console.log(b)
  function d(){}
}
test(2);

放答案之前，先总结一下知识点，函数在执行之前，会生成一个 AO（activation object，也称为活动对象或者函数上下文）这个AO会按照如下形式创建：

  • 第一步：寻找函数里的形参和变量声明
  • 第二步：将实参的参数值赋值给形参
  • 第三步：寻找函数声明，然后赋值函数体
  • 第四步：执行

下述代码是预编译（即函数执行之前AO对象的结果）：

AO = {
 a: undefined -> 2 -> function a() ()
 b: undefined
 d: function d() {}
}

下述代码是执行函数之后AO对象的结果：

AO = {
 a: undefined -> 2 -> function a() () -> 1
 b: undefined -> function() {}
 d: function d() {}
}

直接看着上述执行完后的AO，对于第一个输出，由与在赋值 a 为 1 之前，所以我们直接打印 Function: a，对于第二个输出，对 a 变量进行了赋值为 1 的操作，所以取 AO 对象中的最后一个 1，打印 1，对于第三个输出，没有其它赋值操作了，直接输出 1 ，对于 b，输出 Function: b，这个不需要太多解释。

最后，给出例题的答案：

[Function: a]
1
1
[Function: b]

下面来一道例题，巩固一下，小伙伴们可以自己拿过去做一遍。

function test(a,b) {
  console.log(a); // 1
  c = 0;
  var c;
  a = 5;
  b = 6;
  console.log(b); // 6
  function b(){}
  function d(){}
  console.log(b) // 6
}
test(1)
/*
AO = {
  a: undefined -> 1 -> 5
  b: undefined -> function b(){} -> 6
  c: undefined -> 0
  d: function d(){}
}
*/

接下来，换类型了哈，下面会输出什么呢？

var a = 1;
function a () {
  console.log(2)
}
console.log(a)

答案是 1，不用过多解释。

举上述例子是为了引出下文，因为这已经不是函数内部的问题了，是全局的问题了。JS执行之前，会产生一个叫做 GO 的东西，也称为 global object（全局上下文），也会按照如下步骤进行创建：

  • 第一步：寻找变量声明
  • 第二步：寻找函数声明
  • 第三部：执行
GO = {
	a: undefined -> function a() {} -> 1
}

所以，答案为 1。实际 GO，就是 window，window存储过程就是这样的！

好的，继续下一题，又会输出什么？

console.log(a,b)
function a() {}
var b = function() {}

答案是 [Function: a] undefined，这个答案也许和你想的完全相反，有没有？按照 GO来解决这道题吧！

GO = {
	a: undefined -> function() {}
	b: undefined 
}

这是因为在 console.log(a,b)在 var b = function() {}之前，此时还没有对 b 变量进行赋值，而 a通过函数声明整体提升，会输出 funtion a() {}，如果上述代码改成如下代码 b变量就会有对应值啦。

var b = function() {}
console.log(a,b)
function a() {}

回到我们开头的一道题，现在解决它应该没问题了，会输出什么呢？

console.log(a)
function a(a) {
  var a = 10;
  var a = function () {

  }
}
var a = 1;

由于并没有执行函数，我们不用 AO，改用 GO，这道题其实和上一道题差不多，因为我们 console.log(a) 在赋值操作之前，因此我们不会有 1的结果，所以我们会打印 function a(){}

GO = {
  a: undefined -> function a(){}
}

加大难度，看这一题，结合上述所说 AO 和 GO 来做，试一试！

var b = 3;
console.log(a);
function a(a){
  console.log(a);
  var a = 2;
  console.log(a);
  function a(){
    var b = 5;
    console.log(b);
  }
}
a(1);

答案：

[Function: a]
[Function: a]
2
5

我觉得能把这道题完整做出来， AO 和 GO 基本没啥问题了，现在来解释一波：

直接上 GO、AO，后续不再过多解释了，如果还有不明白的小伙伴，建议往上再复习一遍，相信可以独立解决这道题的 (*^▽^*)

GO = {
  b: undefined -> 3
  a: undefined -> function a() {}
}
AO = {
  a: undefined -> 1 -> function a(){} -> 2
  b: undefined -> 5
}

不知道上一道题做的咋样，这道题我们找一点自信，看看会输出什么？

a = 1;
function test() {
  console.log(a); 
  a = 2;
  console.log(a); 
  var a =3;
  console.log(a);
}
test();
var a;

答案是 undefined 2 3，还是老规矩，直接上 GO 和 AO

GO = {
  a: undefined -> 1
  test: function(){}
}
AO = {
  a: undefined -> 2 -> 3
}

此时，可能就有小部分长的比较帅的小伙伴就要问了，为啥我第一个 a 不是打印 1呢，GO 里面不是可以取嘛？ 确实，但是你漏掉了前提， AO里面此时存在变量 a，就不会去GO里面找了，这里容易掉坑，必须注意！

function test(){
  console.log(b); 
  if(a){
    var b = 2;
  }
  c = 3;
  console.log(c); 
}
var a;
test();
a = 1;
console.log(a);

答案： undefined 3 1，直接上 GO 和 AO，解释一个地方，为啥 b 要放在 AO 里面，因为 js在预编译时，不会管你什么条件执不执行，只看你是否进行了申明，简单来说，只要在函数内声明了，那么我们就放入 AO里面，否则放在全局的GO里面。

GO = {
  a: undefined -> 1
  test: fucntion(){...}
  c: undefined -> 3
}
AO = {
  b: undefined
}

最后，我们来几道题找点自信，结束这让人费解的 GO 和 AO吧，答案里我就只给 GO 和 AO啦，还不会方法的，建议多看上文内容，我就不作解释了。

function test() {
  return a;
  a = 1;
  function a() {}
  var a = 2;
}
console.log(test());

答案： [Function: a]

GO = {
  test: function() {...}
}
AO = {
  a: undefined -> function a(){} -> 1 -> 2
}

继续，下一题：

function test() {
  a = 1;
  function a() {}
  var a = 2;
  return a;
}
console.log(test())

答案： 2

GO = {
  test: function(){...}
}
AO = {
  a: undefined -> function a(){} -> 1 -> 2
}

加大难度，注意头发…

a = 1;
function test(e){
  function e(){}
  arguments[0] = 2;
  console.log(e); 
  if(a){
    var b = 3;
  }
  var c;
  a = 4;
  var a;
  console.log(b); 
  f = 5;
  console.log(c); 
  console.log(a); 
}
var a;
test(1);
console.log(a);
console.log(f);

答案是 2 undefined undefined 4 1 5

GO = {
  a: undefined -> 1
  test: function(){...}
  f: undefined -> 5
}
AO = {
  e: undefined -> 1 -> function e(){} -> 2
  b: undefined 
  a: undefined -> 4
  c: undefined 
}

下面来一点加餐，我想小伙伴们一定是不满足于上述 “简单” 的输出题的，下面来几道经典笔试题：

第一题，下面会输出什么？

var a = false + 1;
console.log(a);

答案是 1，存在隐式类型转换。

var b = false == 1;
console.log(b)

答案是 false，存在隐式类型转换。

可能前两道题比较简单，看看下面这份代码吧：

if(typeof(a) && (-true) + (+undefined) + ''){
  console.log(1);
}else{
  console.log(0);
}

答案是 1，也是存在隐式类型转换，并且结合了上文的知识，一道非常不错的题。

console.log(-true) // -1
console.log(+undefined) // NaN
if(typeof(a) && (-true) + (+undefined) + ''){
  console.log(1);
}else{
  console.log(0);
}
console.log(typeof(-'123')) // number
console.log((-true) + (+undefined) + '') // NaN

上面那道题解决了的话，下面这道题就是小试牛刀了，看看会输出什么？

if(1+5*'3' === 16){
  console.log(1);
}else{
  console.log(0);
}

答案是 1，虽然 === 不能进行隐式转换，但是没说左边或右边单独不能进行隐式转换呐。

继续，

console.log(!!' ' + !!'' - !!false || '未通过');

答案：1，因为左边 1+0-0 得到 0，所以不会走右边。

window.a || (window.a = '1')
console.log(window.a)

答案：1，因为这里有 ()括号，优先级最高，首先会对 window.a 赋值 1，然后判断左边 window.a为真，直接走下面输出函数。 而如果说先走左边window.a 判断为 false，然后走右边进行赋值为 1，最后打印 1，这样回答的话就错啦，没有考虑括号优先级。

亡羊补牢】JS灵魂之问 修炼内功 让人费解的 GO 和 AO，一大串输出题，你接得住吗？

引言

有几天没有更新JS灵魂之问的专栏系列文章了，秋招季，也在忙着备战笔试面试。今天得空再来写一篇文章，本篇要讲解的内容是关于 函数基础 ，那今天这篇看能不能问倒你了，一起来探索一下吧。 img

仰望星空的人，不应该被嘲笑

文章目录

函数基础

函数种类、字面量

开门见山，下面代码会输出什么，不知道小伙伴平常有咩有想过这类问题

var test = function test1() {
  var a = 1;
  console.log(a);
}
test()
test1()
复制代码

答案是 1 和 报错，报错信息如下：

img 这是为什么呢？实际上，我们申明了一个变量 test，把这个函数 test1赋给它的时候，就已经把这个变量赋予了函数的功能，调用 test()方法当然能够正常运行，输出 1。而对于表达式赋值，会自动忽略后面的函数名称，也就是说写与不写并不影响 test()方法的执行。不信，看看下面代码会输出什么？

var test = function() {
  var a = 1;
  console.log(a);
}
test() // 1
复制代码

那这样，是不是说 test1完全没作用了，那写着干嘛，还多几个字符。当然不是！，test1在函数体内部是可见的，而在外部却不可见，通过这样，我们就可以实现递归操作

var test = function() {
  var a = 1;
  console.log(a);
}
复制代码

而对于上述代码，后面函数体没有名字，我们称之为 匿名函数，是不是有点印象了，原来就是这东西，哟西~

而通过这种方式赋值的表达式，我们称之为 匿名函数表达式，也称为 函数字面量，这些专有名词一出来，瞬间觉得有点逼格了有没有！

字面量这种东西，简单来说就是数据，例如下述，有数字字面量，字符串字面量，数组字面量等等。简单理解就是，对于赋值的过程，右边的数据就是字面量。

var a = 10
var b = '111'
var c = [1,2,3]
复制代码

形参实参映射

补充：如何获取形参和实参对应的长度？

function test (a,b) {
  console.log(test.length)  // 形参的长度 2
  console.log(arguments.length) // 实参的长度 3
}
test(1,2,3)
复制代码

我想小伙伴们应该清楚实参和形参是什么玩意，但是我们可以更改实参的值吗？例如下述代码，会输出什么呢？

function test(a, b) {
  a =3;
  console.log(arguments[0]);
}
test(1,2);
复制代码

答案是 3，我们可以修改实参的值。

刚刚那题只是简单热个身，继续下一题吧，我们可以改变 b 的值吗？（提示：注意我并没有传对应实参哦~）

function test(a, b) {
  b = 3;
  console.log(arguments[1]);
}
test(1);
复制代码

答案是 undefined，因此对于上一题表述，要修改一下：对于实参传递过来确定的值，我们是可以进行修改的，而如果实参并没有传递值过来，我们是不能进行修改的。这就是形参和实参的映射关系。

简单解释一下形参和实参的映射关系，其实实参和形参不能说是一类的，看上述代码，我们可以通过 arguments 来获取我们的实参，可以看做是一个数组里面的某一项值，而数组是存放堆内存的，而对应我们形参其实是存放在栈内存的，它们之间会有一个映射关系，并且是一对一对应的，上述我们实参没有对b进行赋值，尽管修改了形参，但改变不了我们的 arguments[1] 就是这个道理。（没有建立一对一映射关系）。

让人费解的 GO 和 AO

作用域引入

再来一道引申题，为后续内容做铺垫。下面 a b c 分别会输出什么？

a = 1;
function test1 () {
  var b = 2;
  console.log(a)  // 
  function test2() {
    var c = 3
    console.log(b); // 
  }
  test2();
  console.log(c); // 
}
test1();
复制代码

答案是 1 2 报错，这就牵扯到 scope 问题了，简单理解就是函数内部能访问外面的变量，而函数外面却不能访问内部的变量，也就是闭包问题。（这个后文会提到）

函数默认参数

如果实参没有赋值，那么形参怎样设置默认参数呢？说到默认参数，我想你应该会想到如下代码：

function test(a = 1, b = 1) {
  console.log(a)
  console.log(b)
}
test() // 1 1
复制代码

好的，上述问题算是开胃小菜，我们继续，我如果给 a 设定默认值，而 b 通过实参传递过来呢？可以实现吗？之前没有传参的话，不是默认打印 undefined吗，那我现在给 a 传递一个 undefined，是不是就会定为默认值。

function test(a = 1, b) {
  console.log(a)
  console.log(b)
}
test(undefined, 2)
复制代码

答案是可以的，上述代码输出结果为 1 2。简单解释一下，在之前我们将了形参实参是有一个映射关系，对于堆内存 arguments 里面，如果给了 undefined，那么就会去栈内存形参里面找，如果不为 undefined，则会设置形参的默认值。（其实这是 es6 的语法了）

那么，可以用es5的方式实现一下吗？（当然可以，见代码）

function test(a, b) {
  a = arguments[0] || 1
  b = arguments[1] || 1
  console.log(a)
  console.log(b)
}
test(undefined, 2)
复制代码

预编译

预编译总结一下就是如下几点：

  • 检查通篇的语法错误
  • 解释一行，执行一行

下面这两段代码，熟悉的同学一下就明白了，面试常考的经典题！

test()
function test(){
  console.log(1)
}
复制代码
console.log(a);
var a = 1;
复制代码

这就扯到了函数声明提升和变量提升相关的问题了。这里总结整理一下：

函数声明会进行整体的提升，而变量只有声明进行了提升，赋值不会提升

关于变量那块，举例下面代码，其实是有两个步骤：第一，进行变量声明 var a; 第二，进行赋值操作，a = 1;

var a = 1;
复制代码

好了，这里我就认为你已经理解了提升相关的知识了，我们来看一道题吧：

console.log(a)
function a(a) {
  var a = 10;
  var a = function () {

  }
}
var a = 1;
复制代码

答案是[Function: a] （即函数 a），这里可能一下也想不明白，我们先来讲一下知识，再来解决这个问题吧。

讲解暗示全局变量 imply golbal variable

下面代码会输出 1，比较简单，就直接说答案了。实际上这里就暗示全局变量了，因为全局有一个 window对象 ，下面代码也可以这样表示 window.a = 1，所有权归 window。

a = 1;
console.log(a);
复制代码

这又让我想到了下述代码，b 能打印出来吗？还是会报错？

function test() {
  var a = b = 1;
}
test();
console.log(b)
复制代码

答案是 1，能打印出来 b，这种写法就是经典的变量泄露问题。而 a没办法打印，因为它是test函数的局部变量，相当于闭包内的变量，外层没办法访问闭包内的变量。

继续，这次加大一点难度。下面代码又分别输出什么呢？

function test(a){
  console.log(a);
  var a = 1;
  console.log(a);
  function a() {}
  console.log(a);
  var b = function(){}
  console.log(b)
  function d(){}
}
test(2);
复制代码

放答案之前，先总结一下知识点，函数在执行之前，会生成一个 AO（activation object，也称为活动对象或者函数上下文）这个AO会按照如下形式创建：

  • 第一步：寻找函数里的形参和变量声明
  • 第二步：将实参的参数值赋值给形参
  • 第三步：寻找函数声明，然后赋值函数体
  • 第四步：执行

下述代码是预编译（即函数执行之前AO对象的结果）：

AO = {
 a: undefined -> 2 -> function a() ()
 b: undefined
 d: function d() {}
}
复制代码

下述代码是执行函数之后AO对象的结果：

AO = {
 a: undefined -> 2 -> function a() () -> 1
 b: undefined -> function() {}
 d: function d() {}
}
复制代码

直接看着上述执行完后的AO，对于第一个输出，由与在赋值 a 为 1 之前，所以我们直接打印 Function: a，对于第二个输出，对 a 变量进行了赋值为 1 的操作，所以取 AO 对象中的最后一个 1，打印 1，对于第三个输出，没有其它赋值操作了，直接输出 1 ，对于 b，输出 Function: b，这个不需要太多解释。

最后，给出例题的答案：

[Function: a]
1
1
[Function: b]
复制代码

下面来一道例题，巩固一下，小伙伴们可以自己拿过去做一遍。

function test(a,b) {
  console.log(a); // 1
  c = 0;
  var c;
  a = 5;
  b = 6;
  console.log(b); // 6
  function b(){}
  function d(){}
  console.log(b) // 6
}
test(1)
/*
AO = {
  a: undefined -> 1 -> 5
  b: undefined -> function b(){} -> 6
  c: undefined -> 0
  d: function d(){}
}
*/
复制代码

接下来，换类型了哈，下面会输出什么呢？

var a = 1;
function a () {
  console.log(2)
}
console.log(a)
复制代码

答案是 1，不用过多解释。

举上述例子是为了引出下文，因为这已经不是函数内部的问题了，是全局的问题了。JS执行之前，会产生一个叫做 GO 的东西，也称为 global object（全局上下文），也会按照如下步骤进行创建：

  • 第一步：寻找变量声明
  • 第二步：寻找函数声明
  • 第三部：执行
GO = {
	a: undefined -> function a() {} -> 1
}
复制代码

所以，答案为 1。实际 GO，就是 window，window存储过程就是这样的！

好的，继续下一题，又会输出什么？

console.log(a,b)
function a() {}
var b = function() {}
复制代码

答案是 [Function: a] undefined，这个答案也许和你想的完全相反，有没有？按照 GO来解决这道题吧！

GO = {
	a: undefined -> function() {}
	b: undefined 
}
复制代码

这是因为在 console.log(a,b)在 var b = function() {}之前，此时还没有对 b 变量进行赋值，而 a通过函数声明整体提升，会输出 funtion a() {}，如果上述代码改成如下代码 b变量就会有对应值啦。

var b = function() {}
console.log(a,b)
function a() {}
复制代码

回到我们开头的一道题，现在解决它应该没问题了，会输出什么呢？

console.log(a)
function a(a) {
  var a = 10;
  var a = function () {

  }
}
var a = 1;
复制代码

由于并没有执行函数，我们不用 AO，改用 GO，这道题其实和上一道题差不多，因为我们 console.log(a) 在赋值操作之前，因此我们不会有 1的结果，所以我们会打印 function a(){}

GO = {
  a: undefined -> function a(){}
}
复制代码

加大难度，看这一题，结合上述所说 AO 和 GO 来做，试一试！

var b = 3;
console.log(a);
function a(a){
  console.log(a);
  var a = 2;
  console.log(a);
  function a(){
    var b = 5;
    console.log(b);
  }
}
a(1);
复制代码

答案：

[Function: a]
[Function: a]
2
5
复制代码

我觉得能把这道题完整做出来， AO 和 GO 基本没啥问题了，现在来解释一波：

直接上 GO、AO，后续不再过多解释了，如果还有不明白的小伙伴，建议往上再复习一遍，相信可以独立解决这道题的 (*^▽^*)

GO = {
  b: undefined -> 3
  a: undefined -> function a() {}
}
AO = {
  a: undefined -> 1 -> function a(){} -> 2
  b: undefined -> 5
}
复制代码

不知道上一道题做的咋样，这道题我们找一点自信，看看会输出什么？

a = 1;
function test() {
  console.log(a); 
  a = 2;
  console.log(a); 
  var a =3;
  console.log(a);
}
test();
var a;
复制代码

答案是 undefined 2 3，还是老规矩，直接上 GO 和 AO

GO = {
  a: undefined -> 1
  test: function(){}
}
AO = {
  a: undefined -> 2 -> 3
}
复制代码

此时，可能就有小部分长的比较帅的小伙伴就要问了，为啥我第一个 a 不是打印 1呢，GO 里面不是可以取嘛？ 确实，但是你漏掉了前提， AO里面此时存在变量 a，就不会去GO里面找了，这里容易掉坑，必须注意！

function test(){
  console.log(b); 
  if(a){
    var b = 2;
  }
  c = 3;
  console.log(c); 
}
var a;
test();
a = 1;
console.log(a); 
复制代码

答案： undefined 3 1，直接上 GO 和 AO，解释一个地方，为啥 b 要放在 AO 里面，因为 js在预编译时，不会管你什么条件执不执行，只看你是否进行了申明，简单来说，只要在函数内声明了，那么我们就放入 AO里面，否则放在全局的GO里面。

GO = {
  a: undefined -> 1
  test: fucntion(){...}
  c: undefined -> 3
}
AO = {
  b: undefined
}
复制代码

最后，我们来几道题找点自信，结束这让人费解的 GO 和 AO吧，答案里我就只给 GO 和 AO啦，还不会方法的，建议多看上文内容，我就不作解释了。

function test() {
  return a;
  a = 1;
  function a() {}
  var a = 2;
}
console.log(test());
复制代码

答案： [Function: a]

GO = {
  test: function() {...}
}
AO = {
  a: undefined -> function a(){} -> 1 -> 2
}
复制代码

继续，下一题：

function test() {
  a = 1;
  function a() {}
  var a = 2;
  return a;
}
console.log(test())
复制代码

答案： 2

GO = {
  test: function(){...}
}
AO = {
  a: undefined -> function a(){} -> 1 -> 2
}
复制代码

加大难度，注意头发…

a = 1;
function test(e){
  function e(){}
  arguments[0] = 2;
  console.log(e); 
  if(a){
    var b = 3;
  }
  var c;
  a = 4;
  var a;
  console.log(b); 
  f = 5;
  console.log(c); 
  console.log(a); 
}
var a;
test(1);
console.log(a);
console.log(f);
复制代码

答案是 2 undefined undefined 4 1 5

GO = {
  a: undefined -> 1
  test: function(){...}
  f: undefined -> 5
}
AO = {
  e: undefined -> 1 -> function e(){} -> 2
  b: undefined 
  a: undefined -> 4
  c: undefined 
}
复制代码

下面来一点加餐，我想小伙伴们一定是不满足于上述 “简单” 的输出题的，下面来几道经典笔试题：

第一题，下面会输出什么？

var a = false + 1;
console.log(a);
复制代码

答案是 1，存在隐式类型转换。

var b = false == 1;
console.log(b)
复制代码

答案是 false，存在隐式类型转换。

可能前两道题比较简单，看看下面这份代码吧：

if(typeof(a) && (-true) + (+undefined) + ''){
  console.log(1);
}else{
  console.log(0);
}
复制代码

答案是 1，也是存在隐式类型转换，并且结合了上文的知识，一道非常不错的题。

console.log(-true) // -1
console.log(+undefined) // NaN
if(typeof(a) && (-true) + (+undefined) + ''){
  console.log(1);
}else{
  console.log(0);
}
console.log(typeof(-'123')) // number
console.log((-true) + (+undefined) + '') // NaN
复制代码

上面那道题解决了的话，下面这道题就是小试牛刀了，看看会输出什么？

if(1+5*'3' === 16){
  console.log(1);
}else{
  console.log(0);
}
复制代码

答案是 1，虽然 === 不能进行隐式转换，但是没说左边或右边单独不能进行隐式转换呐。

继续，

console.log(!!' ' + !!'' - !!false || '未通过');
复制代码

答案：1，因为左边 1+0-0 得到 0，所以不会走右边。

window.a || (window.a = '1')
console.log(window.a)
复制代码

答案：1，因为这里有 ()括号，优先级最高，首先会对 window.a 赋值 1，然后判断左边 window.a为真，直接走下面输出函数。 而如果说先走左边window.a 判断为 false，然后走右边进行赋值为 1，最后打印 1，这样回答的话就错啦，没有考虑括号优先级。

最后

function e(){} -> 2
b: undefined
a: undefined -> 4
c: undefined
}
复制代码


------

下面来一点加餐，我想小伙伴们一定是不满足于上述 **“简单”** 的输出题的，下面来几道经典笔试题：

第一题，下面会输出什么？

```javascript
var a = false + 1;
console.log(a);
复制代码

答案是 1，存在隐式类型转换。

var b = false == 1;
console.log(b)
复制代码

答案是 false，存在隐式类型转换。

可能前两道题比较简单，看看下面这份代码吧：

if(typeof(a) && (-true) + (+undefined) + ''){
  console.log(1);
}else{
  console.log(0);
}
复制代码

答案是 1，也是存在隐式类型转换，并且结合了上文的知识，一道非常不错的题。

console.log(-true) // -1
console.log(+undefined) // NaN
if(typeof(a) && (-true) + (+undefined) + ''){
  console.log(1);
}else{
  console.log(0);
}
console.log(typeof(-'123')) // number
console.log((-true) + (+undefined) + '') // NaN
复制代码

上面那道题解决了的话，下面这道题就是小试牛刀了，看看会输出什么？

if(1+5*'3' === 16){
  console.log(1);
}else{
  console.log(0);
}
复制代码

答案是 1，虽然 === 不能进行隐式转换，但是没说左边或右边单独不能进行隐式转换呐。

继续，

console.log(!!' ' + !!'' - !!false || '未通过');
复制代码

答案：1，因为左边 1+0-0 得到 0，所以不会走右边。

window.a || (window.a = '1')
console.log(window.a)
复制代码

答案：1，因为这里有 ()括号，优先级最高，首先会对 window.a 赋值 1，然后判断左边 window.a为真，直接走下面输出函数。 而如果说先走左边window.a 判断为 false，然后走右边进行赋值为 1，最后打印 1，这样回答的话就错啦，没有考虑括号优先级。

最后

笔记来源：小野森森视频

1oneLee
关注
专栏目录
JavaScript 10件让人费解的事情
10-29
JavaScript，作为一种广泛应用于Web开发的编程语言，虽然深受开发者喜爱，但也因其独特的特性和设计而让人感到困惑。本文将深入探讨JavaScript中10个让人费解的现象，帮助开发者更好地理解和应对这些潜在的问题。 1...
java-puzzles:用 Java 编写的令人费解的游戏和实用程序
06-24
在编程世界中，Java是一种广泛应用的编程语言，以其跨平台性、稳健性和丰富的库而备受青睐。"java-puzzlers"项目正是针对Java爱好者和开发者设计的一系列游戏和实用程序，旨在挑战人们的编程思维，提升Java编程技能...
简单理解GO&AO
weixin_39347470的博客
01-31 411
首先我们简单看下简单的v8的内存结构图（图片来自网易杨钰老师）： 首先我们简单的说下这几个区域： 栈：栈区就是用来保存变量名的 堆：堆区是V8引擎为开发者提供的可直接操作的内存区 例如： 假如我们定义一个空的对象：var a = {} 变量名a会保存在栈区中，同时会在堆中开辟一块内存，我们就可以通过存在栈区的对象名a直接操作该内存 常量区：常量区就是用来存储常量的，在js中，一般字符串，数字和b...
（三十）AO和GO剖析
沛沛呀、
10-18 1219
V8浏览器引擎。V8解析js的工具。 栈：存储变量的定义 堆：（包含函数定义区；函数缓存区） 池：放常量 所有变量中存储的都是内存地址。操作变量即是操作内存空间。 GO：全局作用域，预加载全局变量；window AO：局部作用域 案例1: 案例2: ...
AO是什么？GO是什么？深度解析JS预编译遇见AO和GO
爱前端的程序媛的博客
03-31 3602
写在前面 三月结束了，四月开始了。希望这个世界早点好起来。 今天是个好日子，好呀嘛好日子。哈哈哈哈哈哈，省里发文件了，终于让我看到了开学的希望，心情格外的舒适。 好了好了，来说说今天都干嘛了吧。今天又了解了一些JS预解析的内容，跟第一次看到的有一些出入，今天来补充一下。也没有很大的区别，主要就是更深入的理解JS预编译的过程。开始总结学习了啊啊啊啊啊啊。 JS代码执行过程 我们都知道...
一篇文章带你了解AO、GO
Xie Tiansheng的博客
05-11 1312
前端基础深入学习篇—— AO、GO 为什么要深入学习JavaScript基础？ JavaScript 堪称世界上被人误解最深的编程语言。虽然常被嘲为“玩具语言”，但在它看似简洁的外衣下，还隐藏着强大的语言特性。 JavaScript 目前广泛应用于众多知名应用中，对于网页和移动开发者来说，深入理解 JavaScript 就尤为必要。源文地址 个人心得： 源码阅读与学习受阻（更深入了解框架的运作方式，后期学习与使用框架会有事半功倍的效果，学习写代码设计思想思维方式，学习新的框架更容易触类旁通） 个人能力
js中的GO和AO是怎样产生的
weixin_43214455的博客
12-08 5147
对于js来说，首先会有一个预编译期的过程，那么在家个预编译期中会发生什么？ 预编译：有函数预编译AO，全局预编译GO 预编译是发生在函数执行的前一刻。 (函数)预编译分四个步骤： function test(a,b){ console.log(a); var c = 123; console.log©; function a(){};//这个是函数声明 console.log(b); var b ...
BeerOClock:烹饪时间...令人费解
05-10
令人费解"这个标题似乎暗示了一个与Java相关的项目或者问题，其中可能涉及到计时或者时间管理，特别是与烹饪相关的算法或应用。下面将围绕这个主题，深入探讨Java在时间和日期处理方面的知识，以及可能与烹饪相关的...
PML令人费解的多重生命及其在癌症发生中的作用
06-29
在这里，我们将总结关于这种令人费解的蛋白质的事实和推测。 BioEssays 22:827±835, 2000. ß 2000 John Wiley & Sons, Inc. 介绍 PML，最初被称为myl，是通过与视黄酸受体a (RARa) 的染色体易位导致99% 的APL ...
js预编译 GO 和AO
qq_42744920的博客
05-05 426
js预编译 语法分析（检查代码的语法错误） 预编译（初始化变量和函数） 代码执行 js在预编译会在代码执行前一刻执行，同时会创建对象“全局上下文GO”，遇到函数时会创建对象“函数上下文AO”。 二、暗示全局变量（imply global variable） 暗示全局变量是js预编译的特点，顾名思义，就是在js中，如果变量没有声明就赋值，该变量就会被默认成为全局变量。 代码： functi
【JavaScript由浅入深】执行上下文
QDCXYXZ_的博客
03-09 835
一文帮你了解执行上下文、AO/GO/VO和全局代码以及函数代码的执行过程
js中的的GO和AO
qq_44408319的博客
07-15 967
JS中的AO和GO以及相关的输出例题
js预编译AO对象及GO对象
baidu_38027860的博客
03-15 8246
简单谈一下js的预编译过程。function test(a,b){    console.log(a)    var a=123;     function a(){}    console.log(b)    var b=234;    console.log(b)    function b(){}    console.log(a)    var b=function(){}    cons...
GOAO执行步骤练习总结
dlf_0610的博客
06-29 798
请写出下面程序的输出结果是什么,并写出为什么；分析的过程是什么 function fun(num){ console.log(num); //3 实参形参统一 var num = 5; console.log(num);//5 } fun(3) /* AO{ num:undefined---->>3------>>5 } */ function fun(ger){
js预解析 GO和AO的创建赋值过程 javaScript基础
时间在飞飞的博客
05-21 611
今天刷了一些题，复习一下预解析 AO对象（activation object） GO对象 GO｛｝(global object) 这个GO就是window function test(a,b){ console.log(a) var a=3 function a(){} } test(2,3) 首先js的执行过程会先扫描一下整体语法语句，如果存在逻辑错误或者语法错误，那么直...
一步了解js中GO和AO的产生过程
tylls的博客
07-02 737
对于js来说，首先会有一个预编译期的过程，那么在预编译过程中会发生什么？ 预编译：函数预编译AO，全局预编译GO AO 预编译是发生在函数执行的前一刻。 (函数)预编译分四个步骤： function test(a,b){ console.log(a); var c = 123; console.log©; function a(){};//这个是函数声明 console.log(b); var b = function c(){};//这个是函数表达式 console.log(b); } test(1,3)
JavaScript基础之浅谈AO,GO，闭包
u011863822的博客
11-04 1841
AO GO AO和BO，说白了就是局部变量对象和全局变量对象。 AO(Activation Object ):其包含了函数执行期的上下文内容。 GO(Clobal Object)):其包含全局执行的上下文内容。 AO是一个即时的存储容器，函数执行完毕以后，AO是要销毁的。（但是有一种情况例外，那就是闭包） 这个具体过程，需要根据js文件进行逐步讲解 var a=1; function test(){ var b=2; } #执行了下面这句才会有AO test() 如果不执行test(
AO链作用域链和GO对象
LLL_liuhui的博客
12-23 1014
javascript是一种解释性语言，它执行之前会先进行语法分析，然后是预编译，最后解释执行，而AO链即预编译过程。 所有声明的全局变量，全是window属性。如：var a = 123; ==>window.a = 123;(window 即全局)； 函数声明 function test(){...} 函数表达式 var test = function (){...} 预编译步...
构造函数和原型（结合例子，详细！）
雨的印记的博客
09-01 1602
构造函数和原型 1.1 概述 在典型的OOP的语言中（如Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在ES6之前，JS中并没有引入类的概念。 ES6，全称ECMAScript 6.0,2015年6月发版。但是目前浏览器的JavaScript是ES5版本，大多数高版本的浏览器也支持ES6，不过只实现了ES6的部分功能和特性。 在ES6之前，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特性。 创建对象可以通过以下三种方式： 1. 对象字面量 2. new Obj
有什么事让你觉得在Linux上顺理成章，换到Windows上就令你费解
最新发布
07-08
对于开发人员而言，在Linux上进行软件开发是顺理成章的。Linux提供了丰富的开发工具和环境，如GNU编译器集合、强大的命令行工具和脚本...因此，对于习惯了Linux开发环境的人来说，切换到Windows上可能会感到有些费解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值