首页 > 试题广场 >

假设document是HTML文档中的一个节点，点击该节点后

[单选题]

假设document是HTML文档中的一个节点，点击该节点后会发生什么？

function test() {
  this.flag = false;
  this.change = () => {
    this.flag = true;
    console.log(button.flag);
  };
}
const button = new test();
document.addEventListener("click", button.change);

```
输出true
```
```
输出false
```
```
输出undefined
```
```
报错
```

查看正确选项

牛客651406338号

this的题目，我都是这样理解的，，除了箭头函数，this的指向就看它的直接调用者是谁！而箭头函数就找它外面第一个不是箭头函数的函数。

题目中调用button.change，所以去分析change(),而难点就在于 this.flag = true;的this是谁？当看到change是一个箭头函数的this时，就什么也不要考虑，就去找外面第一个不是箭头函数的函数，也就是说，他会把this绑定到text上，那this.flag = true;就意味着text()的实例中的flag会变成true，所以button.flag为true。

发表于 2021-12-12 13:36:14 回复(6)

知来者可追

箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

所以说对于箭头函数来说，不是看其被谁调用的是，而是看其定义时所在的作用域。

对于上述题目而言，箭头函数在被定义时所在的作用域是test的作用域，而调用test的时候是将其当做构造函数通过new来调用，所以说此时test中的this指向的就是实例出来的对象，也就是button ，所以就相当于是 button.flag = true , 所以最终输出的就是true

发表于 2022-06-07 09:39:54 回复(0)

牛客898438075号

()=>函数里面的this跟外面的函数指向同一个，也就是说当调用chang方法时，this.flag=true实际是将外面的this.flag=false的值改了。

发表于 2021-12-17 18:18:56 回复(1)

__sgf__

这里的this是指window，因为函数里面有this.flag=true结果才是true，不然会显示undefined

发表于 2021-12-12 18:35:24 回复(0)

xiaohz99

箭头函数没有自己的this，所以this指向window；箭头函数中，this.flag = true 相当于 window.flag = true;所以输出true。

发表于 2022-02-22 12:19:08 回复(0)

牛客451897236号

试试分析一下：

首先button是通过new test()的方式来得到的，new返回的对象，this指向对象本身。所以此时button.flag = false;
button.change 是一个箭头函数而不是普通的函数，所以他的this要取所在词法作用域的this，因为在test函数中，所以change的this就是test的this
我觉得作用域可以分为函数作用域和全局作用域（虽然还有块级作用域，但是在这可以不考虑）
当点击document的时候触发函数执行。因为change的this是test的this也就是button，所以这里将button的flag改为了true。所以最后打印的就是true
如果这里的函数并不是箭头函数，而是普通的函数，那么这里的this就会变成document。此时打印document.flag 得到的就是true;(谁调用this指向谁),而程序的输出结果就会变成false

发表于 2022-02-15 14:58:00 回复(1)

饭团君

变量查找只会在函数定义的地方进行查找，因此在执行button.change函数时,由于是箭头函数，所以this指向定义时的位置test函数，然后button是用new操作符生成的对象，button继承了test的this。首先会修改flag为true。然后会在test函数下的change函数里查找button，找不到再去test函数查找，再找不到就到定义test函数的作用域也就是window对象寻找button。最后打印出button下的flag

编辑于 2022-01-27 14:54:09 回复(0)

Tone6

除了箭头函数，this的指向就看它的直接调用者是谁！而箭头函数就找它外面第一个不是箭头函数的函数。

发表于 2022-07-23 14:03:56 回复(0)

锐翔前端开发

箭头函数根据外层（函数或者全局）作用域来决定 this。这里的箭头函数的this指向外层函数test（），而new操作符会将button的this指向构造函数也就是test（），故this.flag改变的是test()里的flag.

发表于 2022-04-01 17:10:31 回复(0)

矜持的微笑

箭头函数没有this,如果使用了this,this指向父级作用域上下文。遇到箭头函数里使用this，你要看它的父级是不是函数，如果是，它就指向父级作用域的this。如果它的父级不是函数，就继续往上找，能找到函数，this就指向找到的函数的作用域，如果往上找父级找不到函数，就指向window.

function test() {//构造函数中的this指向实例化对象。

this.flag = false;

this.change = () => { //看这里，this.change也就是button.change，它是一个函数，是有作用域的。

this.flag = true; //所以此处的this.flag相当于button.flag 即button.flag=true;

console.log(button.flag);

};

}

const button = new test();

document.addEventListener("click", button.change);

发表于 2022-02-22 14:06:03 回复(0)

monody294

其实button并没有自己的flag属性，触发change函数后，因为原型链上的flag存在，并且并没有配置writeablr:false,所以会在button对象中添加一个名为flag，值为true的新属性，屏蔽了原型上的flag

发表于 2023-01-05 20:55:40 回复(1)

西落

箭头函数在定义时就已经有了指向，不是运行时才确定

发表于 2022-10-19 16:06:04 回复(0)

乐观的梅花鹿在打卡

还没学到箭头函数

发表于 2022-05-23 01:00:19 回复(0)

哈？201905291435811

此处click事件传入的button.change，不是相当于直接传人箭头函数的函数体吗？ document.addEventListener('click',()=>{ this.xxx; … }); 此时this不是指向window吗？

发表于 2022-04-11 10:15:55 回复(0)

未成年梦想

const button = new test(); //建立了一个全局变量

箭头函数的指向为声明时所在作用域下this的值,所以箭头函数this.flag = true; 的this为实例化button对象,所以修改后flag为true

发表于 2022-03-20 21:16:59 回复(0)

hungry_&_foolish

function test() {
    this.flag = false;
    this.change = () => {
        this.flag = true;
        console.log(button.flag);
    };
}
const button = new test();
button.change();
console.log(flag) //undefined

this都是指向button的吧，这个window.flag是没有的；我感觉是new的原因，箭头函数中向上一级作用域链找test的this；

***：test在这不是直接window.test()调用；用的是new ***

所以箭头函数的this == 外层test的this == new出的新对象button

发表于 2022-01-05 14:37:44 回复(0)

提交观点

问题信息

Javascript

难度：

16条回答 637收藏 1758浏览

假设document是HTML文档中的一个节点，点击该节点后

问题信息

热门推荐

相关试题