各种例子关于JS的传参以及作用域和执行环境

最新推荐文章于 2020-10-25 12:11:38 发布
转载最新推荐文章于 2020-10-25 12:11:38 发布 · 155 阅读
0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/shenq/p/7212314.html
本文深入探讨JavaScript中的变量作用域、闭包原理及其实现方式，通过多个实例演示了如何正确理解和运用这些概念。
function test() {
            a = 30;
            var b = 20;
        }
        test();
        console.log("a="+a); //这里很明显，a为全局变量
        console.log("b="+b);//b为局部变量，故在函数test外调用是，提示未定义

    var reg = /(^[A-Za-z0-9 ]{6,20}$)/;

    function fun() {
        if (!reg.test($('#test').val())) {
            alert('false');
        }else{
            alert('true');
        }
    }
    $('#test').blur(function() {
        fun();
    });


var i=10;
function a() {
    alert(i);
    var i = 2;
};
a();
http://www.cnblogs.com/skylar/p/3986087.html
    var a = 10;
    function aa() {
        bbb();
        alert(a);
        function bbb() {
            var a = 20;
        }
    }
    aaa();
var a = 10;
function aa() {
    a +=3;


}
aa();
alert(a);

var a;
    function aaa() {
        var a=b=10;
    }
    aaa();
    alert(a);
    alert(b);


var color = "blue";
function changeColor(){
    var anoterColor = "red";
    function swapColor(){
        var tempColor = anoterColor; //tempColor = red
        anoterColor = color; //anoterColor = blue
        color = tempColor; //color = red
        console.log(color); //red
    }
    swapColor();
}
changeColor();

var a = 1;
function hehe()
{
    alert(a);
    var a = 2;
    alert(a);
}
hehe();


var num = 123;
function foo(){
    var num = 456;
    function fn(){
        console.log(num);   //  输出456
    }
    fn();
}
foo();


var num = 123;
function foo1(){
    var num = 456;
    function foo2(){


        num = 789;
        function foo3(){
            console.log(num);   // 输出789
        }
        foo3();
    }
    foo2();
}
foo1();     // 输出456
console.log(num);   // 输出123

if ( true ) {
    function f1 () {
        console.log( 'true' );
    }
} else {
    function f1 () {
        console.log( 'false' );
    }
}
f1();


var y = 'global';
function test(x){
    if(x){
        var y ='local';
    }
    return y;
}
console.log(test(true));
console.log(y);



var y = 'global';
function test(x){
    (function(){
        if(x){
            var y = 'local';
        }
    })();
    return y;
}
console.log(test(true));


var y = 'global';
function test(x){
    console.log(y);
    if(x){
        var y = 'local';
    }
    return y;
}
console.log(test(true));



console.log(y);
function test(x){
    console.log(y);
    if(x){
        var y = 'local';
    }
    return y;
}
var y = 'global';
console.log(test(true));

var x = 10;
function foo(y) {
    var z = 30;
    function bar(q){
        console.log(q);
        var r = 20;
        return x + y + z + q + r;

//bar环境中可以访问z、x、r
//作用域链bar环境-->foo环境-->全局环境
    }
    return bar;

//foo环境中可以访问z、x不能访问r
//作用域链foo环境-->全局环境

}

//全局环境中不可访问z、r
//作用域链全局环境
var bar = foo(20);
bar(40);//内部环境可以通过作用域链访问所有外部环境，但外部环境不能访问内部环境中的任何变量和函数


var a = "global var";
function foo(){
    console.log(a);
}
function outerFunc(){
    var b = "var in outerFunc";
    console.log(b);
    function innerFunc(){
        var c = "var in innerFunc";
        console.log(c);
        foo();
    }
    innerFunc();
}
outerFunc();


(function(){
    console.log(bar);
    console.log(baz);
    var bar = 20;
    function baz(){
        console.log("baz");
    }baz();
})();
(function(){
    console.log(bar);
    console.log(baz());
    var bar = 20;
    function baz(){
        console.log("baz");
    }
})();
(function(){
    console.log(bar);
    console.log(baz());
    var bar = 20;
    function baz(){
        console.log("baz");
    }
})()

var bar;
(function(){
    console.log(bar);//undefined
    console.log(baz);//function baz(){ console.log("baz"); }
    bar = 20;
    console.log(window.bar);//20
    console.log(bar);//20
    function baz(){
        console.log("baz");
    }
})();


var color="blue";

function changecolor(){

    var anothercolor="red";

    function swapcolors(){

        var tempcolor=anothercolor;

        anothercolor=color;

        color=tempcolor;

        // Todo something
return tempcolor;
    }

    swapcolors();

}

changecolor();

//这里不能访问tempcolor和anocolor;但是可以访问color;

alert("Color is now "+color);



var closer=(function(){
    var i=0;
    function innerCloser(){
        console.log(i++);
    }
     innerCloser();
})();



