js模式第四章

ゞ浴缸里的玫瑰 2022-03-16 06:58 176阅读 0赞

## 第四章 函数 ##

> 函数表达式和函数声明式：

//命名函数表达式
    var demo=funtion d(){
        console.log("Hello World!");
    };
    
    //函数表达式
    var demo=function(){
        console.log("Hello World!");
    };
    
    //函数声明式
    function demo(){
        console.log("Hello World!")
    }
    复制代码

### 区别： ###

*  函数表达式又分为**命令函数表达式**和**函数表达式**（匿名函数）,并且**函数表达式**结尾需要加上分号,而函数声明式则不需要。
 *  **函数声明式**会进行**变量提升**，**而函数表达式**则不会。
    
    //全局函数 function foo()\{ alert('global foo'); \}
    
    function bar()\{ alert('global bar') \}
    
    function hoistMe()\{ console.log(typeof foo); //输出 "function" console.log(typeof bar); //输出 "undefined"
    
        foo();//输出"local foo"
          bar();//输出TypeError: bar is not function
        
          //函数声明
          //变量'foo'以及其实现着2被提升
          function foo(){
              alert('local foo');
          }
        
          //函数表达式
          //仅变量 'bar' 提升
          //函数实现并未提升
          var bar = function () {
              alert('local bar')
          }
        复制代码
    
    \}

## 回调模式 ##

> 函数都是对象，函数可以被当做参数传递给其他函数，当一个函数被当做参数传递给另一个函数，且执行，这叫回调。

Code：

function writeCode(callback){
        //do something
        callback();
    }
    
    function introduce(){
        // do something
    }
    
    //传递函数，执行回调
    writeCode(introduce);
    复制代码

### 回调与作用域 ###

> 如果传递的对象不是一个函数，而是一个对象的方法，并且这个方法用this来引用所属的对象，那可能会导致意想不到的后果。

假设一个方法paint(),它是一个名为myapp的对象的方法：

var myapp={};
    myapp.color="red";
    myapp.paint=function(node){
        node.style.color=this.color;
    };
    复制代码

函数findNodes()执行以下语句：

var findNodes=function(callback){
        // ...
        if(typeof callback === "function"){
            callback(found);
        }
    };
    复制代码

如果执行findNodes(myapp.paint)并不会得到如期的结果，因为此时this的引用的对象发生了改变，变成了findNodes，而findNodes并没有color这个属性。那我们怎么得到预期的结果呢？

一个解决方法，我们传递回调函数，并且也传递回调函数所属的对象：

var findNodes = function(callback,callback_obj){
        // ...
        if(typeof callback === "function"){
            callback(callback_obj,found);
        }
    };
    复制代码

那我们的写法将变成findNodes(myapp.paint,myapp)，我们也可以将第一个参数写成字符串的形式，这样无需写两遍对象名， findNodes("paint",myapp),Code：

var findNodes = function(callback,callback_obj){
        // ...  
        if(typeof callback === "string" ){
            callback = callback_obj[callback]
        }
    
        if(typeof callback === "function"){
            callback.call(callback_obj,found)
        }
    };
    复制代码

## 返回函数 ##

> 函数也是对象，因此它们也可以用作为返回值。 下面有个demo：

var setup=function(){
        alert(1);
        return function(){
            alert(2);
        };
    };
    var my=setup(); //alert 1
    my(); // alert 2
    复制代码

> 由于setup()包装了返回函数，它创建了一个闭包(粗俗的理解就是函数中的函数)，可以用这个闭包存储一些私有数据，这些数据仅可以被该返回函数访问，但外部代码却无法访问。 Code：

var setup=function(){
        var count = 0;
        return function(){
            return (count+=1);
        };
    };
    
    var next=setup();
    next(); //result is 1
    next(); //result is 2
    next(); //result is 3
    复制代码

## 自定义函数 ##

> 如果创建了一个新函数并且将其分配给保存另外函数的同一个变量，那么就以一个新函数覆盖了旧函数。在某种程度上，回收了旧函数指针以指向一个新函数。而这一切发生在旧函数体的内部。在这种情况下，该函数以一个新的实现覆盖并重新定义了自身，这可能听起来比实际上更复杂，Code：

var scareMe=function(){
        alert("Boo!");
        scareMe=function(){
            alert("Double boo!");
        };
    };
    
    scareMe(); //输出 Boo
    scareMe(); //输出 Double boo!
    复制代码

> 当函数有且执行一次时，这种模式非常有效。 但是这种模式有个缺点，就是定义在自身时，已添加的属性和方法都会丢失，此外，如果该函数使用了不同的名称，比如重新分配给了另外一个变量或者以对象的方法来使用，那么重定义的部分将永远不会发生。并且将会执行原函数体。 Code：

//1 添加一个新属性
    scareMe.property="property";
    
    //2 赋值给另一个不同名称的变量
    var prank=scareMe;
    
    //3 作为一个方法使用
    var spooky = {
        boo:scareMe
    };
    
    // 
    prank(); //输出 "bool"
    prank(); //输出 "bool"
    console.log(prank.property) //输出 "property"
    
    spooky.boo(); //输出 "bool"
    spooky.boo(); //输出 "bool"
    console.log(spooky.boo.property); //输出 "property"
    
    scareMe(); //输出 "Double boo!"
    scareMe(); //输出 "Double boo!"
    console.log(scareMe.property); // 输出 "undefined"
    复制代码

当我们以新名称和作为一个方法使用时，scareMe指针一直被重写，至此scareMe函数自定义的部分一直没有执行。直到当我们直接执行scareMe时，指针没有被重写，自定义部分才得以执行。

## 即时函数 ##

> 即时函数模式，该模式有一下几部分组成：

*  可以使用函数表达式定义一个函数（函数声明则无法达到这个效果）
 *  在末尾添加一组括号，这将导致该函数立即执行。
 *  将整个函数包括在括号中（只有不将该函数分配给变量才需要这样做）。

> 这种模式的好处就是形成了作用域沙箱。避免了全局污染，并且可以执行一些一次新函数，而不必去创建复用函数。

(function(){
        var days=['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
            today=new Date(),
            msg='Today is ' + days[today.getDay()] + ', ' + today.getDate();
        alert(msg);
    }())
    复制代码

### 即时函数的参数 ###

> 即时函数同样可以传递参数，Code：

;(function(who,when){
        console.log("I met " + who + " on " + when)
    })("Nei",new Date());
    复制代码

### 即时函数的返回值 ###

> 当然即时函数同样可以返回值，Code：

var result=(function(){
        return 2+2;
    })();
    复制代码

> 赋值给一个变量时，即时函数可以不需要最外层括号，Code：

var result=function(){
        return 2+2;
    }();
    复制代码

> 即时函数不单单可以返回整数值，同样还可以返回其他类型，例如返回函数。形成一个闭包，在一个函数作用域中保留变量。Code：

var getResult=(function(){
        var res = 2 + 2;
        return function(){
            return res;
        };
    })();
    复制代码

> 于是我们可以借用即时函数，在创建对象时，可以将对象的属性永久保留在内存中。Code：

### 优点 ###