今天突然遇到一个问题 搞不清楚了 和箭头函数搞混了 那就是对象中方法的简写
如下let a = {
'a':function(){} //这是对象中的方法 可以简写成 b(){}
}
function test() { console.log("aaaaaaa") }() 报错,不能执行
( () => {console.log('Hello')} )() 箭头函数<=>匿名函数 能立即执行
( () => {console.log('Hello')} () ) 箭头函数不能执行 普通函数可以执行
!() => {console.log('Hello')} () 箭头函数不能执行 普通函数可以执行
以下是说明 setInterval 的特性就是他的执行主体永远是全局对象
const Person = {
'name': 'little bear',
'age': 18,
'sayHello': function () {
setInterval(function () {
console.log('我叫' + this.name + '我今年' + this.age + '岁!')
}, 1000)
}
}
Person.sayHello()
setInterval()是绑定到全局的 所以setInterval中的function里this.name和this.age是undifinded
正确的写法是:
const Person = {
'name': 'little bear',
'age': 18,
'sayHello': function () {
let self = this
setInterval(function () {
console.log('我叫' + self.name + '我今年' + self.age + '岁!')
}, 1000)
}
}
const sayHelloFun = Person.sayHello
sayHelloFun()
将person中的this绑定到self上 不然this是全局的对象
如果我们将函数中的函数变成箭头函数 那么我们看看this的变化如何 如下
我们需要重新举一个例子,如下
function Person () {
this.name = 'little bear',
this.age = 18
let self = this
setInterval(function sayHello () {
console.log('我叫' + self.name + '我今年' + self.age + '岁!')
}, 1000)
}
let p = new Person()
缓存this,然后输出,能达到我们想要的结果。
把上述例子改为箭头函数的形式如下
function Person () {
this.name = 'little bear',
this.age = 18
setInterval(() => {
console.log('我叫' + this.name + '我今年' + this.age + '岁')
},1000)
}
let p = new Person()
我们可以看到,箭头函数使用了定义时上下文的this,且与在哪里调用没有关系。
箭头函数解释:
标准:(param)=> {expression}
如果只有一个参数:param => {expression}
如果返回值仅仅只有一个表达式(expression), 还可以省略大括号:param => expression
箭头函数
let fun = () => {
console.log('lalalala');
}
功能如下:
普通函数:
function fun() {
console.log('lalla');
}
箭头函数 匿名函数
()=>{} == function(){}
我们知道最好不要用箭头函数作为对象的方法。
this的指向有以下几点不完整但是常用:
第一点:函数执行时如果前面有.那么这个点前面是谁 this就指向谁,没有就指向全局
第二点:自执行函数中的this指向全局
第三点:绑定html元素的点击事件执行的函数里面的this就是这个元素