js中的function函数与箭头函数

箭头函数

函数的简化，也是匿名函数，拥有词法作用域的this值

在JS中，箭头函数并不是简单的function(){}匿名函数的简写，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，在编写函数时就已经确定了。而匿名函数的this指向运行时实际调用该方法的对象，无法在编写函数时确定。

箭头函数中的this

this 总是指向词法作用域， 也就是外层调用者
箭头函数没有this. 如果使用了this 那么就一定是外层this .不会自动指向window对象

在ES6中，会默认采用严格模式，因此this也不会自动指向window对象了，而箭头函数本身并没有this，因此this就只能是undefined，这种情况，如果你还想用this，就不要用使用箭头函数的写法

var person = {
    name: 'tom',
    getName: function() {
        return this.name;
    }
}

//使用es6 来重构上面的对象
const person = {
    name:'tom',
    getName:()=>this.name
}
//这样编译的结果就是
var person ={
    name:'tom',
    getName:function getName(){return undefined.name}
}

// 可以稍做改动
const person = {
    name: 'tom',
    getName: function() {
        return setTimeout(() => this.name, 1000);
    }
}

// 编译之后变成
var person = {
    name: 'tom',
    getName: function getName() {
        var _this = this;  // 使用了我们在es5时常用的方式保存this引用

        return setTimeout(function () {
            return _this.name;
        }, 1000);
    }
};

function和=>的区别

function中this是使用时的对象
=>中的this是定义时的对象

再举个例子：

//1.function函数：
function User() {
 this.name = 'John';

 setTimeout(function greet() {
   console.log(`Hello, my name is ${this.name}`); // Hello, my name is 
   console.log(this); // 指向window
 }, 1000);
}
const user = new User();

//2.箭头函数：
function User() {
  this.name = 'John';

  setTimeout(() => {
    'use strict'
    console.log(`Hello, my name is ${this.name}`); // Hello, my name is John
    console.log(this); // User {name: "John"}
  }, 1000);
}
const user = new User();

箭头函数在自己的作用域内没有自己的this，如果要使用 this，就会指向定义时所在的作用域的 this值

function几种写法的区别

1.(function(){}())与(function(){})()

立即执行函数，在函数定义的地方就直接执行了

JS中函数有两种命名方式
1.声明式
会导致函数提升，function会被解释器优先编译。即我们用声明式写函数，可以在任何区域声明，不会影响我们调用。

function XXX(){}

如果加上()括号后，则会被编译器认为是函数表达式，（加上±号都可以），从而可以用()来直接调用

var k = function(){}

2.函数表达式
函数表达式我们经常使用，而函数表达式中的function则不会出现函数提升。而是JS解释器逐行解释，到了这一句才会解释。因此如果调用在函数表达式之前，则会调用失败。

fn1();
function fn1(){}//可以正常调用

fn2();
var fn2 = function(){}//无法调用

对函数表达式加上()，是可以直接调用的
但是如果是对声明式的后部加上()则是会被编译器忽略。

 var fn2 = function(){}();//这样是对的
function fn1(){}();//会被忽略

2. $(function(){})

是$(document).ready(function(){})的简写形式，是在DOM加载完成后执行的回调函数，并且只会执行一次。