js高级-函数：call + bind + apply方法

￡神魔★判官ぃ 2022-12-04 07:37 206阅读 0赞

# 第五章：函数进阶 #

## 第一节：函数的定义方式 ##

### 方式一： new Function ###

> 特点：
> 
>  *  代码要写在字符串里面
>  *  执行速度较慢，不推荐使用

var fn = new Function('var name = "张三";console.log(name)'); // fn既是对象也是函数
    fn();
    
    // **************************
    
    var fn = new Function('a', 'b', 'console.log(a + b)'); // 3
    fn(1, 2);

### 方式二：函数声明 ###

> 特点：代码执行速度较快

function fn() { 
        console.log('test1');
    }
    fn();

### 方式三：函数表达式 ###

var fn1= function () { 
        console.log('test2');
    }
    fn1()

#### 函数声明与函数表达式的区别 ####

*  函数声明必须有名字
 *  `函数声明会函数提升`，在预解析阶段就已创建，`声明前后都可以调用`
 *  函数表达式类似于变量赋值
 *  函数表达式可以没有名字，例如匿名函数
 *  `函数表达式没有变量提升`，在执行阶段创建，`必须在表达式执行之后才可以调用`

`根据条件定义函数`的例子：

> 现代浏览器 不会提升if语句中的函数声明

if (true) { 
        function fn() { 
            console.log('fn - true');
        }
    } else { 
        function fn() { 
            console.log('fn - false');
        }
    }
    fn(); // fn - true

在`老的IE版本`中，if语句中的函数声明也会提升。

不过我们可以使用函数表达式解决上面的问题：

var fn;
    if (true) { 
        fn = function() { 
            console.log('fn - true');
        }
    } else { 
        fn = function() { 
            console.log('fn - false');
        }
    }
    fn(); // fn - true

## 第二节：函数的调用方式 ##

### 函数内 `this` 指向的不同场景 ###

函数的调用方式决定了 `this` 指向的不同：

<table> 
 <thead> 
  <tr> 
   <th>调用方式</th> 
   <th>非严格模式</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>普通函数调用</td> 
   <td>window</td> 
   <td>严格模式下是 undefined</td> 
  </tr> 
  <tr> 
   <td>构造函数调用</td> 
   <td>实例对象</td> 
   <td>原型方法中 this 也是实例对象</td> 
  </tr> 
  <tr> 
   <td>对象方法调用</td> 
   <td>该方法所属对象</td> 
   <td>紧挨着的对象</td> 
  </tr> 
  <tr> 
   <td>事件绑定方法</td> 
   <td>绑定事件对象</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>定时器函数</td> 
   <td>window</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

这就是对函数内部 this 指向的基本整理，写代码写多了自然而然就熟悉了。

### 函数也是对象 ###

> 所有函数都是 `Function` 的实例
> 
> fn是Function的实例对象：`var fn = new Function();`

// 证明fn是Function的实例(对象)
    function fn() { };
    console.log(fn.__proto__ === Function.prototype); // true

## 第三节：call apply bind 改变函数中的this ##

### call方法 ###

> 1.  调用函数，改变函数中的this
> 2.  第一个参数 设置函数内部this的指向；其它参数，对应函数的参数
> 3.  函数的返回值 call的返回值就是函数的返回值

#### call方法的应用：扩展内置对象 ####

// getElementsByTagName() 结果是伪数组(数组也是对象，数字也是可以作为属性)
    
    var obj = { 
        0: 100,
        1: 10,
        2: 11,
        3: 20,
        length: 4
    };
    
    obj['4'] = 30; // 增加一个属性
    obj.length++;
    
    console.dir(obj);
    
    // 数组的push方法 
    
    var obj = { 
        0: 100,
        1: 10,
        2: 11,
        3: 20,
        length: 4
    };
    
    Array.prototype.push.call(obj, 30); // 增加一个属性 (arr.push,此时this指arr对象)
    console.dir(obj);
    
    // 删除数组中的前三项
    var obj = { 
        0: 100,
        1: 10,
        2: 11,
        3: 20,
        length: 4
    };
    
    Array.prototype.splice.call(obj, 0, 3); // splice(从第几个删除，删除几个)
    console.dir(obj);
    
    // toString()方法，将对象转化为字符串
    
    var obj = { 
        0: 100,
        1: 10,
        2: 11,
        3: 20,
        length: 4
    };
    
    var obj = { 
        name: 'zs'
    };
    
    console.log(obj.toString()); // [object Object] = > 第一个object 代表一个对象 ；第二个Object 代表对象的类型
    
    // 数组的 toString()方法 ; 通过逗号输出数组中的每一项
    
    var arr = [5, 9];
    console.log(arr.toString()); // 5,9
    
    
    // toString()方法 ，可以找到数组对象的类型
    
    var arr = [5, 9];
    console.log(Object.prototype.toString.call(arr)); // [object Array] object 代表一个对象 ； Array代表数组中的一个类型

