🙏初识JS,浅谈JS 里的一句代码是怎样运行的

我心飞翔 分类:javascript

用第一性原理来推导

1. 代码是顺序执行的

  • 话不多说先看代码
console.log(showname);
//直接报错!!!

var myname = 'a';
console.log(myname);
//a

console.log(myname);
var myname = 'a';
//undefined
 

为什么var myname = 'a'放在前后的结果不一样呢?

  • 代码是顺序执行的

那为什么后面的代码不是报错而是显示undefined?

  • 变量提升了

那什么是变量提升呢?

var myname = 'a';
//===》
var myname=undefined;
myname='a';
 

变量的声明会提升到当前作用域的最顶端(全局)
然而变量的赋值却不会,所以会给变量设置默认值undefined。

  • 代码是先编译在执行

变量的声明属于编译阶段,而变量的赋值、输出属于执行阶段
虽然myname被声明了,但它的赋值是再输出之后。

2.问题小升级

showName();
//可想而知直接报错!
 
showName();
function showName(){
    console.log('MyshowName')
}
//MyshowName
 

根据代码顺序执行,showName函数是先执行,再被声明的。那为什么仍然可以输出结果呢?
难道函数也会被提升?

  • 是的,函数的声明部分也会提升到代码开头
// function showName(){
//     console.log('MyshowName')
// }===》》》
function showName = function(){ 
    console.log('MyshowName') 
}
 

函数编译阶段时会把整个函数都编译进去

  • 但如果使用函数表达式?
showName()
var showName = function(){  
    console.log('showName')
}
//报错!showName is not a function
 

说明只是showName当成一个变量被声明,编译阶段就没把函数编译进去。只有声明函数时,编译阶段时才会把整个函数都编译进去。

3.再次提升

  • 看题
showName();
var showName = function(){
    console.log(2);
}
function showName(){
    console.log(1);
}
showName();
 

求输出结果

答案:1、2

我们将代码等价转换就一目了然了

function showName(){
    console.log(1);
}

showName();//1

// var showName = function(){
//     console.log(2);
// }===》》》
var showName;
showName=function(){
    console.log(2);
}

showName();//2
 

总结

  1. 代码一定是逐行运行的
  2. 代码是先编译后执行的
  3. 要学会区分哪些代码是编译阶段要运行的代码,比如变量声明。哪些代码是执行阶段运行的代码,比如函数的赋值

初学者,还请各位大佬多多指教!!!🙏

回复

我来回复
  • 暂无回复内容