var person;
person = new Object();
person.name = 'bbb';
function setName(obj) {
    obj.name = 'aaa';
    var obj = new Object(); // 如果是按引用传递的,此处传参进来obj应该被重新引用新的内存单元
    obj.name = 'ccc';
    return obj;
}



var newPerson = setName(person);
console.log(person.name + ' | ' + newPerson.name);


function box(num){
    num+=10;
    return num;
}

var num = 10;
var result = box(num);
alert(result);
alert(num);


var box = new Object();
var box = "lee";
box.age = 23;
alert(box.age);//undefined


var man = new Object();//man指向了栈内存的空间地址
man.name = "Jack";
var man2 = man;//man2获得了man的指向地址

alert(man2.name);//两个都弹出Jack
alert(man.name);


var man = new Object();//man指向了栈内存的空间地址
man.name = "Jack";
var man2 = man;//man2获得了man的指向地址

man2.name = "ming";//因为他们都指向同一个object，同一个name，不管修改谁，大家都修改了
alert(man2.name);//两个都弹出ming
alert(man.name);

function box(num){
    num+=10;
    return num;
}

var num = 10;
var result = box(num);
alert(result);
alert(num);


var name = "Jack";      //定义全局变量
function setName(){
    return "trigkit4";
}

alert(window.name);    //全局变量，最外围，属于window属性
alert(window.setName());

var name = "Jack";
function setName(){
    name = "trigkit4";  //去掉var变成了全局变量
}

setName();
alert(name);//弹出trigkit4



var name = "Jack";
function setName(name){  //通过传参，也是局部变量
    alert(name);
}

setName("trigkit4");//弹出trigkit4
alert(name);//弹出Jack


var name = "Jack";
function setName(){
    function setYear(){  //setYear()方法的作用域在setName()内
        return 21;
    }
}
alert(setYear());


var name = "Jack";
function setName(){
    function setYear(){  //setYear()方法的作用域在setName()内
        return 21;
    }
    return setYear();
}
alert(setName());


if(true){            //if语句的花括号没有作用域的功能。

    var box = "trigkit4";
}
alert(box);

        var color = 'red';
        function changeColor() {
            if(color =='red') {
                color = 'blue';
            } else{
                color='red';
            }
        }
        changeColor();
        alert(color);


function showMsg()
{
    var MsgA='Message A';
    this.setMsg=function(msg)
    {
        var MsgB='Message B';
        alert(MsgA); //Message A （子函数setMsg()可以访问父函数showMsg()的局部变量MsgA）
    }
    alert(MsgB); //MsgB未定义 （在父函数中不能访问其子函数中定义的变量MsgB）
}
var sm=new showMsg();
sm.setMsg('Message string');

定义一个匿名函数，然后把代码丢到这个匿名函数里面，能有效减少命名冲突或变量污染，这是常见JS框架的做法
(function()
{
    var msg='This is message';
    alert(msg);//This is message
})();
var msg;
document.write(msg); //msg未定义 （匿名函数外的其它方法已无法调用msg这个变量）
//-----------------------------
msg='This is message';
alert(msg);


        var color = 'blue';
        function getColor() {
            var color = 'red';
            return color;
        }
alert(getColor());//red 任何位于局部变量color的声明之后的代码，如果不使用window.color都无法访问全局的color。


var x = 1;
var y = 0;
var z = 0;
function add(n){n=n+1;}
y = add(x);
function add(n){n=n+3;}
z = add(x);


function Foo() {
    getName = function () {
        return 1;
    };
    return this;
}
Foo.getName = function () {
    return 2;
};
Foo.prototype.getName = function () {
    return 3;
};
var getName = function () {
    return 4;
};
function getName() {
    return 5;
}


console.log(Foo.getName());//2
console.log(getName());//4
console.log(Foo().getName());//1
console.log(getName());//4  1
console.log(new Foo.getName());//2
console.log(new Foo().getName());//3
console.log(new new Foo().getName());//1  3


(function() {

//    'use strict';
    var a = b =5;
    console.log(b);

})();







(function(){
    console.log(bar);//undefined
    console.log(baz);//function baz(){ console.log("baz"); }
    bar = 20;
    console.log(window.bar);//20
    console.log(bar);//20
    function baz(){
        console.log("baz");
    }
})()


(function(){
    console.log(bar);//undefined
    console.log(baz);//function baz(){ console.log("baz"); }
    bar = 20;
    console.log(window.bar);//20
    console.log(bar);//20
    function baz(){
        console.log("baz");
    }
})()

x = 1;
alert(x);//1
var y = function() {
    alert(x);//undefined
    var x = 2;
    alert(x);//2
}
y();


x = 1;
alert(x);//1
var y = function() {
    var x; //此时x还未赋值，所以为undefined。
    alert(x);
    x = 2;
    alert(x);
}
y();



var a = 1;
function b() {
    a = 10;
    return;
}
b();
alert(a);//10




var a = 1;
function b() {
    a = 10;
    return;
    function a() {}
}
b();
alert(a);//1



alert(a);
var a = 123;

alert(a);
a = 123;