### apply方法 ###

> apply 只有两个参数
> 
> 1.  调用函数，改变函数中的this
> 2.  第一个参数 设置函数内部this的指向
>     
>     第二个参数 是数组(fn中有几个参数，数组就有几项)
> 3.  函数的返回值 apply的返回值就是函数的返回值

#### apply方法的应用：求数组中的最大值 ####

> apply作用：1.调用这个函数 2.改变this指向
> 
> apply特点：apply的第二个参数是一个数组，可以把数组中的每一项展开传递给函数
> 
> fn.apply(,\[\])

Math.max(3, 5, 6);
    console.log(Math.max(3, 5, 6)); //结果是 6
    
    *******************************************
    
    // Math.max不能求数组中的最大值
    
    var arr = [5, 10, 1, 3, 6];
    console.log(Math.max(arr)); // NaN
    
    ********************************************
    
    var arr = [5, 10, 1, 3, 6];
    console.log(Math.max.apply(null, arr)); // 10 （若不需要改变this指向，第一个参数传递null）
    console.log(Math.max.apply(Math, arr)); // 10 （因为max中的this指向Math,所以第一个参数也可以传递Math）
    
    console.log(1, 2, 3); // 1 2 3
    console.log(arr); // [5, 10, 1, 3, 6]
    
    *********************************************
    
    // apply特点：apply的第二个参数是一个数组，可以把数组中的每一项展开传递给 console.log
    // 传apply的第一个参数：可以改变log方法中的this指向；
    // 但我们不需要改变它的this ；所以我们传console（默认log方法中的this是console）
    
    var arr = [5, 10, 1, 3, 6];
    console.log.apply(console, arr); // 5 10 1 3 6

### bind方法 ###

> 1.  改变函数中的this，不会调用函数，而是把函数复制一份
> 2.  第一个参数 设置函数内部this的指向； 其它参数，对应函数的参数
> 3.  函数的返回值 bind的返回值就是函数的返回值

#### bind方法的应用：定时器 或者 事件绑定 ####

> 1.  可以用来指定内部 this 的指向
> 2.  然后生成一个改变了 this 指向的新的函数 但是 bind 不会调用

// 应用1：定时器
    var obj = { 
        name: 'zs',
        fun: function () { 
    
            setInterval(function () { 
                console.log(this.name); // 打印结果：zs
            }.bind(this), 1000); // 此时this指向fun函数的调用者obj
    
        }
    }
    obj.fun();
    
    // 应用2：事件绑定：事件处理函数中的this：指向触发该事件的对象
    // 通过bind 改变事件处理函数中this的指向
    
    btn.onclick = function() { 
    
    }.bind(obj);

示例1：

this.x = 9; 
    var module = { 
      x: 81,
      getX: function() {  return this.x; }
    };
    
    module.getX(); // 返回 81
    
    var retrieveX = module.getX;
    retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域
    
    // 创建一个新函数，将"this"绑定到module对象
    // 新手可能会被全局的x变量和module里的属性x所迷惑
    var boundGetX = retrieveX.bind(module);
    boundGetX(); // 返回 81

示例2：

### 小结 ###

