ES6之箭头函数

ES6新语法之箭头函数

箭头函数的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
语法:
箭头函数
(参数1,参数2…) => {
函数体
}

  • 1. 箭头函数基本形式
    (1). 如果参数只有一个,可以省略小括号 :参数 => {}
const print = num => {
	console.log(num);
}
print(1000)

(2).如果箭头函数只有一条返回语句,可以省略花括号,可以省略return : 参数 => 返回值

const isOdd = num => {
 	return num % 2 !== 0;
}

(3).如果返回值是一个对象的时候,就会认为成函数体,把返回值变成表达式的形式.

const obj = (a,b) => 
		({
			a : a,
			b : b
		})	
console.log( obj(1,2) )
  • 2. 箭头函数的特点
    (1). 箭头函数this为父作用域的this,不是调用时的this
    箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind。
    普通函数的this指向调用它的那个对象。
let person = {
    name:'jike',
    init:function(){
        //为body添加一个点击事件,看看这个点击后的this属性有什么不同
        document.body.onclick = ()=>{
            alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?                  
        }
    }
}
person.init();

这题中,init是function,以person.init调用,其内部this就是person本身,而onclick回调是箭头函数,
其内部的this,就是父作用域的this,就是person,能得到name。

(2). 箭头函数不能作为构造函数,不能使用new

//构造函数
function Person(p){
    this.name = p.name;
}
//用箭头函数作为构造函数
var Person = (p) => {
    this.name = p.name;
}
//由于this必须是对象实例,而箭头函数是没有实例的,此处的this指向别处,不能产生person实例。

(3). 箭头函数没有arguments,caller,callee

/*常规函数使用arguments*/
function test1(a){
  console.log(arguments);   //1
}
/*箭头函数不能使用arguments*/
var test2 = (a)=>{console.log(arguments)}  //ReferenceError: arguments is not defined
/*箭头函数使用reset参数...解决*/
let test3=(...a)=>{console.log(a[1])} //22

test1(1);
test2(2);
test3(33,22,44);

(4).箭头函数通过call和apply调用,不会改变this指向,只会传入参数

var obj = {
  value:1,
  add:function(a){
    var f = (v) => v + this.value; //a==v,3+1
    return f(a);
  },
  addThruCall:function(a){
    var f = (v) => v + this.value; //此this指向obj.value
    var b = {value:2};
    return f.call(b,a); //f函数并非指向b,只是传入了a参数而已
    
  }
}
 
console.log(obj.add(3));    //4
console.log(obj.addThruCall(4));    //5

(5). 箭头函数没有原型属性

var a = ()=>{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

注意:
1.箭头函数返回对象时,要加一个小括号
2.箭头函数不能作为Generator函数,不能使用yield关键字
3.箭头函数不能换行

发布了23 篇原创文章 · 获赞 0 · 访问量 439
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览