JavaScript的函数

Dear 丶 2022-05-19 03:42 158阅读 0赞

## 函数是原生对象 ##

*  可以使用new完成对象的实例化。
 *  此方式效率低下，不建议使用。

![这里写图片描述][70]

## 函数是一等公民 ##

*  可以完成功能（C中的函数）
 *  可以做为实参和返回值（当成数据，并轻松实现回调模式）
 *  可以成为对象的成员（“方法”的概念）
 *  可以使用new操作（自定义类型的概念，class的替代品）
 *  有prototye的引用，并影响所有实例的原型引用

## 更灵活的方式 ##

![这里写图片描述][70 1]

## no overload ##

*  函数名称自身就是“指针”，重新定义仅为“覆盖”
 *  未能匹配上的形参将以“undefined”形式出现
 *  利用arguments可以实现’”重载”

![这里写图片描述][70 2]

## Function is Data ##

*  函数可以作为实参传入

![这里写图片描述][70 3]

*  函数内部可以有函数，并且可以将这个内部函数返回

![这里写图片描述][70 4]

![这里写图片描述][70 5]

*  一次性函数  
    ![这里写图片描述][70 6]

## 函数借用 ##

*  “Function对象”有两个方法（非继承得到），apply和call
 *  可以实现Function对象调用时“指定this”的作用。  
    ![这里写图片描述][70 7]

apply和call可以改变this的指向。  
现在我们来看如下例子，了解一下this的指向，当我们在全局直接调用方法的时候，this其实指向的是global，如下：

global.name = "cc";
    function fn1(age) { 
        console.log(this.name +'...'+ age);
    }
    fn1(12);

![这里写图片描述][70 8]  
我们可以发现this.name打印的其实是global中的name。

然后我们再来看下面的例子：

global.name = "cc";
    function fn1(age) {
        console.log(this.name +'...'+ age);
    }
    
    let obj = {
       name : "aaa",say : fn1};
    obj.say(12);

![这里写图片描述][70 9]  
我们可以发现this指向的是调用该function的对象obj，打印的是obj中的name.

如果我们现在有一个新对象obj1，我们也想调用say这个function，但是在obj1中却没有这个function，该怎么做。

global.name = "cc";
    function fn1(age) {
        console.log(this.name +'...'+ age);
    }
    
    let obj = {
       name : "aaa",say : fn1};
    obj.say(12);
    
    let obj1 = {
       name: "bbb"};

如上所示，obj1中只有name，并没有say这个function，但如果我们obj1想调用say()，该怎么做。这个时候我们就可以使用call来改变this的指向。

global.name = "cc";
    function fn1(age) { 
        console.log(this.name +'...'+ age);
    }
    
    let obj = {name : "aaa",say : fn1};
    obj.say(12);
    
    let obj1 = {name: "bbb"};
    
    fn1.call(obj1,100);//fn1的this指向obj1

通过call()，我们可以将fn1中的this指向obj1，call()方法的第一个参数就是this指向的对象，后面的是调用的实参。  
![这里写图片描述][70 10]  
而apply()与call不同的则是第二个参数中，apply是一个数组。

fn1.call(obj1,100);//fn1的this指向obj1
    fn1.apply(obj1,[100]);

![这里写图片描述][70 11]  
我们还可以使用bind方法，永久改变this的指向。

let fn2 = fn1.bind(obj1);//fn2的this永远是obj1
    fn2(30);

![这里写图片描述][70 12]

## 函数的内部属性（调用时产生） ##

*  arguments, “类数组形式”的引用类型，表明传入的参数
 *  this,表示函数执行的“环境对象”
 *  arguments.callee,表示函数的“调用者”（注意：不同于this）  
    ![这里写图片描述][70 13]

![这里写图片描述][70 14]

## 递归 ##

*  arguments.callee,指向当前函数的指针，在递归场合下，可以实现“函数名称与实现的解藕”
 *  注意：“use strict”不能使用

