lambda 表达式中的 this 与普通情况下的 this 指向

柔光的暖阳◎ 2021-09-25 10:32 179阅读 0赞

### lambda 表达式中的 this 与普通情况下的 this 指向 ###

*  Java
 *  JavaScript
 *   *  总结与提醒

很多编程语言都支持 lambda 表达式，不过对于不同编程语言，其 lambda 表达式中 this 指向差异很大，有些甚至相反。下面举例如下。

# Java #

对于 Java 语言，很普通情况下的 this 很好理解，这里不在详述。值得一提的是 Java 中的内部类。

Java 的内部类有：成员内部类、局部内部类、匿名内部类、静态内部类。这里只讲述匿名内部类，因为其它的内部类中的 this 指向都不易混淆，所以从略。

*  对于 Java 中的匿名内部类，编译器会自动生成它的类名，而自动生成的类名为`外部类类名$数字`。而匿名内部类中的 this，将指向的是这个内部类对象。
 *  对于 Java 中的 lambda 表达式中的 this，指向的是 lambda 表达式所在类的对象。也就是说，对一个类来说，lambda 表达式中的 this，与普通表达式中的 this，没有任何区别。

# JavaScript #

关于 JavaSript 中的 this 使用，一般分为普通表达式中的 this、匿名函数中的 this 和箭头函数中的 this。

注意：JavaScript 中的匿名函数与箭头函数不是同一个东西。JavaScript 中的匿名函数又叫 lambda 函数，但从形式上，JavaScript 中的箭头函数才像 Java 中的 lambda 表达式。例如。

/** * 常规函数 */
    function showName() { 
      console.log(this.name);
    }
    
    /** * 匿名函数（lambda 函数） */
    let showSex = function() { 
      console.log(this.sex);
    }
    
    /** * 箭头函数 */
    let showAge = () => console.log(this.age);

