ECS6 箭头函数和this的理解

今天突然遇到一个问题 搞不清楚了  和箭头函数搞混了 那就是对象中方法的简写

如下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就是这个元素