JS 之作用域链和闭包

时间:2022-05-25 16:04:51

1.JS无块级作用域

    <script>
function Main(){
if (1==1){
var name = "alex";
}
console.log(name);
}
Main();
</script>
执行结果:{}即块级作用域。
alex

2.JS采用函数作为作用域链

    <script>
function Main(){
var innerValue = "alex";
} Main();
console.log(innerValue);
</script>
执行结果:
Uncaught ReferenceError: innerValue is not defined

3.JS的作用域链在创建前已经生成了

示例一:

    <script>
xo = "alex";
function Func(){
var xo = "seven";
function inner(){
console.log(xo);
}
return inner;
}
var ret = Func();
ret();
</script>
执行结果:生成的作用域链为 xo("alex")----xo("undefined")----xo(使用作用域链)
seven

示例二:

    <script>
xo = "alex";
function Func(){
var xo = "eric";
function inner(){
console.log(xo);
}
xo = "seven";
return inner;
}
var ret = Func();
ret();
</script>
执行结果:生成的作用域链xo("alex")----xo("undefined")----xo("undefined")----Func[xo]("eric")----Func[xo]("seven")----inner()
seven

示例三:

    <script>
xo = "alex"; function Bar(){
console.log(xo);
} function Func(){
var xo = "seven";
return Bar;
} var ret = Func();
ret();
</script>
执行结果:作用域链分为二段:1.xo("alex")----xo
              2.xo("alex")----xo("undefined")----Func[xo]("seven")
alex

闭包:如果每个下载的JS都有自定义的全局变量,那么在导入的时候就会发生相互覆盖的现象,通过闭包可以将变量锁定在函数内。

(function(){
var a = 123;
function f1(){
console.log(a);
}
function f2(){
cocnsole.log(a);
}
})();

面向对象JS

    <script>
function Foo(name,age){
this.name = name;
this.age = age;
} Foo.prototype = {
GetInfo:function(){
return this.name + this.age;
},
Func:function(arg){
return this.name + arg;
}
}
var obj = new Foo('alex',22);
console.log(obj.name);
console.log(obj.GetInfo());
console.log(obj.Func(55));
</script>
执行结果:
alex
alex22
alex55