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

js中this的指向

1. 对象中的this指向

在对象中this指向当前对象

var obj = {
    a:'noe',
    b: function(){
        console.log(this.a);
    }
};

obj.b();//输出的是noe

 2.构造函数中this指向

在构造函数中this指向wiondw

function f(){
    console.log(this)
}

f()//window

 3.call或apply调用函数

Call和apply函数其实用法差不多 , 第一参数都是调用函数的对象 , 后面的参数都是函数的参数 , 只是call函数的传参方式为不限个数的传参 

var a = 100;
var b = 200;

var c = {
    a: 300,
    b: 400
};

function add(){
    console.log(this.a + this.b)
}

add();//输出3
add.apply(c);//输出7

4.箭头函数中this(se6)

对象中使用this会被指向到全局的window对象 , 所以在对象中使用箭头函数它this的指向也会被指向到全局的window对象.

var arr=()=>{
    console.log(this)
}
arr()

箭头函数：

1.箭头函数的出现就是为了解决ES5中this指向混乱的问题

2./箭头函数的this指向来自父级上下文, 箭头函数没有自己的this

3.箭头函数的this不会在调用的时候被改变, 在箭头函数声明的时候他的this就已经被永久的确定

//箭头函数
let fun=()=>{
     console.log(我是箭头函数)
}

// 普通函数
function (){
    console.log(我是普通函数)
}

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

1.箭头函数是匿名函数 箭头函数不能作为构造函数使用 不能使用new

{
        function Fn(name){
            this.name = name;
            this.age = 18;
            console.log("Fn中的this==>",this); //new Fn()
        }
        let fn = new Fn("哈哈");

        let Fn = ()=>{
            this.name = name;
            this.age = 18;
        }
        let fn = new Fn(); //Fn is not a constructor
    }

2.箭头函数的this,始终指向父级上下文

 {
        let obj = {
            a: 100,
            fn: function(){
                console.log(this);//obj
            },
            fn2: ()=>{
                console.log("fn2====>",this);//window
            }
        };
        obj.fn();
        obj.fn2();
    }

3.箭头函数不能通过call apply bind改变this指向,但是可以通过这些方法传递参数

{
        let obj = {
            name: "obj",
            birth: 1990,
            year: 2021,
            age: (arg1, arg2)=>{
                console.log(this);//window
                console.log(arg1, arg2);//obj2
                console.log("my age =", this.year - this.birth)
            }
        }
        let obj2 = {
            name: "obj2",
            birth: 2000,
            year: 2020,
        };
        obj.age.call(obj2,"参数1","参数2")
    }

4.箭头函数没有原型属性

 {
        let fn = ()=>{};
        console.dir(fn);
    }

 

5.箭头函数没有arguments属性,可以用...展开运算符来接受所有的参数集合

 {
        function fn(){
            console.log(arguments);
            // fn.caller 谁在调用当前的方法 会返回这个方法本身
            // arguments.callee ===> 当前这个方法本身;
            // arguments 参数集合 是一个类数组 不能调用数组的方法
        }
        fn(1,2,3)

        let fn1 = (...args)=>{ //使用展开运算符接受参数集合
            // console.log(arguments);// arguments is not defined
            console.log(args); //是一个数组
        }
        fn1(1,2,3)
    }

普通函数的arguments和类数组转换成数组

两种方法原理是一样的，都是创建一个空数组，把类数组的参数一个一个追加到空数组里

Array.prototype.slice.call(arguments);
 
 
let arr = []
for (let i = 0; i < arguments.length; i++) {
      arr.push(arguments[i])
}