Javascript 基础篇二：javascript 的this理解

我不是女神ヾ 2022-02-21 10:05 225阅读 0赞

在理解javascript的this之前，首先先了解一下作用域。

作用域分为两种：

**1、词法作用域：引擎在当前作用域或者嵌套的子作用域查找具有名称标识符的变量。***（引擎如何查找和在哪查找。定义过程发生在代码书写阶段）*  
**2、动态作用域：在运行时被动态确定的作用域。**

词法作用域和动态作用域的区别是：词法作用域是在写代码或定义时确定的；动态作用域是在运行时确定的。

# this的绑定规则 #

this是在调用时被绑定，取决于函数的调用位置。由此可以知道，一般情况下（非严格模式下），this都会根据函数调用（调用栈）的上下文来绑定对象。

#### 一、默认绑定 ####

1.  默认绑定：**默认绑定是指在非严格模式下，且没有使用别的绑定规则时，this根据函数调用（调用栈）的上下文来绑定对象（全局对象）。（严格模式下则绑定undefined）**
    
    举个栗子：
    
        function foo() { 
            console.log(this.a);
        };
        function bar() { 
            var a = 3;
            foo();
        }
        var a = 2;
        bar();  //由于没有找到调用 fn 的对象，所以this绑定全局对象
        
        运行结果为： 2
        //加上"use strict"运行结果则会变成this is undefined
    
    这里的函数调用时，使用了默认绑定，函数调用（调用栈）的上下文是全局作用域，因此this绑定了全局对象（global）。
    
        eg2:
        function foo() { 
            console.log(this.a)
        };
        var a = 2;
        (function() { 
            "use strict"
            foo();
        })();
        
        运行结果为： 2
    
    这里需要注意：**对于默认绑定，决定this绑定对象的不是调用位置是否处于严格模式，而是函数体是否处于严格模式** **（函数体处于严格模式则this绑定undefined；否则this绑定全局对象）** 。另外：严格模式和非严格模式虽然有可能可以绑定，但是最好不混用。
    
        //eg:
        class B { 
        	fn() { 
        		console.log(this)
        	}
        }
        var b = new B()
        var fun = b.fn
        fun(); //undefined
    
    此处，class 内部默认采用的就是严格模式，因此函数体就是处于严格模式。故绑定并非 window，而是 undefined
2.  **间接引用一般也是会应用默认绑定规则。**
    
        eg:
        function foo() { 
            console.log(this.a);
        };
        var a = 2;
        var o = {  a: 3, foo: foo };
        var p = {  a: 4 };
        o.foo();   //3
        (p.foo = o.foo)();  //2
    
    赋值表达式 p.foo = o.foo的返回值是直接引用目标函数foo。
    
        function fn() { console.log(this)};
        function fn2() { fn()};
        var obj = { fn2};
        obj.fn2();	//window
    
    虽然 fn2 作为 obj 的属性调用，但 fn2中的 this指向并不会传递给函数 fn()，fn 还是相当于没有找到调用的对象，故 this 指向 window；
3.  **需要传入 this 指向的几种函数**  
    **forEach()、every()、find()、findIndex()、map()、some()**  
    第一个参数是回调函数，第二个参数是 this 指向的对象；
    
    第二个参数不传，默认为 undefined，this 指向全局对象；
    
        var dx = { 
        	arr: [1]
        }
        dx.arr.forEach(function() { 
        	console.log(this); //window; nodejs: global
        })
    
    若是将 this 指向基础类型数据，那么基础类型数据将会转换成引用对象；
    
        [0].forEach(function(){ console.log(this)}, 0);
        // Number 类型对象

#### 二、隐式绑定 ####

隐式绑定：**由上下文对象调用，绑定到上下文对象。**

举个栗子：

function foo() { 
        console.log(this.a);
    };
    var obj = { 
        a: 2,
        foo: foo
    };
    obj.foo();    //2
    foo();        //undefined

这段代码中，foo()被当做引用属性添加到obj对象中，obj调用这个引用属性函数时，会使用该引用属性上下文，this会被绑定到obj对象。（这个函数严格来说不属于obj对象，只是作为引用属性）。属于隐式绑定。

而下面foo()函数的直接执行，并不是obj对象引用，所以上下文对象是全局对象。故this绑定了undefined。属于默认绑定。

**对象引用链中只有上一层或者说最后一层在调用位置中起作用。**

##### 注意： #####

1.  **隐式绑定的函数会丢失绑定对象。** 此时它会应用默认绑定，将this绑定到全局对象或者undefined上，取决于是否是严格模式。  
    eg:
    
        function foo() { 
            console.log(this.a);
        };
        var obj = { 
            a: 2;
            foo: foo
        }
        var bar = obj.foo;
        var a = 'biubiubiu';
        bar();
        
        运行结果："biubiubiu"
    
    解析：看似bar是obj.foo的一个引用，实际上bar是直接引用了函数foo，是一个单纯的函数调用，故实为默认绑定。
2.  **参数传递就是隐式赋值，因此传入函数时也会被隐式赋值。**  
    eg:
    
        function foo() { 
            console.log(this.a);
        };
        var obj = { 
            a: 2,
            foo: foo
        };
        function bar(fn) { 
            fn();
        };
        var a = "biubiubiu";
        bar(obj.foo);
        
        运行结果: "biubiubiu"
    
    解析：实际上参数也是隐式赋值，但是参数传入函数中，并在函数中执行。此时也是直接引用了函数foo，因此也是单纯的函数调用，采用了默认绑定。
3.  **把函数传入语言内置函数。** *（与上面情况基本相似，将自己声明函数改成语言内置函数）* 回调函数丢失this的情况比较常见，况且还有调用回调函数的函数可能还会修改this。