*  call 和 apply 特性一样
    
     *  都是用来调用函数，而且是立即调用
     *  但是可以在调用函数的同时，通过第一个参数指定函数内部 `this` 的指向
     *  call 调用的时候，参数必须以参数列表的形式进行传递，也就是以逗号分隔的方式依次传递即可
     *  apply 调用的时候，参数必须是一个数组，然后在执行的时候，会将数组内部的元素一个一个拿出来，与形参一一对应进行传递
     *  如果第一个参数指定了 `null` 或者 `undefined` 则内部 this 指向 window
 *  bind
    
     *  可以用来指定内部 this 的指向，然后生成一个改变了 this 指向的新的函数
     *  它和 call、apply 最大的区别是：bind 不会调用
     *  bind 支持传递参数，它的传参方式比较特殊，一共有两个位置可以传递
        
         *  1.  在 bind 的同时，以参数列表的形式进行传递
         *  1.  在调用的时候，以参数列表的形式进行传递
         *  那到底以谁 bind 的时候传递的参数为准呢还是以调用的时候传递的参数为准
         *  两者合并：bind 的时候传递的参数和调用的时候传递的参数会合并到一起，传递到函数内部

## 第四节：函数的其它成员 ##

function fn(x, y) { 
    
        // 函数内部有一个 私有的变量 arguments
        console.log(arguments)
    
        // 伪数组 获取函数的实参
        console.log(fn.arguments)
        // 函数的调用者，在全局范围调用的时候caller 是 null
        console.log(fn.caller)
        // 函数的名称 字符串类型
        console.log(fn.name)
        // 函数的形参个数
        console.log(fn.length)
    }
    
    function test() { 
        fn(1, 3, 6)
    }
    test();

> arguments的作用：获取实际传过来的参数
> 
> 当函数的参数个数不固定的时候，适用arguments
> 
> 我们不需要传形参，原因如下：
> 
> 在函数内部，可以通过arguments获取到实际传过来的参数(核心)

## 第四节：高阶函数 ##

*  函数可以作为参数
 *  函数可以作为返回值

### 函数作为参数 ###

function eat (callback) { 
      setTimeout(function () { 
        console.log('吃完了')
        callback()
      }, 1000)
    }
    
    eat(function () { 
      console.log('去唱歌')
    })

### sort排序 ###

// 模拟sort排序的内部实现
    
    var arr = [35, 1, 6, 20];
    arr.sort(function(a, b) { 
        // return a - b; // 从小到大排序
        return b - a; // 从大到小排序
    });
    console.log(arr); // [1, 6, 20, 35] 或者 [35, 20, 6, 1]

> 我们希望数组里面，有一个自己定义的方法， arr.mySort()

Array.prototype.mySort = function(fn) { 
        // 冒泡排序原理： this此时指代arr数组对象
        for (var i = 0; i < this.length - 1; i++) { 
    
            var isSort = true; // 假设排好序
            for (var j = 0; j < this.length - i - 1; j++) { 
                if (fn(this[j], this[j + 1]) > 0) { 
                    isSort = false; // 如果 this[j] - this[j + 1] > 0 ; 说明没排好序
                    var tmp = this[j];
                    this[j] = this[j + 1];
                    this[j + 1] = tmp;
                }
            }
            if (isSort) { 
                break; // 排好序->跳出外层循环
            }
        }
    }
    
    var arr = [35, 1, 6, 20];
    arr.mySort(function(a, b) { 
        // return b - a; // 从大到小排序，[35, 20, 6, 1]
        return a - b; // 从小到大排序，[1, 6, 20, 35]
    })
    console.log(arr); // [35, 20, 6, 1] 或者 [1, 6, 20, 35]
    
    // 在arr.mySort位置打断点，进行调试

### 函数作为返回值 ###

> 写一个函数，生成1-10之间的随机整数

> 求两个数的和
> 
> 100 + m ；当第一个参数100时，
> 
> 1000 + m ；当第一个参数1000时，
> 
> 10000 + m ；当第一个参数10000时，
> 
> 函数中传入的n指的是前面固定的100/1000/

function getFun(n) { 
        return function(m) { 
            return n + m;
        }
    }
    
    // 求 100 + m
    var fn100 = getFun(100);
    // 求 1000 + m
    var fn1000 = getFun(1000);
    
    console.log(fn100(1)); // 101
    console.log(fn1000(1)); // 1001