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

1、JS中的this指向

1、方法中，谁调用，this就指向谁

var obj={
	name:"haha",
	fn:function(){
		console.log(this.name) //haha
	}
}
obj.fn()

2、如果没有人调用，this默认指向window

function fn(){
var a='haha'
console.log(this) //window
}
fn()

3、构造函数中的this，指向通过这个构造函数创建出来的实力本身

function Fn(a){
	this.a=a
	console.log(this) //Fn {a: "zhy"}
}
let name=new Fn('zhy')
console.log(name.a) //zhy

4、强制改变this指向 call（）、apply（）、bind（）

function fn(a,b){
console.log(this) //window
console.log(a,b)//12,34
}
fn(12,34)
fn.call(''call,12,34) //this指向字符串call
fn.apply('apply',[12,34])//this指向字符串apply
fn.bind('bind')(12,34) //this指向字符串bind

2、箭头函数中的this指向

let obj={
	name:'娃哈哈',
	fn(){
	console.log(this)//obj
	let fn1=()=>{
		console.log(this) //obj
		}
		fn1()
	}
}
obj.fn()

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

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

//普通函数
function fn(){
	console.log('普通函数')
}
let fn2=new fn()  //普通函数
//箭头函数
let fn1=()=>{
	console.log('箭头函数')
}
let fn3=new fn1() //fn1 is not a constructor（fn1不是构造函数）

2、箭头函数内没有‘arguments’，可以用展开运算符‘…’来解决

let a=(...a)=>{
console.log(a)
}
a(1,2,3,4,5) //[1, 2, 3, 4, 5]

3、箭头函数的this，始终指向父级上下文

//this指向父级上下文，当前的箭头函数父级是对象，
//对象是没有this的，所以箭头函数this指向window
        const obj = {
            name: "123",
            age: 15,
            fn: () => {
                console.log(this);
            }
        }
        obj.fn()

4、箭头函数不能通过call（）、apply（）、bind（）方法直接修改它的this指向,但是可以正常传参

  let s = (...arg) => {
            console.log(this, arg);
        }
        s.call({}, 12, 22, 32)

5、箭头函数没有原型属性

let a=()=>{
	return 5
}
console.log(a)
console.log(a.prototype) //undefined

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

arguments：

     function fn() {
            console.log(arguments)
        }
        fn(12,22) //Arguments(2) [12, 22, callee: ƒ, Symbol(Symbol.iterator): ƒ]

//arguments可以存储当前函数传入的所有参数
//访问arguments里面的数据，可以通过下标进行访问
  function fn() {
            var sum = 0;
            for (var i = 0; i < arguments.length; i++) {  //arguments.length 输入传入参数的个数
                sum += arguments[i];
            }
            console.log(sum);
        }
        fn(1,2,3,4,5);

类数组转换成数组：
1、用Array.prototype.slice实现

   function fn(a,b){
           var arr=Array.prototype.slice.call(arguments)
           console.log(arr);
        }
        fn(12,34)

2、使用ES6的新语法 Array.from() 来转换

   function fn(a,b){
            var arr=Array.from(arguments)
            console.log(arr);
        }
       
        fn(12,34)