![这里写图片描述][70 15]

![这里写图片描述][70 16]

## 函数的“静态”属性（编译期确定） ##

*  length,形参表长度
 *  prototype,原型“指针”
 *  apply&call,“反射”调用方法，可以调用时改变“this”
 *  bind,生成“反射”调用方法，使用时传入”this”  
    ![这里写图片描述][70 17]

## 闭包 ##

*  概念：能访问其它函数作用域的“函数”  
    ![这里写图片描述][70 18]

## 关于作用域链 ##

![这里写图片描述][70 19]

![这里写图片描述][70 20]

## 有趣的“闭包” ##

*  var compare=createComparisonFunction(“name”);
 *  compare指向的内部匿名函数，是一个可以访问其外部函数的函数！！！
 *  它可在外部函数返回时，仍然访问外部函数的作用域！！！
 *  这才是我们所关心的闭包！！
 *  compare=null,释放！

![这里写图片描述][70 21]

![这里写图片描述][70 22]

## 打造有状态的“对象” ##

![这里写图片描述][70 23]

## 闭包只保留外部函数的最一个值 ##

![这里写图片描述][70 24]  
![这里写图片描述][70 25]

## 块级作用域 ##

![这里写图片描述][70 26]

## 私有变量 ##

*  javascript没有私有成员概念  
    ![这里写图片描述][70 27]

[70]: /images/20220519/1e76e71b752545248d1ec04d3de99e6d.png
[70 1]: /images/20220519/6332f78263324a0b8f1ee5d4428639ea.png
[70 2]: /images/20220519/9049732c72484166bfd70cb5ba55f756.png
[70 3]: /images/20220519/f44ee039424e4b089378280fec34e05b.png
[70 4]: /images/20220519/41fab6ff972c422392fef851d7fe1711.png
[70 5]: /images/20220519/d37a2f50bf6d42099e4b94dab74d8a53.png
[70 6]: /images/20220519/22a94976971644cc82beb6a4237d51c0.png
[70 7]: /images/20220519/e09b2e0e5bc043c48d07d6515d50d872.png
[70 8]: /images/20220519/3519679eaaab4d189ba7ddc333b0afcf.png
[70 9]: /images/20220519/a348318273574fcba83c3587999730ae.png
[70 10]: /images/20220519/6be04a496a894126b7d1378441e36868.png
[70 11]: /images/20220519/d74d6821d1994c0b93120d07b12465de.png
[70 12]: /images/20220519/a7370cbd81fb4bb0b71fed78dd68aa46.png
[70 13]: /images/20220519/348ce8e54be64506a307bd52f9d416a3.png
[70 14]: /images/20220519/6d8b987426f34c7ba7c5608144e1e57e.png
[70 15]: /images/20220519/ea4c2fdc4ae642199f97c6b44105dcfd.png
[70 16]: /images/20220519/0f83c40226764a7182bfa073849e9fef.png
[70 17]: /images/20220519/47a556dd3ebe4160adfcd12b865e6675.png
[70 18]: /images/20220519/a679c8c89752448a8935ff311a39742b.png
[70 19]: /images/20220519/6a4673f48103412c84f69e5c9be29ca9.png
[70 20]: /images/20220519/0841817df75144d5b09c7048fb7e4be5.png
[70 21]: /images/20220519/f5d69435a92e4cf797a870fa7403dad5.png
[70 22]: /images/20220519/87ec5ec1898d4066875f302e296353cb.png
[70 23]: /images/20220519/31c5d0a36095498886e0bce551936428.png
[70 24]: /images/20220519/4aaa09f1b0bf42fcb2b689c3b74b314e.png
[70 25]: /images/20220519/2de27333535f4655a1d92b9b0e887dc3.png
[70 26]: /images/20220519/d3f2f6f376a74175b2ccd2f58ff445cc.png
[70 27]: /images/20220519/412aa2e18a014335a38810476af770d6.png