《高级前端3.4》JavaScript高级技巧——作用域,闭包,this,按值/引用传递

核心内容： 
1.变量作用域和闭包
2.This指针的使用
3.按值传递和按引用传递 

 

作用域和闭包

JavaScript的作用域不同于传统的块级作用域而是函数级作用域，闭包是可以包含自由变量的代码块，这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）。

作用域：

//js是函数级作用域，函数内和函数外的变量都能访问得到，
//问题只是什么时候被赋值而已（即undefined）

test();    //j是undefined，相当于先定义var j;然后test();然后j=1000;
var j = 1000;
test();    //j能输出1000
function test(){
    if(false){
        var i = 10;
    } else{
        var t = 100;
    }
    console.log(i);
    console.log(j);
    console.log(t);
}

内部顶掉外部变量：

var j = 100;
(function test(){
    console.log(j);
    var j;
})();
//输出undefined

闭包：

//下面这个就是一个闭包，
//闭包就是拿到本不属于他的东西
//闭包容易造成内存泄漏，特别是在后端nodejs，要注意
function test(){
    var k = 1000;
    return function(){
        return k;
    }
}
var t = test()();
console.log(t);

 

 

this指针的使用

this是JavaScript中功能最强大的关键字之一。不幸的是，如果你不知道它具体怎么工作，你将很难正确使用它。但是在javascript中，由于 javascript的动态性（解释执行，当然也有简单的预编译过程），this的指向在运行时才确定。这个特性在给我们带来迷惑的同时也带来了编程上的 自由和灵活，结合apply(call)方法，可以使JS变得异常强大。

 

this是一直在变的，但不变的是谁调用它，它就指谁！

m = 100;
function test(){
    alert(this.m);
}
test();    //100

 

再看一个例子，用到闭包：

this.m = 1000;
var obj = {
    m: 100,
    test: function(){
        alert(this.m);    //100
        return function(){
            alert(this.m);    //return出去后，其实是被外边的window调用的，所以是1000
        }
    }
}
(obj.tset())();    //1000

 

看一个button事件的例子：

<input type="button" id="test" value="按钮" style="color:red;">


<script>
var style = {
    color: "green"
};
test(); //green

function test() {
    alert(this.style.color);
}
document.getElementById("test").onclick = test; //red
</script>

 

上面三种都是非常常见的

下面看一个面向切面或是面向对象编程的时候

this.a = 1000;

function test() {
    this.a = 1;
}
test.prototype.geta = function() {
    return this.a;
}
var p = new test;
console.log(p.geta()); //1，因为this是指向p的
console.log(a); //1000

 

 

按值传递和按引用传递

按值传递：指的是在方法调用时，传递的参数是按值的拷贝传递。按引用传递：指的是在方法调用时，传递的参数是按引用进行传递，其实传递的引用的地址，也就是变量所对应的内存空间的地址。

可以看我之前的一篇介绍《JavaScript——之对象参数的引用传递》：http://www.cnblogs.com/woodk/p/5128302.html

 

先看一个按值传递：（当参数是string, number, boolean）

function test(num){
    var num = num+1;
    return num;
}
var num = 1;
console.log(test(num));    //2，按值传递
console.log(num);        //1

按引用传递：（当参数是对象，数组时）

function test(obj){
    obj.age = "20";
    console.log('inner', obj);
}

var obj = {
    name: "xiaoming"
}
test(obj);
console.log('outer', obj);