使用vuejs过程中遇到的问题(二)

定时器

定时器的目的在于固定时间，或者周期内不断执行某个业务。主要分为setTimeout(定时执行)和setInterval(循环执行)

• setInterval(func, delay_time-毫秒)
• setTimeout(func, delay_time-毫秒)
• 第一个参数方法名不需要括号，可以理解为把方法当作参数传给了定时器，和python的装饰起写法有点类似

箭头函数和普通函数的区别

常规函数

 function test(name) {  //声明式写法
     console.log(name)
     }
 test('Jerry')

// 第二种 
 let test2 = function(name) {  //赋值式写法
     console.log(name)
 }
 test2('Tom')

1. 它的调用方式也是func.call(this, params)等价于(func(params))

2. call的调用方式默认的第一个参数就是this，也就是windows对象

   const obj = {
       name: 'Jerry',
       greet: function() {
           console.log(this.name)
       }
   }
   obj.greet()  //第一种调用方法
   obj.greet.call(obj) //第二种调用方法
   
   // 手动指定this
   const obj = {
       name: 'Jerry',
       greet: function() {
           console.log(this.name)
       }
   }
   obj.greet.call({name: 'Spike'})  //打出来的是 Spike

箭头函数

• 只有赋值的定义方法
• 如果参数只有一个，可以不加括号，如果没有参数或者参数多于一个就需要加括号
• 如果函数体只有一句话，可以不加花括号
• 如果函数体没有括号，可以不写return，箭头函数会帮你return

const test = name => {
    console.log(name)
}
test('Jerry')

const test2 = (name1, name2) => {
    console.log(name1 + ' and ' + name2)
}
test2('Tom', 'Jerry')

const add = (p1, p2) => p1 + p2
add(10, 25)

构造函数里的this稍微有点特殊，每个构造函数在new之后都会返回一个对象，这个对象就是this，也就是context上下文

window.setTimeout()和window.setInterval()的函数中的this有些特殊，里面的this默认是window对象。

对于箭头函数来说有两个不一样的地方

1. 箭头函数会默认帮我们绑定外层this的值，所以在箭头函数中this的值和外层的this是一样的。
2. 不能用call方法修改里面的this

const obj = {
    a: () => {
        console.log(this)
    }
}
obj.a()  //打出来的是window

const obj = {
    a: () => {
        console.log(this)
    }
}
obj.a.call('123')  //打出来的结果依然是window对象

// 多层嵌套
const obj = {
    a: function() { console.log(this) },
    b: {
    	c: () => {console.log(this)}
	}
}
obj.a()   //没有使用箭头函数打出的是obj
obj.b.c()  //打出的是window对象！！