arrow function
a parameter
// 只有一个参数
// f ： 函数名称
// v : 函数参数
// v+v : 函数内容
let f=v=> v+v
console.log(f(10)) //20
two parameters
// 两个参数需加小括号
let ff=(v1,v2)=> v1+v2
console.log(ff(10,20))
multiple statements
// 有多个语句的时候需要加大括号
// 有多个语句的时候return不能省略
let fff=(a,b,c)=>
{
console.log(a)
return a+b+c
}
console.log(fff(1,1,1))
return object
// 返回对象需要在对象的外面加小括号包起来
let p=(name,age)=>({
name:name,age:age})
console.log(p('张三',18))
Demo Array Sorting
//给数组里面的值排序
let numbers=[10,2,11,15,22,36]
// let res=numbers.sort(function(a,b){
// return a-b
// })
let res=numbers.sort((a,b)=>a-b)
console.log(res)
Precautions
- ES6 allows the use of arrows (=>) to define
- No parameters or multiple parameters are required, you need to add ()
- When there are multiple statements in the function body, braces {} need to be used, and return must be used to return
- When an arrow function returns an object, it needs to be wrapped in parentheses
- Arrow functions make expression more concise
- Arrow functions can simplify callback functions
The arrow function this points to
this in ordinary functions
- this always represents its direct caller (the this of js is the execution context), such as obj.func , then this in func is obj
- In the default case (in non-strict mode, 'use strict' is not used), no direct caller is found, then this refers to window (convention)
- In strict mode, this is undefined in functions with no direct callers
- Use call , apply , bind bound this refers to the binding object
this in arrow functions
- The arrow function does not have its own this, and its this is inherited. By default, it points to the object (host object) where it is defined, not the object when it is executed. When it is defined, the environment may be window, and the arrow function It is convenient for us to use this conveniently in setTimeout and setInterval
- In the arrow function, the fixed point of this is not because there is a mechanism for binding this inside the arrow function. The actual reason is that the arrow function does not have its own this at all, so the internal this is the this of the outer code block.
// var p={
// name:"张三",
// say(){
// console.log("姓名："+this.name)
// }
// }
// p.say()
// var p={
// name:"张三",
// say(){
// var a=function(){
// console.log(this,this.name) //找不到name underfind
// }
// a()
// }
// }
// p.say()
//通过定义全局变量
// var p={
// name:"张三",
// say(){
// let self=this //把this赋值给变量量self
// var a=function(){
// console.log(self,self.name) //通过self调用
// }
// a()
// }
// }
// p.say()
//使用bind 绑定
// var p={
// name:"张三",
// say(){
// var a=function(){
// console.log(this.name)
// }.bind(this) //找不到this对象时，通过bind绑定this
// a()
// }
// }
// p.say()
//箭头函数
var p={
name:"张三",
say(){
var a=()=>{
console.log(this.name)
}
a()
}
}
p.say()
The difference between arrow function and ordinary function
Point 1: In terms of writing: arrow functions are simpler than ordinary functions.
Point 2:
- This of ordinary functions represents the direct caller, for example: this of person.name represents perspn
- In strict mode ('use strict'), If no direct caller is found, this is undefined
- In non-strict mode, if no direct caller is found, this is window
- The arrow function this does not have a clear point, its this directly inherits the parent class, if the parent class does not Clearly point to this, then this represents undefined
Points to note for arrow functions:
- 1. Parentheses can be omitted when there is only one parameter
- 2. Parentheses cannot be omitted when there are multiple/none parameters
- 3. When the function body has only one sentence, braces and return can be omitted
- 4. When the function body has multiple sentences, curly braces and return cannot be omitted
- 5. this does not have a clear point, and directly inherits the parent class this