web前端高级JavaScript - JavaScript中函数内的this指向

布满荆棘的人生 2022-12-05 04:57 197阅读 0赞

### 函数内的this指向 ###

下表中列出的这些this的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this的指向不同，一般情况下会指向函数的调用者（谁调用指向谁）。

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th style="width:140px;">调用方式</th> 
   <th style="width:359px;">this指向</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:140px;">普通函数调用</td> 
   <td style="width:359px;">window</td> 
  </tr> 
  <tr> 
   <td style="width:140px;">构造函数调用</td> 
   <td style="width:359px;">实例对象，原型对象里的方法也指向实例对象</td> 
  </tr> 
  <tr> 
   <td style="width:140px;">对象方法调用</td> 
   <td style="width:359px;">该方法所属对象</td> 
  </tr> 
  <tr> 
   <td style="width:140px;">事件绑定方法</td> 
   <td style="width:359px;">绑定事件对象，如button</td> 
  </tr> 
  <tr> 
   <td style="width:140px;">定时器函数</td> 
   <td style="width:359px;">window</td> 
  </tr> 
  <tr> 
   <td style="width:140px;">立即执行函数</td> 
   <td style="width:359px;">window</td> 
  </tr> 
 </tbody> 
</table>

下面我们用代码来一一进行验证：

*  普通函数

//函数的不同调用方式决定了this的指向不同
    1. 普通函数 this指向window
    function fn(){
        console.log('普通函数的this->' + this);
    }
    
    //这里我们调用函数fn(),实际上是window.fn()，只不过是window可以省略，所以this会指向window
    fn();//普通函数的this->Window

*  构造函数

2. 构造函数调用 this指向Star的实例对象，原型对象里的this也是指向Star实例对象
    function Star(){
        console.log('构造函数this指向->'+ this);
    }
    
    var ldh = new Star();//构造函数this指向->Star

*  对象方法

3. 对象方法调用 this指向对象obj本身
    var obj = {
        sayHi:function(){
            console.log('对象方法this指向->'+this);
        }
    }
    
    obj.sayHi(); //对象方法this指向->Object

*  事件绑定方法

4. 绑定事件函数 this指向的是函数的调用者即btn这个按钮的对象
    var btn = document.querySelector('button');
    btn.onclick = function(){
        console.log("绑定事件函数this指向->"this);
    }
    
    //当点击按钮时会输出：
    //绑定事件函数this指向->button

*  定时器函数

5. 定时器函数this指向的是window 实际上setTimeout也是由window调用的即window.setTimeout...
    setTimeout(function(){
        console.log('定时器函数this指向->'+this);
    },500);
    
    //500毫秒后输出：
    //定时器函数this指向->Window

*  立即执行函数

6. 立即执行函数this指向依然是window 立即执行函数虽然是立即执行的，但实际上也是由window调用的
    
    (function(){
        console.log('立即执行函数this指向->'+this);
    })()
    
    //立即执行函数this指向->Window

### 判断this指向的规律： ###

1.  事件绑定 ：给当前元素的某个事件行为绑定方法，当事件触发方法执行，方法中的this就是当前元素本身
2.  普通函数执行：
    
    1.  函数执行前面是否有“点”，如果没有，则this就是window（或者严格模式下的undefined）
    2.  有“点”，则“点”的前面是谁，this就是谁
    3.  匿名函数/自执行函数/回调函数如果没有经过特殊处理，则this一般都是window/undefined。
3.   特殊处理 - 括号表达式：小括号中包含“多项”（如果只有一项，跟不加括号没有区别），其结果是取小括号中的最后一项；但这样处理后，this指向会发生变化，变为window/undefined（详见下面示例）
4.  特殊处理：数组的forEach（详见下面示例）

*  特殊处理 - 括号表达式

let obj = {
        sum(){
            console.log(this);
        }
    }
    
    obj.sum();//this->obj
    
    (10, obj.sum)();//this->window

*  特殊处理：数组的forEach

let obj = {
        name:'xxx'
    }
    
    let arr = [10, 20];
    
    arr.forEach(function(item, index){
        console.log(this);// this->obj
    //这是因为触发回调函数执行的时候，forEach内部会把回调函数中的this改变为传递的第二个参数值
    }, obj);

### 改变函数内部的this指向 ###

通过上面的案例我们知道一般情况下，函数内的this指向是谁调用指向谁，但也不是一成不变的。JavaScript专门为我们提供了一些函数方法来帮我们更优雅的处理函数内部的this指向问题，常用的有bind()、call()和apply()三种方法

*  **call()方法**

call()方法可以调用一个对象。可以简单理解为调用函数的方式，但是它可以改变函数的this指向。语法如下：

fun.call(thisArg,arg1,arg2,...);//参数可以是任意多个

*  thisArg: 在fun函数运行时指定的this值
 *  arg1：参数
 *  arg2: 参数
 *  ... 
 *  返回值就是函数的返回值，因为它可以改变this指向同时也会调用函数

接下来我们用代码来演示一下如何用call来改变this指向：

//1. 首先声明一个全局属性name
    var name = '我是window的name属性'
    
    //2. 定义一个对象，对象中同样定义一个name属性
    var o = {
        name: '我是对象o的name属性'
    } 
    
    //3. 定义一个普通函数fn并打印输出this.name的值
    function fn(){
        console.log(this.name);
    }
    
    //4. 普通调用
    fn(); //我是window的name属性
    
    //5. 使用call()方法调用，并改变this指向
    fn.call(o);//如果fn需要参数，call方法中也可以传入对应的参数
    // 我是对象o的name属性

