JS函数中的this的四种绑定方式

太过爱你忘了你带给我的痛 2023-02-08 12:50 19阅读 0赞

### 文章目录 ###

*   *  1. this的默认绑定window
     *  2. this的隐式绑定
     *  3. this的显示绑定（使用call 和 bind）
     *  4. new绑定
     *  5. 注意

## 1. this的默认绑定window ##

> 凡是函数作为独立函数调用，没有指定调用对象, 无论位置在哪里，**this**默认绑定**window**对象

示例如下：

function test(){
        
        console.log(this == window);
    }
    test(); // 打印true

function outFun(){
        
        function inFun(){
        
            console.log(this == window);
        }
        inFun();
    }
    outFun(); // 打印true

## 2. this的隐式绑定 ##

示例1：

var person = {
        
        age: 12,
        onTest: function(){
        
            console.log(this.age);
        }
    }
    person.onTest(); // 输出12

> 当函数被一个对象包含的时候，函数的this被隐式的绑定到这个对象, 这时可以通过this访问绑定对象的其他属性

示例2：

function onTest(){
        
        console.log(this.age);
    }
    var person1 = {
        
        age: 12,
        onTest: onTest
    }
    person1.onTest(); // 输出12
    onTest(); // 输出 undefined

> person1.onTest() 也可以取到age， 可以看出函数this的绑定并不会因为它被定义在j对象的内部和外部而有任何区别

示例3：

var person2 = {
        
        age: 12,
        onTest: function(){
        
            console.log(this.age);
        } 
    }
    function callTest(fn){
        
        fn()
    }
    callTest(person2.onTest); // 输出undefined

> 1.  函数this的隐式绑定是动态的
> 2.  由于函数的this与对象是动态绑定的， 在对象调佣函数之前函数的this和对象没有强制绑定，函数传递存在this绑定丢失问题

## 3. this的显示绑定（使用call 和 bind） ##

> 使用call() 方法，传递丢失的this绑定成功绑定到person3

var person3 = {
        
        age: 12,
        onTest: function(){
        
            console.log(this.age);
        } 
    }
    var fn = person3.onTest;
    fn(); // 输出undefined
    var onTest2 = fn.bind(person3);
    onTest2(); // 输出12

> 使用bind() 方法，得到一个this和对象绑定的方法

call和bind的区别是：在绑定this到对象参数的同时

> 1.call将立即执行该函数
> 
> 2.bind不执行函数，只返回一个可供执行的函数

## 4. new绑定 ##

function fun(a){
        
        this.name = a;
    }
    
    var obj1 = new fun('aa');
    var obj2 = new fun('bb');
    
    console.log(obj1.name);
    console.log(obj2.name);

> 执行new操作的时候，将创建一个新的对象，并且将构造函数的this指向所创建的新对象

## 5. 注意 ##

箭头函数：不使用这四个this规则，根据词法作用域来决定this。