JavaScript中this的四种调用模式

淩亂°似流年 2022-04-22 04:14 179阅读 0赞

this，即函数执行时的上下文环境，通常有四种调用模式：函数调用模式，方法调用模式，构造器调用模式，call/apply调用模式。

### 函数调用模式 ###

就是普通函数的调用方式，此时this被绑定到window对象。

*  最普通的函数调用

function fn1(){
        console.log(this);//window
    }
    fn1()

*  函数嵌套

function fn1(){
        function fn2(){
            console.log(this);//window
        }
        fn2()
    }
    fn1()

*  把函数赋值之后再调用

var a = 1;
    var obj1 = {
        a:2,
        fn:function(){
            console.log(this.a);
        }
    }
    var fn1 = obj1.fn;
    fn1();//1

obj1.fn是一个函数`function(){console.log(this.a)}`，此时fn1就是不带任何修饰的函数调用，`function(){console.log(this.a)}.call(undefined)`，按理说打印出来的 this 应该就是 undefined 了吧，但是浏览器里有一条规则：

> 如果你传的 context 就 null 或者 undefined，那么 window 对象就是默认的 context（严格模式下默认 context 是 undefined）

因此上面的this绑定的就是window，它也被称为隐性绑定。  
如果你希望打印出2，可以修改`fn1()`为`fn1.call(obj1)`，显示地绑定this为obj1

*  回调函数

var a = 1;
    function f1(fn){
        fn();
        console.log(a);//1
    }
    f1(f2);
    
    function f2(){
        var a = 2;
    }

改写代码如下：

var a = 1;
    function f1(){
        (function (){var a = 2})();
        console.log(a);//1
    }
    f1();

仍旧是最普通的函数调用，`f1.call(undefined)`，this指向window，打印出的是全局的a。  
借此，我们终于可以解释为什么setTimeout总是丢失this了，因为它也就是一个回调函数而已。

setTimeout(function() {
        console.log(this);//window
        function fn(){
            console.log(this);//window
        }
        fn();
    }, 0);

**总结:函数调用模式this指向window的全局对象**

### 方法调用模式 ###

当一个函数被保存为对象的一个方法时，如果调用表达式包含一个提取属性的动作，那么它就是被当做一个方法来调用，此时的this被绑定到这个对象。

var a = 1;
    var obj1 = {
       a:2,
       fn:function(){
          console.log(this.a);
       }
    }
    obj1.fn();//2

此时的this是指obj1这个对象，`obj1.fn()`实际上是`obj1.fn.call(obj1)`，**事实上谁调用这个函数，this就是谁**。补充一下，**DOM对象绑定事件也属于方法调用模式**，因此它绑定的this就是事件源DOM对象。如：

document.addEventListener('click', function(e){
        console.log(this);  //document
        setTimeout(function(){
            console.log(this); //window
        }, 200);
    }, false);

点击页面，依次输出：document和window对象  
解析：点击页面监听click事件属于方法调用，this指向事件源DOM对象，即`document.click.apply(document)`，setTimeout内的函数属于回调函数，可以这么理解，`function.call(null)`，所以this指向window。

**总结:方法调用模式this指向调用者**

### 构造器调用方式 ###

new一个函数时，实际上会创建一个连接到prototype成员的新对象，同时this会被绑定到那个新实例对象上。

function Person(name,age){
    // 这里的this都指向实例
        this.name = name;
        this.age = age;
        this.sayAge = function(){
            console.log(this.age);
        }
    }
    
    var dot = new Person('Dot',2);
    dot.sayAge();//2

**总结:构造函数调用模式this指向被构造的实例对象**

### call/apply调用模式 ###

对象借用不属于该对象的方法（函数），即我们自定义this的指向。  
语法：   
**1、函数.apply(对象, \[参数列表\])   
2、函数.call(对象, arg1,arg2,arg3…argn)**

**总结：this指向第一个参数**