JS作用域详解-举例检验复盘
事先说明:
规则:
1.局部域可以访问全局域,全局域访问不了局部域
2.暂时只有函数能够成 局部域
3.私有变量: 局部域中声明的变量!
4.变量首先需寻找到声明符(var等)!
5.javaScript静态作用域 ,函数内变量的指向,在函数声明时就确定了
JS引擎对代码的预解析:
1.寻找变量声明 并提升到(当前域)的最前端
2.按照顺序 执行所有 执行语句
JS引擎解析流程:
1.先解析全局作用域,后解析局部作用域
2.先变量提升声明,后函数提升声明
3. 形参是函数的局部变量,会隐式声明出来
正文开始–难度逐渐加深
第一例+总结:
总结:
1.区别:函数内部有无声明符
2.影响:有声明符,函数内部对外界无影响;无声明符,函数内部对外界有印象
var x = 10;
function fn() {
x = 20;
}
fn()
console.log(x); ==> 20
var x = 10;
function fn() {
x = 20;
}
console.log(x); ==> 10
var x = 10;
function fn() {
var x = 20;
}
fn()
console.log(x); ==>10
第二例+总结:
总结:
1.当局域内与局域外都没有声明变量,则会全局隐式声明
2.外部无法访问内部变量
function fn() {
x = 20;
}
fn()
console.log(x); ==> 20
var x;
function fn() {
var x = 20;
}
fn()
console.log(x); ==> undefined
第三例+总结:
分析:
内部 fn(){
var x;
y = 10;
x = y;
}
y会被默认全局隐式声明
x是局域内的变量,局域外无法访问
function fn() {
var x = y = 10;
}
fn()
console.log(x); ==>报错
console.log(y); ==>10
第四例+总结:
总结:
1.函数内:代码由上到下按顺序执行,内部先输入x,后x被修改
2.函数外:x被函数内x值所改变
3.内部没声明,指向全局声明的
var x = 10;
function fn() {
console.log(x); ==>10
x = 20;
}
fn()
console.log(x); ==> 20
第五例+总结:
总结:
1.首先var x;变量声明提升
2.然后由上到下执行代码
解析过程:
var x
console.log(x) ==>undefined
x= 10
console.log(x)
var x = 10; ==> undefined
第六例+总结:
总结:
内部解析过程 fn() {
var x;
console.log(x);
x = 20
}
var x = 10;
function fn() {
console.log(x); ==> undefined
var x = 20;
}
第七例+总结:
总结:
自我练习
var x = 30;
function fn() {
var x;
X = 10;
function fn1() {
x = 20;
}
console.log(x) ==> 10
}
fn();
console.log(x) ==> 30
第八例+总结:
总结:
//流程剖析:
/========== 全局 ======/
var x;
function fn(){}
x = 30;
fn(){}
/==== fn ======/
function fn1(){}
x = 10;
fn1()
/==== fn1 ============/
console.log(x + “fn1”); ==>10
x = 20;
console.log(x + “fn”) ==>20
console.log() ==>20
var x = 30;
function fn() {
x = 10;
function fn1() {
console.log(x); ==>10
x = 20;
}
fn1();
console.log(x); ==>20
}
fn();
console.log(x) ==>20
第九例+总结:
总结:
函数与变量重名
过程剖析:
var x;
function x(){}
x = 10;
x(); ==>10()会报错
console.log(x)
var x = 10;
function x() {
x = 20;
}
x();
console.log(x); ==>报错
第十例+总结:
总结:
过程剖析:
var x;
function x(){}
console.log(x); ==>函数体,先提升变量,后提升函数,后来者居上
x = 10;
x()
console.log(x); ==>函数体
var x= 10;
function x(){
x = 20;
}
x();
第十一例+总结:
总结:
//(剖析过程):
/========== 全局 ====/
var x;
function f1();
console.log(x);
f1();
/==== f1() ====/
var x;
function f2();
f2()
/==== f2() ==========/
x = 20
console.log(x)
x = 10;
x = 0;
console.log(x)
console.log(x); ==> undefined
f1();
var x = 0;
function f1() {
f2();
var x = 10;
function f2() {
x = 20;
console.log(X) ==> 20
}
}
console.log(x) ==> 0
第十二例+总结:
总结:
函数内变量的指向,在函数声明时就确定了!!!
var x = 10;
function f1(){
console.log(x); ==> 10
}
function fn2() {
var x = 20;
f1()
}
fn2()
var x = 10;
function fn2() {
var x = 20;
function f1(){
console.log(x); ==> 20
}
f1()
}
fn2()
第十三例+总结:
总结:
函数在调用时才会使,函数内部的i生值
function f1() {
var arr = [];
for (var i=0;i< 10 ;i ++) {
arr.push(function() {
return i;
})
console.log(i); ==>0 1 2 3 4 5 6 7 8 9
}
console.log(i); ==>10
return arr;
}
console.log(f1()[3]) ===> ? () { return i }
console.log(f1()[3]()) ===> 10
|