너 ES6 - 3부 알잖아. - 고급스러워?

47471 단어 promisesclosureses6javascript

이 고급 섹션을 읽기 전에 ES6의 몇 가지 기능에 대해 설명했습니다.


카탈로그

  • IIFE
  • Closures
  • Synchronous vs Asynchronous
  • Promises
  • Async vs Await

    • 생활


    IIFE는 즉시 호출되는 함수 표현식을 가리킨다.iLife는 정의된 후 바로 실행되는 JavaScript 함수입니다.MDN Web Docs
    IIFE는 전통적인 함수와 달리 여러 번 호출할 수 있지만 IIFE는 아닙니다. IIFE는 한 번만 사용합니다.그래서 우리는 다시는 그것을 사용하지 않을 것이다.이것은 함수의 변수가 접근할 수 없기 때문에 변경할 수 없다는 것을 의미한다.
    IIFE의 장점 중 하나는 국부적 역할 영역을 만드는 것이다. 만약에 내가 많은 js 파일이 같은 변수 이름을 가지고 있다면 이것은 매우 중요하다.따라서 IIFE는 다시 쓰기를 피하고 변수의 범위를 보호합니다.
    함수를 호출할 수 있는 두 가지 방법이 있습니다.
  • 우선, 우리는 함수를 정의하고 호출하는 전통적인 방법
    • function printName(){
  let myName = "Mohamed"
  console.log(myName)
}

//Invoke
printName()
  • 초, iLife 사용.우리는 함수를 괄호에 포장한 다음에 함수 끝에 한 쌍의 괄호
    • 를 추가한다
    (우리의 기능) (호출)
    (우리의 기능) ()
    (function printName(){
  let myName = "Mohamed"
  console.log(myName)
})()
    사실상, 우리는 함수에 이름을 붙일 필요가 없다. 왜냐하면 그것은 단지 한 번만 호출되었기 때문이다.그래서 iLife는 보통 익명 함수입니다.
    (function(){
  let myName = "Mohamed"
  console.log(myName)
})()

    가방을 닫다


    패키지는 함수가 문법 범위 밖에서 실행되더라도 그 문법 범위를 기억하는 것을 말한다.따라서 패키지 닫기는 한 함수가 다른 함수나 다른 작용역에 정의된 변수를 사용하는 것을 말한다.따라서 이 변수를 연결하여 값을 업데이트합니다.

    이 예에서 printName 함수는 변수가 있습니다.그리고 우리는 이 범위 내에서 이 변수를 사용하도록 플러그인print 함수를 가지고 있습니다.그리고 print 함수를 호출하는 패키지 함수가 있습니다.마지막으로, 우리는 다른 범위 내에서 이 함수를 호출할 수 있다.
    다시 말하면, 우리는 이름 변수를 사용하는print 함수를 실행할 수 있다.이 변수는 패키지 함수 범위에서 선언되지 않습니다.그러나 이 변수는 printName 함수 범위 내에 있습니다.
    기본적으로 논리가 잘못되었습니다.그러나 사실상 이것이 끝과 그 작업 원리다.따라서 변수 이름의 값을 변경하거나 업데이트하면 패키지가 업데이트됩니다.
    function printName(){
   var name="Mohamed";
   //name="Mohamed Khaled";
   function print() {
      console.log(name);
   }

   closure(print);
}

function closure(func)
{    
    func();
}

printName();
    또 다른 예는 내부 함수의 변수 x를 가져오고 업데이트할 수 있다는 것이다
    function outer(){
  let x = 4
  function inner (){
    let y = x
    y = 16
    console.log(x)
    console.log(x*2)
    console.log(y)
  }

  closure(inner);  
}

function closure(inn)
{    
    inn();
}

outer()
    이것은 마지막 패키지 함수를 만드는 또 다른 방법이다.우리는 익명 함수로 내부 함수를 대체했고, 익명 함수는 한 그룹에서 여러 개의 값을 되돌려주었다.그리고 우리는 외부 함수를 실행한다.
    function outer(){
  let x = 4
  return function (){
    let y = x
    y = 16
    return [x,x*2,y]
  }
}

//IIFE
console.log(outer()());

