js 易混淆及难点总结

• this主要用来帮助函数引用函数所处作用域中的对象。

var color = 'red';
function syaColor() {
    console.log(this.color);
    console.log(this);
}
function sayColor() {
    console.log(this.color);
    console.log(this);
}
syaColor(); //red
var o = {};
o.color = 'blue';
o.sayColor = sayColor;
o.sayColor(); //blue

•  明确变量的作用域

function createFunction(){
    var result=new Array();
    for(var i=0;i<10;i++){
        result[i]=function(){
            return i;
        }
    }
    alert(result[2]()); //10,执行到这里时候result[2]还是一个function，i已经加到10了
    return result;
}
/*********如何输出2呢？*********/
function createFunction(){
    var result=new Array();
    for(var i=0;i<10;i++){
        result[i]=function(num){
            return num;
        }(i)
    }
    alert(result[2]); //2,以立即执行的模式，执行到这里时候result[2]已经由function执行完转化为值了
    return result;
}

• 即使没有声明，变量在声明它们的函数体以及这个函数体嵌套的任意函数体内默认是有定义的。

var scope="global";
function t(){
    console.log(scope);//undefined
    var scope="local"
    console.log(scope);//local
}
t();
/******等同于******/
var scope="global";
function t(){
    var scope;
    console.log(scope);//undefined
    scope="local";
    console.log(scope);//local
}
t();

• JS允许不在函数中写代码块，相当于声明全局变量

var name="global";
if (true){
    var name="local";
    console.log(name);//local
}
console.log(name);//local
///******区别于******/
var name="global";
function a(){
    var name="local";
    console.log(name);//local
}
a();
console.log(name);//global

• 如果一个变量没有在任何地方有过声明，那么他成为了window对象的属性

function t(flag){
    if(flag){
        s="ifscope";
        for(var i=0;i<2;i++)
            ;
    }
    console.log(i);//2
}
t(true);
console.log(s);//ifscope

• 作用域链

name="lwy";  
function t(){  
    var name="tlwy";  
    function s(){  
        var name="slwy";  
        console.log(name);  
    }  
    function ss(){  
        console.log(name);  
    }  
    s();  //slwy
    ss();  //tlwy
}  
t();
// 执行s()时，查找变量的顺序为：s()→t()→window,执行ss()时，ss()→t()→window

•  函数返回函数

var add = function(x){
    var sum = 1;
    // 在函数表达式内部有一个求和的内部函数
    var tmp = function(x){
        sum = sum + x;// 求和
        return tmp;
    };
    // 构建一个函数体的toString()函数
    tmp.toString = function(){
        return sum;
    };
    return tmp; // 返回的是一个函数体,如果该函数体有toString()方法,则会调用函数体的toString()方法
}

alert(add(4)(4)(3)(5));//13,重写了函数的toString方法，但是每次return都是函数本身
alert(add(4));//1,两个x参数是不相关的，你也可以分别定义为ab，如果add函数没有参数，也可以这么调用，但是没有任何效果

•  函数作为函数的参数

var i=0;
function nextVideoFrame(){
    if(i<100){
        console.log(++i);
        requestNextAnimationFrame(nextVideoFrame);//如果在此传入nextVideoFrame()，就变成了函数的返回结果作为参数传入了
    }
}
nextVideoFrame();

•  关于立即执行

var a = (function b(){
    return 1;
})();
alert(a());//报错，经过立即执行以后，a已经不是函数了
alert(a);//right，1

var a = (function b(){
    return c;
})();
function c(d,e){
    return d +e;
}
alert(a(1,2));//经过立即执行，a已经指向c()函数了
alert(a());//Nav
//var a =  (function b(){})();与var a =  function b(){}();效果上是一致的

 

转载于:https://www.cnblogs.com/gangmiangongjue/articles/5853837.html