ES6 화살표 함수 --- (화살표 함수와 일반 함수의 차이점)

화살표 기능

매개변수

// 只有一个参数
// f : 函数名称
// v :  函数参数
// v+v : 函数内容
 let f=v=> v+v

 console.log(f(10))  //20

두 개의 매개변수

// 两个参数需加小括号
 let ff=(v1,v2)=> v1+v2
 console.log(ff(10,20))

여러 문

// 有多个语句的时候需要加大括号
// 有多个语句的时候return不能省略
let fff=(a,b,c)=>
{
    
    
    console.log(a)
    return a+b+c
}
console.log(fff(1,1,1))

객체 반환

// 返回对象需要在对象的外面加小括号包起来
let  p=(name,age)=>({
    
    name:name,age:age})
console.log(p('张三',18))

데모 배열 정렬

//给数组里面的值排序
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)

지침

  • ES6에서는 화살표(=>)를 사용하여 정의할 수 있습니다.
  • 매개변수가 없거나 여러 매개변수가 필요하므로 ()를 추가해야 합니다.
  • 함수 본문에 여러 문이 있는 경우 중괄호 {}를 사용해야 하며 반환하려면 return을 사용해야 합니다.
  • 화살표 함수가 객체를 반환할 때 괄호로 묶어야 합니다.
  • 화살표 함수는 표현식을 더 간결하게 만듭니다.
  • 화살표 함수는 콜백 함수를 단순화할 수 있습니다.

이것이 가리키는 화살표 함수

일반 함수에서 this

  • this는 항상 obj.func 와 같은 직접 호출자를 나타냅니다(js의 this는 실행 컨텍스트임). func this obj 입니다.
  • 기본 경우(엄격하지 않은 모드에서는 'use strict'가 사용되지 않음) 직접 호출자를 찾을 수 없으며 이는 (규칙) 을 참조합니다 .
  • 엄격 모드에서는 직접 호출자가 없는 함수에서 정의되지 않습니다 .
  • call , apply , bind bound 사용 이것은 바인딩 객체를 나타냅니다.

화살표 함수에서 this

  • 화살표 함수는 자신의 this가 없고 this를 상속받으며, 기본적으로 정의된 객체(호스트 객체)를 가리키고 실행될 때 객체가 아니다. window, 화살표 기능 setTimeout, setInterval에서 편리하게 사용할 수 있어 편리합니다.
  • 화살표 함수에서 this의 고정점은 화살표 함수 내부에 this를 바인딩하는 메커니즘이 있기 때문이 아니라 화살표 함수 자체에는 this가 전혀 없기 때문에 내부 this는 this의 this입니다 . 외부 코드 블록.
// 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()

화살표 함수와 일반 함수의 차이점

포인트 1: 쓰기 측면에서: 화살표 함수는 일반 함수보다 간단합니다.
포인트 2:
- 일반 함수의 이것은 직접 호출자를 나타냅니다. 예: person.name의 this는 perspn을 나타냅니다
. 직접 호출자가 발견되지 않으면 this는 정의되지 않습니다.
- 비엄격 모드에서 직접 호출자가 발견되지 않으면 이것은 창입니다.
- 화살표 함수 this는 명확한 지점이 없으며, 부모 클래스가 부모 클래스인 경우 this는 부모 클래스를 직접 상속합니다. 클래스가 이것을 명확하게 가리키지 않으면 이것은 정의되지 않음을 나타냅니다.

화살표 함수 유의사항:
- 1. 매개변수가 하나인 경우 괄호 생략 가능
- 2. 매개변수가 여러 개/없음인 경우 괄호 생략 불가
- 3. 함수 본문이 한 문장일 경우 중괄호와 리턴 가능 생략
- 4. 함수 본문에 여러 문장이 있는 경우 중괄호와 리턴 생략 불가
- 5. this는 명확한 요점이 없고 this의 부모 클래스를 직접 상속받는다.

추천

출처blog.csdn.net/weixin_45753871/article/details/112008037