如何解释es6 class中this的表现？
发布于 8 年前 作者 bigggge 9052 次浏览 来自 问答 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func()">click</button>
// 打印 undefined
<button onclick="app.handleClick()">click</button>
// 打印 App
<script>
    class App {
        handleClick() {
            console.log(this)
        }
    }
    const app = new App
    const func = app.handleClick
</script>
</body>
</html>
7 回复 
app.handleClick(); // App
func(); // undefined

@imhered 我上面写了，我想知道为什么是undefined

@bigggge 阮一峰的讲解

t hi s

this一般是在当一个函数被当作某个对象的方法调用的时候确定的，这个时候func属于window对象的方法，调用func()就相当于window.func()，所以this指向window，而window对象没有printName方法，所以是undefined

来自酷炫的 CNodeMD

？

2

在class中 ，this默认指向类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境。 所以，在：

 const func = app.handleClick;
 func(); //调用func的环境是全局环境。

那么问题来了，既然是全局环境的话，那么此时的this应该是输出window，但是却不是window而是undefined。 那么问题出在哪？ 其实，就是在class中，定义类的时候默认使用的是严格模式。 参见阮一峰老师和MDN的类-JavaScript： 类-JavaScript 严格模式 所以在严格模式下，由于this不能指向全局变量，因此这里就变成了undefined。

    class App {
       handle() {
           console.log(this)
       }
   }
   function test1 () {
       console.log(this);
   }
   var test2 = function(){
       "use strict";
       console.log(this);
   };

   const app = new App();
   const func = app.handle;
   func();  //undefined
   test1();  //window
   test2();  //undefined
回到顶部