如何解释es6 class中this的表现?
发布于 3 年前 作者 bigggge 5754 次浏览 来自 问答
<!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

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

来自酷炫的 CNodeMD

在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
回到顶部