箭头函数与普通函数

一、箭头函数与普通函数

箭头函数表达式语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target等，也不能用作构造函数。箭头函数表达式更适用于那些本来需要匿名函数的地方。

普通函数，函数的名字叫shuai_ge

var x="shaui_ge"

function shuai_ge(){

    console.log(`${x="刘恺卿"}`);

}

箭头函数

 var x="shuai_ge";

 (() => x="刘恺卿")()

 console.log(x);

二、箭头函数与匿名函数

匿名函数

function (){

console.log("刘恺卿");

}

运行匿名函数(单独运行时结尾加上括号)

(function (){

    //此时会输出刘恺卿

    console.log("刘恺卿");

})(//传入的值)

箭头函数相当于匿名函数，并且简化了函数定义

但实际上，箭头函数和匿名函数有个明显的区别：匿名函数的this指向执行时上下文（由于执行时的全局性，this一般指向window）；箭头函数内部的this与父级元素this绑定

三、this

1：this永远指向一个对象；

2：this的指向完全取决于函数调用的位置；

3：this指向可以动态改变，只有在运行时才知道this指向

eg1.

var A = {

    name: '张三',

    f: function () {

        console.log('姓名：' + this.name);

    }

};
​
var B = {

    name: '李四'

};
​
B.f = A.f;

B.f()   // 姓名：李四

A.f()   // 姓名：张三

eg2.

function foo() {

    console.log(this.a);

}

var obj2 = {

    a: 2,

    fn: foo

};

var obj1 = {

    a: 1,

    o1: obj2

};

obj1.o1.fn(); // 2

this的事件绑定

<input type="button" value="按钮" onclick="clickFun()">

<script>

    function clickFun(){

        this // 此函数的运行环境在全局window对象下，因此this指向window;

    }

</script>
​
<input type="button" value="按钮" onclick="this">

<!-- 运行环境在节点对象中，因此this指向本节点对象 -->

当事件触发时，属性值就会作为JS代码被执行，当前运行环境下没有clickFun函数，因此浏览器就需要跳出当前运行环境，在整个环境中寻找一个叫clickFun的函数并执行这个函数，所以函数内部的this就指向了全局对象window；如果不是一个函数调用，直接在当前节点对象环境下使用this，那么显然this就会指向当前节点对象；

四、匿名函数和箭头函数的this指向区别

eg1.匿名函数的全局性

function fun() {

    (function () {

        console.log(this);

    })()

}

fun();

eg2.匿名函数在obj中this指向对象

var name = 'window'

var person = {

    name :'Alan',

    sayOne:function () {

            console.log(this.name)

    },

    sayTwo:function () {

        return function () {

            console.log(this.name)

        }

    }

}

person.sayOne()

person.sayTwo()()

• 函数内部的this指向调用者
• sayOne调用者是person对象，所以this指向person；

• sayTwo的调用者虽然也是person对象，但是区别在于这次调用并没有打出this而是在全局返回了一个匿名函数
  ,而这个匿名函数不是作为某个对象的方法来调用执行，是在全局执行，最后的执行者就是window

eg3.匿名函数性质运用

var name = 'window'

var person = {

    name :'one',

    wrap: function(){

        (function (){

            console.log(this.name)// window

        })()

        function sum(){

            console.log(this.name)// window

        }

        sum()，

        good: function sum2() {

            console.log(this.name)
        }

    }

}

person.wrap()

person.good()

• function是调用自身的匿名函数 ，this指向全局，sum被function调用，sum的this指向function，也是全局
• good被person直接调用，this指向person

eg4.箭头函数this

var name='window';

var obj = {

    name:'obj',

    nameprintf:()=>{

        console.log(this.name)

    }

}

obj.nameprintf()

• nameprintf是箭头函数，this与父级元素obj的this绑定，而obj的this指向window，因此nameprintf的this也指向window

eg5.匿名函数和箭头函数结合

var name="window"

var obj={

    num:4,

    name:obj,

    fn:function(){  

        console.log(this.name); 

        (() => {

            console.log(this.name);

        })();

    }

}

obj.fn(); 

var w = obj.fn;

w(); 

var obj1 = {name:'obj1', fn:obj.fn}

obj1.fn(); 

• 箭头函数中的this包含在匿名函数中，匿名函数被function调用，因此箭头函数的this指向与function中的相同
• obj调用fn，因此fn的this指向obj，输出为obj
• w()是新创建的定义在window下的变量，this指向window，输出为window
• obj1调用obj中的fn函数，因此调用对象为obj1，this指向obj1