通过上面的代码，不难发现当我们把fn当做普通函数来调用时打印输出的是：“我是window的name属性”，因为this指向的是window。而当我们用call方法来调用时发现输出了“我是对象o的name属性”，this指向已经变成了对象o。

call()方法的作用：

*  调用函数
 *  改变函数内部的this指向
 *  用于继承

call()方法继承的示例：

function Father(name, age){
        console.log(this.name)  
    }
    
    function Son(name){
        //调用父类的构造函数并改变this指向为子类的this
        Father.call(this, name);
    }

*  **apply()方法**

apply()方法调用一个函数，简单理解为调用函数的方式，但它可以改变函数内部的this指向

fun.apply(thisArg,[argsArray]);

*   thisArg：在fun函数运行时指定的this值
 *  arrsArray：传递的参数，必须包含在数组里
 *  返回值就是函数的返回值，因为它可以改变this指向同时也会调用函数

代码示例：

//1. 首先声明一个全局属性name
    var name = '我是window的name属性'
    
    //2. 定义一个对象，对象中同样定义一个name属性
    var o = {
        name: '我是对象o的name属性'
    } 
    
    //3. 定义一个普通函数fn并打印输出this.name的值
    function fn(){
        console.log(this.name);
    }
    
    //4. 普通调用
    fn(); //我是window的name属性
    
    //5. 使用call()方法调用，并改变this指向
    fn.apply(o);//如果fn需要参数，apply方法中也可以传入对应的参数，但是必须是以数组（伪数组）的形式传递
    // 我是对象o的name属性

通过上面的代码，可以看出apply和call的使用和作用基本上是一样的，唯一的不同就是传递参数的方式不一样：**call是分开传递而apply是以数组的形式传递**

apply()方法的作用：

*  调用函数
 *  改变函数内部的this指向
 *  可以操作数组，比如利用apply借助数学内置对象求最大值或最小值

apply()方法求数组最大值示例：

var nums = [1,3,5,67,8,909,0];
    //这里不需要改变this指向，所以将this重新指向Math
    var max = Math.max.apply(Math, nums);
    console.log(max);//909

*  **bind()方法**

bind()方法不会调用函数，但是能改变函数内部this指向

fun.bind(thisArg, arg1, arg2, ...);

*  thisArg：在fun函数运行时指定的this值
 *  arg1，arg2：传递的其它参数
 *  返回由指定的this值和初始化参数改造的原函数拷贝

bind方法代码示例：

//1. 首先声明一个全局属性name
    var name = '我是window的name属性'
    
    //2. 定义一个对象，对象中同样定义一个name属性
    var o = {
        name: '我是对象o的name属性'
    } 
    
    //3. 定义一个普通函数fn并打印输出this.name的值
    function fn(){
        console.log(this.name);
    }
    
    //4. 普通调用
    fn(); //我是window的name属性
    
    //5. 使用bind()方法绑定后单独调用，并改变this指向
    var f = fn.bind(o);
    f();
    // 我是对象o的name属性

在上面代码中，通过bind方法同样实现了改变函数内部this指向，但不同的是bind()方法并不会调用函数而是返回原函数的拷贝，所以bind后我们还需要手动调用。

bind()方法的作用：

*  改变函数内部this指向

bind()方法的应用场景：不需要立即调用函数，但是又想改变函数内部的this指向。比如页面上有3个按钮，现在想点击每个按钮后禁用掉按钮，然后在3秒后再自动启用。代码如下：

<button>我</button>
    <button>我</button>
    <button>我</button>
    
    <script>
        var btns = document.querySelectorAll('button');
        for(var i = 0; i < btns.length; i++){
            btns[i].onclick = function(){
                this.disabled = true;
                setTimeout(function(){
                    this.disabled = false;
                }.bind(this), 3000);
            }
        } 
    </script>

上面代码中如果我们不去用bind方法改变this指向，那么按钮禁用后将不会再启用，因为上面说过定时函数内部的this指向的是window。这里之所以不用call和apply是因为这两个方法在改变this指向的同时也会调用函数，这样就达不到3秒后再启用的效果了。

### call()、apply()和bind()总结 ###

**相同点：**

都可以改变函数内部的this指向

**不同点：**

*  call和apply会调用函数，并且改变函数内部的this指向
 *  call和apply传递参数的方式不一样，call是每个参数分开传递，apply则是必须以数组的形式传递参数
 *  bind方法不会调用函数，但可以改变函数内部this指向

**应用场景：**

*  call用来做继承
 *  apply经常更跟数组有关系，比如借助数学对象实现数组最大值最小值
 *  bind用于不需要立即调用函数并且还需要改变函数内部this指向。比如改变定时器内部this指向。

### this指向总结 ###

上面我们所说this指向都是在非严格模式的基础上，那么如果JavaScript开启了严格模式，this指向则会发生些许的变化：

*  非严格模式：全局作用域函数中的this指向的是window对象
 *  严格模式：全局作用域函数中的this指向的是undefined
 *  非严格模式：不加new也可以调用构造函数，当普通函数调用，this指向全局对象window
 *  严格模式：如果构造函数不加new调用，this会报错
 *  new实例化的构造函数内的this指向创建的对象的实例
 *  定时器、自调用函数内的this还是指向window
 *  事件，对象还是指向调用者