1.箭头函数基础语法
1.1 ES3 函数语法
// 签字函数
function xxx(arg1, arg2) {
console.log(arg1)
console.log(arg2)
return arguments
}
// 匿名函数(三句话)
let xxx = function (arg1, arg2) {
console.log(arg1)
console.log(arg2)
return arguments
}
// 第一句话 声明xxx
// 第二句话 声明匿名函数
// 第三句话 把匿名函数赋值给xxx
1.2 箭头函数语法
特性:
只能做赋值,不能做声明
第一种写法【完整写法 —— 不省略参数个数,不省略函数体花括号】
1.参数个数 >= 2
2.函数体内语句个数 >= 2
let xxx = (arg1, arg2) => {
console.log(arg1)
console.log(arg2)
return arg1 + arg2
}
第二种写法【省略参数括号】
1.参数只要一个
2.函数体内语句个数 >= 2
let xxx = arg1 => {
console.log(arg1)
return arg1
}
第三种写法【省略函数花括号和return】
1.参数个数 >= 2
2.函数体内语句只要一句,且这一句会被return
let xxx = (arg1, arg2) => arg1 + arg2
// 假如你加了花括号,就必须把return同时加上去才能够返回arguments
let xxx = (arg1, arg2) => {
return arg1 + arg2
}
2.为了搞定难搞的this,我们搞出了箭头函数
ES3 支撑 this,关于this在ES3中的运用
请看this总结【1】—— this概览和this总结【2】—— call/apply和bind
ES6 的箭头函数弱化了this的用法
2.1 箭头函数不绑定this
在ES3里,this是Function隐蔽的第一个参数
而且this是什么,是不肯定的,由于每一个被新定义的函数都邑建立本身的this值
function Person() {
// Person() 组织函数定义 `this`作为它本身的实例.
this.age = 0;
setInterval(function growUp() {
// 在非严厉形式, growUp()函数定义 `this`作为全局对象,
// 与在 Person()组织函数中定义的 `this`并不相同.
this.age++;
}, 1000);
}
let p = new Person();
差别函数里的this能够老是不一样,而且没有什么规律和逻辑,很难运用
因而,我们在挪用函数的时刻,高等写法就是运用call
如许,我们在代码未执行前就可以肯定this的值是什么
function xxx(/*this,*/arg1, arg2) {
console.log(this, arg1, arg2)
}
xxx.call(window, 1, 2) // Window 1 2
箭头函数里的this不会被call转变
let test1 = () => {
console.log(this)
}
test1.call({name: 'bruce'}) // window
2.2 怎样运用箭头函数里的this
划重点:把箭头函数里的this当作平常变量对待!!!!
划重点:把箭头函数里的this当作平常变量对待!!!!
划重点:把箭头函数里的this当作平常变量对待!!!!
function Person() {
this.age = 0;
let a = 0
setInterval(() => {
console.log(a) // 叨教a去哪儿找?Person的作用域
this.age++; // 叨教this去哪儿找?Person的作用域
// 如许,|this| 就可以正确地指向person对象,你也再也不必管call的第一个参数究竟传的是啥了
}, 1000);
}
let p = new Person();
3.运用箭头函数使得代码变得简约
平常用于回调函数
// 把数组内每一个数都换做其平方数
// 然后再将每一个数都减2
// 【运用map要领】
// 叨教该怎样写??
// ES3写法
let arr = [1, 3, 4, 6, 7]
arr.map(function (number) {
return number * number
}).map(function (number) {
return number - 2
})
// ES6写法
arr.map(number => number * number).map(number => number - 2)
4.ES6Function作为要领时的简写
let obj = {
console: function (a) {
console.log(a)
}
}
// 等价于
let obj = {
console(a) { // 删去了冒号和function关键字
console.log(a)
}
}
5.箭头函数别的学问【抄mdn的】
5.1箭头函数没有arguments
let arrow = p1 => {
console.log(arguments) // 报错:arguments is not defined
}
arrow('xxx')
5.2箭头函数不可作为组织函数且没有prototype属性
let Foo = () => 'test'
let f1 = new Foo() // 报错:Foo is not a constructor
console.log(Foo.prototype) // undefined