?初识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
总结
- 代码一定是逐行运行的
- 代码是先编译后执行的
- 要学会区分哪些代码是编译阶段要运行的代码,比如变量声明。哪些代码是执行阶段运行的代码,比如函数的赋值
初学者,还请各位大佬多多指教!!!?