//let res = outer()
//console.log(res());
    다른 예를 살펴보자. 그것은 폐쇄된 간단한 계수기를 사용하는 것이다.어쨌든, 나는 당신이++n을 사용해서 그 중의 차이를 보는 것을 건의합니다.
    function counter(n){
  return function (){
    return n++
  }
}

let res = counter(1)
console.log(res());
console.log(res());
console.log(res());
console.log(res());
console.log(res());
    우리들은 더욱 복잡한 문제를 깊이 연구합시다.이 코드의 출력을 원하십니까?생각해봐!!
    for(var i=0;i<10;i++){
    setTimeout(function(){
        console.log(i);
    },100);
}
    생각해보니까출력은 계수기 i의 마지막 값, 즉 10이다.
    i는 전역적으로 정의된 변수이기 때문이다.폐쇄 때문이야.마찬가지로 Clousure는 다른 범위에서 정의된 변수의 마지막 값을 사용합니다.
    나는 네가 이 문제를 어떻게 해결하는지 알고 싶다고 생각한다.네, 한 가지 해결 방안만 있는 것이 아닙니다.그 중 하나는 let을 사용하여 계수기 i를 만드는 것입니다. 왜냐하면 let은 전역 작용역이 아니라 국부 작용역이기 때문입니다.
    for(let i=0;i<10;i++){
    setTimeout(function(){
        console.log(i);
    },100);
}
    우리는 즉시 실행되는 IIFE 함수를 사용하여 그것을 풀 수 있다.그래서 패키지를 닫고 set Timeout을 복구합니다.
    function closure (index){
    setTimeout(function(){
        console.log(index)
    },100)
}

for(var i=0;i<10;i++){
    (closure)(i)
}

    동기식 및 비동기식

    동기화 프로그래밍



    동기화 프로그래밍은 코드가 줄마다, 함수별로 실행되는 것을 의미합니다.그래서 너는 두 함수를 동시에 실행할 수 없다.

    비동기 프로그래밍



    비동기 함수는 세 개의 간단한 단어로'기다릴 수 있다'는 것을 나타낸다.다시 말하면 함수가 다른 함수가 실행될 때 실행될 수 있다는 것을 의미합니다.따라서 동결 프로그램 없이 두 함수를 동시에 실행할 수 있습니다.
    비동기 함수 Web APIs 에는 많은 비동기 함수가 포함되어 있습니다.JS에는 set Time Out, set Interval, Promises, 이벤트 처리 프로그램 등 많은 내장된 비동기 함수가 있다.
    리셋 함수라는 함수도 있는데, 비동기 함수가 끝난 후에 실행한다
    다음 예에서 getStudent 함수를 정의합니다. 이 함수는 리셋 함수를 매개 변수로 합니다.그리고 우리는 리셋 함수를 호출하여 학생들의 이름과 나이를 되돌려 주고 응답을 2초 늦추었다.
    마지막으로 getStudent를 호출하고 리셋 함수를 매개 변수로 전달합니다. 이 함수는 전달이 2초 지연될 때 호출됩니다.
    출력, 마지막 컨트롤러.로그 문장이 먼저 실행됩니다. 리셋 함수의 실행이 2초 지연되기 때문에 출력이 지연됩니다.
    const getStudent = callback => {
    setTimeout(() => {
       callback ({ name: 'Mohamed', age: 23 })
    }, 2000)
}

getStudent(student => {
    console.log("This is executed second")
    console.log(student.name, student.age)
})

console.log("This is executed first")

    승낙


    무엇이 약속입니까?


    Promise는 JS에 내장된 비동기 함수로 비동기 코드를 더욱 쉽게 처리할 수 있습니다.
    약속은 일종의 비동기적인 조작으로 어떤 점에서 완성하고 가치를 창출할 수 있다.그래서 약속이 생겼습니다. 우리는 조작을 시도해 보겠습니다.만약 조작이 성공적으로 실행된다면, 우리는 해결이라고 불리는 약속을 실현할 것이다.만약 실패한다면 우리는 거절할 것이다.그래서 프로미스는 비동기적인 조작을 처리한다.

    어떻게 약속을 창조합니까?


    우리는 Promise라는 구조 함수를 사용합니다. 이것은 실행기 함수를 받아들입니다.이 함수는 작업을 실행하고 약속을 해석하거나 거부합니다.
    이게 첫 번째 약속이에요.
    let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise done')
    resolve('done')
  }, 2000)
})

    어떻게 약속이 효과가 있는지 알 수 있습니까?


    약속의 결과가 결심인지 거절인지 안다.우리는 then과catch를 사용하여 결과를 얻는다.
  • 그리고 약속 해석이 나타날 때 함수를 성공적으로 실행합니다.이것은 조작이 이미 성공적으로 끝났다는 것을 의미한다.그리고 또 다른 약속으로 돌아왔다.
  • 약속을 거부하거나 실패했을 때 Catch는 함수를 성공적으로 실행합니다.
    • let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise done')
    resolve('done')
    //reject('Is not done. Error')
  }, 2000)
})