#### 三、显式绑定 ####

显式绑定：**直接将this绑定到指定对象上。** Javascript中绝大多数函数和自己所创建的函数都可以使用这两种显式绑定的方法。

1、.call()  
2、.apply()  
这两种绑定方法，**第一个参数是this绑定的对象。***（如果传入的参数是原始值（字符串类型、布尔类型、数字类型），这个原始值就会被转成对象形式（new String、new Boolean、new Number）这个称为：装箱）*

举个栗子：

function foo() { 
        console.log(this.a);
    };
    var obj = { 
        a: 2
    };
    foo.call(obj);
    
    运行结果： 2

然鹅，显示绑定并不能解决绑定丢失的问题。这个时候来了一位新朋友 – 硬绑定（bind）。

3、.bind() *（硬绑定是常见场景，故es5提供了该内置方法 Function.prototype.bind。）*  
**bind()会返回一个新编码函数，把this绑定在指定参数上，并调用函数。**

举个栗子：

function foo(e) { 
        console.log(this.a + e);
        return this.a + e;
    };
    var obj = { 
        a: 2
    }
    var bar = foo.bind(obj); //新编码函数
    var b = bar(3); // 2 3
    console.log(b); // 5

**bind()还有一个功能**：**将除了第一个用于绑定this的参数之外的其他参数传给下层的函数**（**部分应用**，是“**柯里化**”的一种）。

这里涉及到一个概念：**把null或者undefined作为this的绑定对象传入call、apply、bind，这些值在调用的时候会被忽略，实际应用默认绑定规则。**  
应用场景：  
1、使用apply()展开一个数组，并作为参数传递给一个函数。  
2、bind()对参数进行柯里化（预先设置一些参数）。  
柯里化：把多参数函数转换为一系列单参数函数并进行调用的技术。

举个栗子：

function foo(a,b) { 
        console.log("a:" + a + ",b:" + b);
    };
    //数组“展开”成参数
    foo.apply(null,[2,3]);  //a:2,b:3
    //bind()柯里化
    var bar = foo.bind(null,2);
    bar(3);  //a:2,b:3

解析：传入一个参数作为this绑定对象，如果不传则使用占位符（null），此时会使用默认绑定规则。

上面这个例子可能会产生一定的副作用，如果需要运用这种场景并且更加安全。可以创建一个空对象（可以用任意喜欢的名字来命名）。

var ∅ = Object.create(null);
    //上面这个例子就可以改写为：
    foo.apply(∅,[2,3]); //a:2,b:3
    var bar = foo.bind(∅,2);
    bar(3);  //a:2,b:3

注意：硬绑定之后不能使用隐式绑定和显式绑定对this进行修改  
在这里介绍一种**软绑定**的方法**softBind()**，**检查this绑定到全局对象或者undefined后，绑定this到指定的默认对象**。绑定后效果和硬绑定一样，但是保留隐式绑定或者显式绑定修改this的能力。

#### 四、new绑定 ####

Javascript中的new机制与面向类语言的完全不同。**在Javascript中，构造函数只是一些使用new操作符时被调用的函数**，不属于一个类，也不会实例化一个类。称为对函数的“构造调用”。

举个栗子：

function foo(a) { 
        this.a = a;
    }
    var bar = new foo(2);
    console.log(bar.a); //2

使用new的过程会**创建一个全新的对象，this会绑定这个新对象**。如果函数**没有返回其他对象，则new表达式函数调用会返回该新对象**。（这个新对象会连接prototype）

#### 四种绑定规则的优先级为：**new>显式>隐式>默认** ####

## 箭头函数 ##

箭头函数是根据外层作用域（函数或全局）来决定this。（词法作用域取代this机制）  
箭头函数this会绑定调用时的对象，且箭头函数的绑定无法修改（new也不行）。

其实可以理解为，箭头函数的this在词法上继承的是它所在的作用域（函数或全局）的this，而它继承的函数作用域的this绑定的是在该函数调用上下文对象，所以箭头函数的this间接的绑定在调用上下文对象。

简述： 箭头函数this（绑定作用域this）-- 作用域this（绑定在调用上下文对象）。

故：箭头函数this == 调用的上下文对象

举个栗子：

其实这个栗子也等价于：

function foo() {
        var that = this;  //lexical capture of this
        setTimeout(function() {
            console.log(that.a)
        },100);
    }
    ...与上面一样

所以，有两种风格：**this风格（四种规则）** 和 **词法作用域风格（that = this和箭头函数）** 可供使用。使用时尽量避免混用，否则会造成难以维护的后果。

注意：箭头函数的 this 继承自上层的 this，但在全局环境下定义仍会指向全局对象

var arrow = { 
    	fn:() => { 
    		console.log(this);
    	}
    }
    arrow.fn();	//window; nodejs: global

虽然通过对象 arrow 来调用箭头函数 fn，但是上层仍然是全局对象，需要指向 arrow 还需要改进，在外层包裹一个 this 指向 arrow 的函数，这样就会继承外层 this 指向

var arrow = { 
    	fn() { 
    		const a = () => { 
    			console.log(this);
    		}
    		a()
    	}
    }
    arrow.fn();	//window; nodejs: global

箭头函数和普通函数相比，有以下几个区别，在开发中应特别注意：

*  不绑定 arguments 对象，也就是说在箭头函数内访问 arguments 对象会报错；
 *  不能用作构造器，也就是说不能通过关键字 new 来创建实例；
 *  默认不会创建 prototype 原型属性；
 *  不能用作 Generator() 函数，不能使用 yeild 关键字。