vue实例中在methods中定义了两个方法,一个a(){console.log('hh')},一个b(){
setTimeout(this.a),3000},b在事件触发三秒后执行,写成箭头函数的话应该是
b(){setTimeout(()=>this.a,3000)},因为不想让a立即调用所以这里后面没加(),但是触发事件时发现控制台没有输出,反而是写成b(){setTimeout(()=>this.a(),3000)},控制台会在事件触发3s后输出hh,这是为啥,
1.首先settimeout是在事件触发后规定时间到了调用执行第一个参数了的函数,因此第一个参数绝对不能是立即执行的函数,而应该是函数方法本体,所以你写成this.a是对的,到了指定时间定时器会帮你调用a(),你要是直接写成this.a(),定时器会失效立马执行a(),
2.当你写成箭头函数是,这里要注意了,settimeout是时间到了帮你调用箭头函数,而不是箭头函数里的函数,也就是说如果你写成
()=> this.a的话,
相当于()=> { a(){console.log('hh')},也就是时间到了定时器帮你调用的是箭头函数,不是a函数,这时你得到的是a函数本身,并且没在控制台输出,控制台当然啥也没有,但是你写成()=>this.a()的话,就相当于你先调用了a,并把结果存在了箭头函数,但是箭头函数并没有马上执行【因为这里的箭头函数没有调用,如果写成 (()= > this.a())() ,那么箭头函数才会立即调用,延时才会失效,这里可以知道定时器第一个参数要求不能为立即执行】,而是等定时器到时间帮他执行
基于new bing的编写:
在Vue实例中,methods中定义的方法都是挂载在this对象上的函数,而在setTimeout中调用时,this指向的是全局window对象,因此需要使用箭头函数将this绑定到Vue实例,才能正确调用a函数。
在第一个写法中,setTimeout(this.a),没有加括号,传递给setTimeout的是a函数的引用,而不是执行结果。因此,在执行setTimeout时,a函数并没有被调用。
而在第二个写法中,使用了箭头函数将this绑定到Vue实例,并且加上了括号,因此执行setTimeout时,a函数被正确地调用,输出结果到控制台。
你使用setTimeout(()=>this.a, 3000)
时,this.a
将被解释为一个在Vue实例之外的函数,而不是在Vue实例内部定义的方法
在定时器中调用Vue实例的方法,你需要在箭头函数后面加上括号,即setTimeout(() => this.a(), 3000)
。这样,this.a()
将被正确地识别为Vue实例中定义的方法,并在定时器到期后执行
如果你希望在setTimeout
回调函数执行时输出"hh",则应该使用setTimeout(() => this.a(), 3000)
,而不是setTimeout(() => this.a, 3000)
this.a()才是调用方法啊,this.a是a这个属性
引用chatGPT作答,这是因为在箭头函数中,this 的指向是固定的,指向的是该箭头函数定义时所在的作用域的 this 值,而非箭头函数执行时所在的作用域的 this 值。
在你的代码中,setTimeout 函数中传入的箭头函数 ()=>this.a 不带括号,表示将 this.a 函数作为回调函数传入 setTimeout 中,当 setTimeout 函数触发时,会执行回调函数,但是此时回调函数中的 this 值指向的是全局对象,因为该箭头函数是在全局作用域中定义的。因此控制台没有输出。
当你在箭头函数中加上括号,即 ()=>this.a(),表示将 this.a 函数执行后的返回值作为回调函数传入 setTimeout 中,当 setTimeout 函数触发时,会执行回调函数,此时回调函数中的 this 值指向的是 Vue 实例,因为箭头函数是在 Vue 实例的作用域中定义的,所以控制台会输出 'hh'。
这是因为在使用箭头函数时,箭头函数的this指向的是定义它的上下文,而不是执行它的上下文。在b方法中,箭头函数中的this指向的是vue实例,而不是setTimeout函数的回调函数中的上下文。因此,如果不加上(),setTimeout函数的回调函数中的this.a会被解析为undefined,而不是vue实例中的a方法。加上()后,this.a会被立即执行,输出hh。
This.a和()=>this.a()是一个函数,而this.a()是一个函数调用,回调函数添加函数和添加函数调用是不一样的,你给a函数加一个返回值你就明白了,因为你的a没有返回值,所以输出是空白
1.先了解一下setTimeout用法,setTimeout的第一个参数是函数,第二个是延迟的毫秒数;用法示例如下:
function callbackFn() {
console.log("-----")
}
setTimeout(callbackFn, 3000)
3s后会执行callbackFn();
2.setTimeout(this.a,3000)代码执行,3s后setTimeout执行this.a();
3.setTimeout(() => this.a, 3000)代码执行后,执行箭头函数,箭头函数返回this.a,这种情况this.a是不执行的。
// 类似
const fn = () => {
return function _fn() {
console.log("-------")
}
};
想要输出-------,就要执行fn()();
a是一个函数,当使用【this.a】相当于是将函数a作为属性进行访问,使用【this.a()】是表示调用这个函数。