p.then(() => console.log('promise resolved'))
 .catch(() => console.log('promise rejected'))

    확인 또는 거부된 값


    이제 결과가 결심이든 거절이든만약 우리가 이 결심이나 거절의 가치가 필요하다면?
    이것은 우리의 가치관이다. 결심은'완성'이고, 거절은'미완성'이다.오류그것을 얻기 위해서, 우리의then이나catch 함수는 매개 변수가 필요합니다.
    let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise done')
    resolve('Done')
    reject('Is not done. Error')
  }, 2000)
})

p.then((res) => console.log('promise resolved', res))
 .catch((err) => console.log('promise rejected', err))

    중첩된 승낙


    만약 우리의 약속이 끝났다면, 우리는 또 다른 약속을 이행하고 싶다.이것은 플러그인 약속이라고 부른다.
    let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise done')
    resolve('Done')
  }, 2000)
})

//Nested promise
p.then((res) => {
  p.then(res2 => console.log(res2))
})

    연쇄 승낙


    나는 너에게 약속을 끼워 넣는 것은 좋은 방법이 아니라고 말하고 싶다.그래서 연쇄 약속이 생겼다.
    이것은 우리의 함수가 우리의 약속 p를 되돌려주고 함수의 결과는 우리의 약속 p입니다. 마지막으로, 우리는 then을 사용하여 링크 약속을 할 수 있습니다.
    let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise done')
    resolve('Done')
  }, 2000)
})

//Chaining promise 
p.then((res) => {
  return p
}).then(res2 => console.log(res2))
//p.then((res) => p).then(res2 => console.log(res2))
    이게 마지막 코드예요.
    let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise done')
    resolve('Done')
  }, 2000)
})

//Nested promise
p.then((res) => {
  p.then(res2 => console.log(res2))
})

//Chaining promise 
p.then((res) => {
  return p
}).then(res2 => console.log(res2))

//Chaining promise 
p.then((res) => p).then(res2 => console.log(res2))

//Chaining promise .. Best practice and more readable
p
  .then((res) => p)
  .then(res2 => console.log(res2))
    내가 약속이 있을 때만약 어떤 약속이 거절된다면, 그것은 첫 번째 포획을 실행하고, 나머지는 무시할 것이다.
    let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise done')
    reject('Is not done. Error')
  }, 2000)
})

//Chaining promise 
p
  .then((res) => p)
  .then(res2 => console.log(res2))
  .catch((err1) => console.log('promise rejected 1', err1))
  .catch((err2) => console.log('promise rejected 2', err2))
    마지막으로, 당신은 우리의 답조 예시를 기억하십니까?나는 같은 산출로 약속을 할 것이다.이해해봐 LOL:)
    p=새 약속 (해결, 거부) =>{
    시간 초과 설정 () = > {
    오차를 가짜로 설정하기;
    if (오류)
    {
    위로하다로그 ("두 번째 실행, 완료")
    해석({이름:'무함메드', 나이:23})
    }
    기타
    {
    위로하다로그 ("두 번째 실행, 오류")
    거부("오류 404")
    }
    }, 2000)
    })
    const getStudent=()=>{
    되돌아오다
    }
    getStudent()
    .그리고 (학생=>{console.log(student.name,student.age)})
    .catch(err=>console.log('promise-rejected',err))
    위로하다로그("일단 실행")

    비동기식 및 대기

    비동기


    Async는 키워드이고 Await는 연산자입니다.ES8에 추가되었습니다.
    Async와Await는 우리로 하여금 약속 체인을 사용하는 것보다 더 좋은 방식으로 약속을 처리하게 하기 때문에 우리의 약속은 더욱 쉬워진다.
    Async는 하나의 함수와 함께 사용됩니다. 이것은 비동기 함수이지만 약속을 되돌려줍니다.
  • 반환 = = 확인
  • 던지기 = 거절
    • 이 예에서, 우리의 약속은 나의 이름을 해결하거나 되돌려 준다. "나는 무함메드다."
    async function myName(){
   return 'I am Mohamed'
}

