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

m0_61374145

已于 2024-06-02 09:54:12 修改

阅读量493

点赞数 16

文章标签： javascript vue.js 开发语言前端

于 2024-05-30 21:53:34 首次发布

本文链接：https://blog.csdn.net/m0_61374145/article/details/139332627

版权

5.箭头函数不能使用apply、call、bind改变this指向

前言

最近在学习Vue的时候经常用到箭头函数，因为对箭头函数的概念有些模糊了，所以通过这篇文章记录一下箭头函数的写法以及普通函数与箭头函数的差异。

普通函数与箭头函数的写法

普通函数与箭头函数的写法有一些差别，箭头函数的写法更加简洁，下文交代了普通函数的写法以及箭头函数在几种情况下的写法。

普通函数

普通函数的写法一般是：

function 函数名(参数列表){

函数体

return 返回值

}

调用函数时是：方法名(参数）

如下所示:

function fn(a,b,c){
            console.log(a,b,c);
        }
fn(1,2,3);//调用这个函数

箭头函数

1.一般写法

箭头函数的一般写法：

let 变量名=(参数列表)=>{

函数体

return 返回值

}

如下所示：

let fn1=(a,b,c)=>{
            console.log(a,b,c);
        }
fn1(1,2,3)

2.只有一个参数

箭头函数如果只有一个参数，括号可以省略，写法是：

let 变量名=参数=>{

函数体

return 返回值

}

如下所示：

let fn2=a=>{
            console.log(a);
        }
fn2(10);

3.没有参数

箭头函数如果没有参数，括号不能省略，写法是：

let 变量名=()=>{

函数体

return 返回值

}

如下所示

let fn3=()=>{
            console.log('无参数');
        }
fn3();

4.函数体里面只有一句话

函数体里面只有一句话可以省略{}和return,具体写法：

let 变量名=参数=>函数体

如下所示

let fn4=a=>a+10;
console.log(fn4(20));

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

1.this指向不同

普通函数的this指向

普通函数的this指向会随着不同情况而改变，谁调用指向谁，若有实例对象指向被创建的实例对象，否则就指向window。apply、call、bind会改变this指向。

如下所示

function Banji(name, age) {
            console.log(this);//this指向window
            this.name = name;
            this.age = age;
            this.say1 = function (arg) {
                console.log('我是' + this.name + arg);
            }
        }
        var web = new Banji('H', 15) //this指向web
        web.say1('你好')
        var obj = {
            name: "小王"
        }
        web.say1.call(obj,'hello')//this指向obj

箭头函数的this指向

箭头函数无法自己创建this指向，它的this指向是继承而来，它的this永远与箭头函数所在作用域的父级的this指向相同。

如下所示：

function Banji(name, age) {
            console.log(this);//this指向window
            this.name = name;
            this.age = age;
            setInterval(()=>{
                console.log(this);//this指向window
            },10000)
}
Banji('H', 15);

打印结果：

另一种情况：

 function Banji(name, age) {
            console.log(this);//this指向web
            this.name = name;
            this.age = age;
            setInterval(()=>{
                console.log(this);
            },10000)
}
  var web = new Banji('H', 15) //this指向web

打印结果：

2.箭头函数不能作为构造函数使用

如果作为构造函数使用会报错如下所示：

let Fn3=()=>{
            console.log('无参数');
        }
        let fn3=new Fn3()
        //报错  Uncaught typeError:Fn3 is not a constructor
        //这种报错通常表示尝试实例化一个非构造函数类型的对象。
        fn3();

3.箭头函数没有prototype属性

var Fn = () => {};
console.log(Fn.prototype);//提示undefined

4.箭头函数不存在arguments参数

在普通函数中，可以使用arguments来接收传来的所有参，在下面代码中arguments接收所有参数并存入str中。

function fn(){
            var str=arguments;
            var max=str[0];
            for(var i=1;i<str.length;i++){
                if(max<str[i]){
                    max=str[i];
                }
            }
            return max;
        }
        console.log( fn(1,8,15,4,3,89,106,666));

箭头函数中没有arguments，若要接收参数，可以运用展开运算符的方式：

 //解构方式使用展开运算符
        let fn5=(a,...list)=>{
            console.log(a);
            console.log(list);
        }
        fn5(1,2,52,1565,156,1456,15,145,1);

5.箭头函数不能使用apply、call、bind改变this指向

let obj= {
            a: 10,

            // 匿名函数 function
            b: function () {
                console.log(this.a + 2)
            },

            // 箭头函数     
            c: () => {
                console.log(this.a)
                console.log(this.a - 2)
            }
        }
        let obj1 = {
            a: 50
        }
        obj1.b.apply(obj1) //打印得到52，改变this指向，this指向调用该方法的对象,这里是obj1
        obj1.c.apply(obj1) //打印得到 undefined 和 NaN，没有改变this指向

参考文档：【深度剖析 JS 的箭头函数 = ＞与普通函数 function 的区别 - CSDN App】http://t.csdnimg.cn/wAwH0