*  对于普通表达式中的 this 所处的位置，可以分为以下情况：
    
     *  含 this 的表达式没有位于任何函数中。在这种情况，此 this 指向对象 window（非严格模式下）或为 undefined（严格模式下）。
     *  含 this 的表达式位于一个函数中。在这种情况，此 this 指向**调用**该函数的对象。
        
        特别地，当 this **直接**位于一个构造函数中（即此 this 外最近一层的函数为构造函数），此 this 指向该构造函数所创建的对象（即，视调用构造函数的对象为该构造函数所创建的对象）。
        
        **注意**：不能武断地通过判断此含 this 的表达式所处的位置来断定 this 的指向。即，不能认为此含 this 的表达式位于某个对象内，就认为该 this 指向那个对象。判断 this 的指向还需要通过判断含 this 的函数在哪里被调用。
    
    例如（假设下面的代码均位于非严格模式下）：
    
        window.color = 'red';
        let obj = { 
          color: 'blue'
        };
        
        function sayColor() { 
          console.log(this.color);
        }
        
        /** * 没有使用对象来调用 sayColor()，this 默认指向 window。 */
        sayColor(); // red
        
        obj.sayColor = sayColor;
        /** * 使用对象来调用 sayColor()，this 指向对象 obj。 */
        obj.sayColor(); // blue
 *  对于 this 而言，匿名函数与普通表达式中的 this 的指向规则是一样的，因此此处不再详述。
 *  对于箭头函数中的 this，其指向**直接**包含此箭头函数定义的函数所属的对象。
    
    【注意】
    
     *  是包含箭头函数的函数，不是包含 this 的箭头函数。
     *  “直接”指的是包含箭头函数的函数必须是箭头函数外的最近一层的函数。
     *  当箭头函数没有位于某一个函数中时，此处的“函数”理解为“上下文”。
    
    不过，由于 JavaScript 中的函数的归属可以改变，因此此处也不能直接通过判断此含 this 的表达式所处的位置来断定 this 的指向，还是要看含该箭头函数的函数被调用的位置。
    
    例如，对于普通情况下：
    
        window.color = 'red';
        let obj = {   
            color: 'blue'
        };
            
        /** * 原箭头函数没有位于某一个函数中，而位于全局 */
        let sayColorGlobalArrowFun = () => console.log(this.color);
        /** * 原箭头函数没有位于某一个函数中，那就更没有该函数显式的所属对象了， * 因此默认所属对象为 window。于是 this 恒指向 window */
        sayColorGlobalArrowFun(); // red
                           
        obj.sayColorGlobalArrowFun = sayColorGlobalArrowFun;
        /** * 原箭头函数没有位于某一个函数中，那就更没有该函数显式的所属对象了， * 因此默认所属对象为 window。于是 this 恒指向 window */
        obj.sayColorGlobalArrowFun(); // red
        
        function sayColorNorFun() {  // NorFun：Normal Function
            /** * 原箭头函数代码位于函数 sayColorNorFun 中 */
            let sayColorLocalArrowFun = () => console.log(this.color);            
            sayColorLocalArrowFun();
        }
        /** * 原箭头函数代码位于函数 sayColorNorFun 中， * 而此处函数 sayColorNorFun 属于对象 window。 * 于是 this 指向 window */
        sayColorNorFun(); // red
        
        obj.sayColorNorFun = sayColorNorFun;
        /** * 原箭头函数代码位于函数 sayColorNorFun 中， * 而此处函数 sayColorNorFun 属于对象 obj。 * 于是 this 指向 obj */
        obj.sayColorNorFun(); // blue
    
    对于将包含箭头函数的函数作为构造函数时：
    
        function King() { 
            /** * this 直接位于一个普通函数中。在本文后面的调用中，其指向 King 对象 */
            this.royaltyName = 'Henry';
            
            /** * this 直接位于一个箭头函数中。在本文后面的调用中，其指向 King 对象 * * 注意：不能看代码看到这里就断定此处的 this 恒指向 window， * 要看含函数 King() 被调用处附近的代码。 * 但通常情况下，可以猜测 this 恒指向 window */
            setTimeout(() => console.log(this.royaltyName), 1000);
        }
        
        function Queen() { 
            /** * this 直接位于一个普通函数中。在本文后面的调用中，其指向 Queen 对象 */
            this.royaltyName = 'Elizabeth';
        
            /** * this 直接位于一个匿名函数中 */
            setTimeout(function() {  console.log(this.royaltyName); }, 1000);
        }
        
        /** * 此处将函数 King() 作为构造函数，因此 this 指向此处“new”创建的 King 对象， * 同时还调用了函数 King() */
        new King(); // Henry
        
        /** * 此处将函数 Queen() 作为构造函数，但由于 this 位于一个匿名函数中， * 而此匿名函数将由函数 setTimeout 来调用， * 而函数 setTimeout 将不会使用显式的对象来调用此匿名函数，因此视调用方为 window * * 注意：此处并不是因为“new Queen()”位于全局，所以认为调用方为 window， * 而是因为直接包含此箭头函数代码的是一个匿名函数，而此匿名函数的调用方为 window */
        new Queen(); // undefined

## 总结与提醒 ##

*  当两个 this 分别位于一个普通函数和一个箭头函数中时，它们的区别是，前者的 this 指向该普通函数（在被调用时）所属的对象（**调用**该普通函数的对象），而后者的 this 指向**包含**箭头函数定义的**上下文**（在被调用时）所属的对象。
 *  如果把箭头函数放置在一个函数中，则此箭头函数中的 this 与普通函数的 this 的效果一样的。因此，一般来说，不要把含 this 的箭头函数放置在一个函数中，而应该直接暴露在最外层的上下文中。这样，此箭头函数就永远指向当时的上下文，而不管之后又将此箭头函数传递给了谁。
 *  之所以 this 在普通函数与箭头函数中的行为有所不同，是因为 JavaScript 中的普通函数、匿名函数（lambda 函数）都属于函数，但箭头函数不属于函数，它只是一种特殊的表达式。而在 JavaScript 中，一个函数在被调用时，会为其创建 this 与 arguments，因为箭头函数不属于函数，所以它自己没有 this，它的 this 只能来源于外部的 this——也就是包含箭头函数定义的上下文。