第二课：函数进阶（二）：函数的this指向（2021/4/16）

Love The Way You Lie 2023-01-13 09:00 274阅读 0赞

> 通用：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]

> 二、改变this指向的方法

*  call()  
    //可调用方法，也可改变this指向  
    //主要作用可以去实现继承

//调用：
    var o ={
            name: 'John'
    }
    
    function test(a,b){
            console.log(this)
            console.log(a + b)
    }
    
    test.call(o,1,2);
    //{ name: 'John' }
    //3
    
    // 继承：
    function Father(a,b){
            this.a = a;
            this.b = b;
    }
    
    function Son(a,b){
            Father.call(this,a,b);
    }
    
    var son = new Son(1,2);
    
    console.log(son)

*  apply()  
    apply()方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的this指  
    fun.apply (thisArg,\[argsArray\])  
    thisArg :在fun函数运行时指定的this值  
    argsArray :传递的值，必须包含在数组里面  
    返回值就是函数的返回值，因为它就是调用函数

var o = {
            name:'andy'
    };
    
    function fn(){
            console.log(this);
    }
    
    fn.apply(o);

*  1.也是调用函数 第二个可以改变函数内部的this指向  
    2.但是他的参数必须是数组(伪数组)  
    3.apply的主要应用 比如说我们可以利用 apply 借助于数学内置对象求最大值

// Math.max();
    var arr = [1,33,24,12,54];
    var max = Math.max.apply(Math,arr);//将会把arr数组的所有数字当成参数赋予max来求得最大值
    var min = Math.min.apply(Math,arr);
    console.log(max,min);

*  bind()  
    **bind()方法不会调用函数**。但是能改变函数内部this指向  
    fun.bind (thisArg, argl, arg2, …)  
    thisArg :在fun函数运行时指定的this值  
    arg1, arg2:传递的其他参数  
    返回由指定的this值和初始化参数改造的**原函数拷贝**

var o = {
            name:'andy'
    };
    
    function fn(){
            console.log(this);
    }
    
    var f = fn.bind(o); //返回一个函数的拷贝
    
    f();
    // 1.不会调用原来的函数 可以改变函数内部的this指向
    // 2.返回的是原函数改变this之后产生的函数

<body>
            <button>点击</button>
            <script>
                    var btn = document.querySelector('button');
                    btn.onclick = function(){
                            /* ======================== */
                            this.disabled = true; //这个this指向的 是btn这个按钮
                            setTimeout(function(){
                                    //无法更改btn的状态:
                                    this.disabled = false; //定时器函数里面的this指向的是window 
                            },3000);
                            
                            /* ======================== */
                            // // 一、以前的写法：
                            this.disabled = true; //这个this指向的 是btn这个按钮
                            var that = this; 
                            setTimeout(function(){
                                    that.disabled = false; 
                            },3000);
                            
                            /* ======================== */
                            // 二、第二种bind的写法（不需要声明变量，开辟空间）：
                            // 定时器函数绑定bind的方法：
                            this.disabled = true; //这个this指向的 是btn这个按钮
                            setTimeout(function(){
                                    this.disabled = false; 
                            }.bind(this),3000);
                    }
                    
            </script>
    </body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]: /images/20221022/fd8b95cadc524284aa3a78d3b09be462.png