箭头函数好久没有使用过了?

626 阅读3分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第3天,点击查看活动详情

箭头函数好久没有使用了?

祝你在4月有好心情、好兆头、好福气、好运气、好恋情、好运无限.... “老人言:吃肉时一桌人,洗碗时却是一个人,这个世道总有一些没有良心的人,吃肉的时候夸肉香,洗碗的时候嫌碗脏” 在外包公司这个框架只能支持到ES5不能使用ES6,苦逼中吧!~~~

1 语法格式

我们普通函数语法格式上是这样的

function(){函数体内容}

然而我们的箭头函数是这样的,是不是很简洁

(参数)=>{函数体内容}

🏀例如: 我们遍历数组,并修改数组

var hobby=["吃饭","睡觉","打球"]
var arr = hobby.map(function(item){ //普通函数实现
  return "张三喜欢"+item;
})
var brr =hobby.map((item)=>{return "李四喜欢"+item}); //箭头函数实现
console.log(arr)
console.log(brr)

image

🏀如果你要返回一个对象,要改变写法,错误的写法会被以为是函数体内容

var obj1 = ()=>{name:"浪漫主义码农";age:20} //错误写法
var obj = ()=>({name:"浪漫主义码农",age:20}) //正确写法
console.log(obj1(),"错误写法")
console.log(obj(),"正确写法")

image

小结一下

  • 如果只有一个参数,就可以省略(),函数体只有一条语句就可以省略{}和return,上面的例子就可以省略为var brr =hobby.map(item=>"李四喜欢"+item);

  • 箭头函数作为匿名函数,是不可以命名的

2 this的指向

箭头函数并没有他们自己的执行上下文。所以就没有this,arguments,

箭头函数的this指向是它所在的对象的父级

🏀来个例子

var a = {
  name: "愿你历经千帆",
  init: function () {
    console.log(this)
    console.log(this.name)
  }
}
var b = {
  name: "终能得偿所愿",
  init: ()=> {
    console.log(this)
    console.log(this.name)
  }
}
a.init()
b.init()

image

可以看出普通函数this指向了本身对象,而箭头函数this往外层找指向了window,因为window没有name字段所以没有输出。

箭头函数使this从“动态”变成“静态”,实质是内部没有this指向,继承上级对象this指向

箭头函数的this指向定义时外部作用域内的this指向,普通函数的this指向调用时根据上下文取确认.

3 无法作为构造函数

箭头函数作为匿名函数,没有prototype,没有自己的this指向,因此不能使用new构造函数

来个例子:

function mao(name,age){ //普通函数
  this.name=name,
    this.age=age
}
var fn = (name,age) => ({ //箭头函数
  name:name,
  age:age
})
var b = new mao("浪漫主义码农",100) //普通函数
console.log(b)
var a = new fn("张三",200) // 箭头函数
console.log(a)

image

**分析:**💠首先我们要知道构造函数new的过程是怎么样的

  1. 创建一个空对象 {};
  2. 将要实例化对象的原形链指向该对象原形。
  3. 绑定该对象为this的指向
  4. 返回该对象。

由于箭头函数没有prototype 没有自己的this指向,不可以使用arguments。

function mao(name,age){
        this.name=name;
        this.age=age;
    }
//手写new
function _new(fn, ...args){ // ...args为ES6展开符,也可以使用arguments
    //先用Object创建一个空的对象
    let obj=new Object();
    //新对象会被执行prototype连接
    obj.__proto__=fn.prototype;
    //新对象和函数调用的this绑定起来
    let res=fn.call(obj,...args);
    //判断函数返回值如果是null或者undefined则返回obj,否则就返回res
    return res instanceof Object?res:obj;
}
var a= _new(mao,"浪漫至死不渝",20)
console.log(a)

image