myName().then( msg => console.log(msg))
    이 예에서, 우리의 약속은 isName "무함메드가 아닙니다"를 거절하거나 던집니다.
    async function isName(){
   throw 'Is not Mohamed'
}
isName().catch( msg => console.log(msg))

    기다리다


    기다림은 이 줄을 실행할 때까지 기다려야 한다는 것을 의미한다.await는 비동기 함수에서만 유효합니다.
    다음 예시에서 promise p와 myName이라는 비동기 함수가 있습니다.우리는 "이것이 먼저 집행된 것"이 첫 번째 줄임을 알아차릴 것이다. 그러나 우리는 우리의 약속 p가 끝날 때까지 기다려야 한다.마지막으로 약속이 끝나면 나머지는 집행되기 때문에 마지막 줄은'나는 무함메드'다.
    let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise done')
    resolve('Done')
  }, 2000)
})

async function myName(){
   console.log('This is executed first')
   await p
   //p
   console.log('I am Mohamed')
}

myName()
    또 다른 예
    let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise done')
    resolve('Done')
  }, 2000)
})

async function myName(){
   console.log('This is executed first')
   await p

   console.log('I am Mohamed')

   setTimeout(() => {
    console.log('Last line')
  }, 5000)

   console.log('I am Egyptian')
}

myName()
    약속이 결심인지 거절인지 알잖아.이제 기다림의 결과는 결심이나 거절의 결과다.
    하면, 만약, 만약...
    let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise done')
    resolve('Done')
  }, 2000)
})

async function myName(){
   let result = await p
   console.log('The result of await is : ' + result)
}
myName()
    만약 약속이 거절된다면, 그것은 자동으로 오류를 던질 것이다.따라서 우리는 약속 체인을 피하고 이런 방식으로 사용해야 한다.
    let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise done')
    //resolve('Done')
    reject('error 404')
  }, 2000)
})

async function myName(){
   let result = await p
   return result
}

myName()
  .then( res => console.log('The result of await is : ' + res))
  .catch( err => console.log('Error: ' + err))
    마지막으로, 당신은 우리의 답조 예시를 기억하십니까?우리는 리셋과 약속 두 가지 방식으로 이 점을 실현했다.
    지금, 나는 async를 사용하고 같은 출력을 기다릴 것이다.스스로 다시 한 번 이해해 보아라:) 하하: (
    p=새 약속 (해결, 거부) =>{
    시간 초과 설정 () = > {
    해석({이름:'무함메드', 나이:23})
    //거부("오류 404")
    }, 2000)
    })
    const getStudent=()=>{
    되돌아오다
    }
    비동기식 함수 fetchStudent() {
    학생 = getStudent() 대기
    학생으로 돌아가다
    }
    fetchStudent()
    .그리고 (학생 = > 콘솔. 로그 (student.name + ""+ student.age)
    .catch((err)=> 콘솔.로그("오류:"+err")
    위로하다로그("일단 실행")
  • 우리는 또한try-and-catch를 사용하여 오류를 처리할 수 있다
    • let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        let error = false;
        if(error)
        {
            console.log("This is executed second, Done")
            resolve({ name: 'Mohamed', age: 23 })
        }
        else
        {
            console.log("This is executed second, Error")
            reject()
        }
    }, 2000)
})

const getStudent = () => {
    return p
}

async function fetchStudent () {
    try { 
        const student = await getStudent()
        return student
    } catch (error) {
        console.log("Error")
    }
}

fetchStudent()
  .then(student => console.log(student.name + " " + student.age))
  .catch(() => console.log("error 404"))

console.log("This is executed first")

    결론


    읽어줘서 고마워요. 여기서 값진 정보를 찾았으면 좋겠어요.
    Here 환매 협의입니다. 원본 코드를 찾을 수 있고 언제든지 분리할 수 있습니다.
    YII 프레임워크 사용 - 응용 프로그램 만들기
    LVS의 NAT 모드 실행

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage