如何解释es6 class中this的表现?

发布于 9 年前作者 bigggge 9763 次浏览来自问答

<!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 回复

im-here 1楼•9 年前

app.handleClick(); // App
func(); // undefined

bigggge 2楼•9 年前作者

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

im-here 3楼•9 年前

@bigggge 阮一峰的讲解

gzhangzy 4楼•9 年前

t hi s

q86002618 5楼•9 年前

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

来自酷炫的 CNodeMD

meooxx 6楼•9 年前

FiShelly 7楼•9 年前

在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

如何解释es6 class中this的表现? - CNode技术社区