JavaScript的原生复习

一、函数的定义方式

1. 函数声明:

function 函数名() {
   //...
}

特点：无论在函数定义前，还是函数定义后调用，都能执行
为什么都能执行？？？
因为函数声明方式：函数提升

2.函数表达式

var 变量名=function() {
   //....
}

变量名()

特点：只能在函数定义后调用，才能执行

二、this指向

1. 在全局调用函数,函数中的this指向window
   function fn() { //this === window}

2. 详细this指向会有专门课程复习

三、new 函数，访问原型上方法

附上第一道面试题的代码：

//定义一个Foo函数
function Foo() {
 getName = function () { alert(1) };
 return this;
}

Foo.getName = function () { alert(2) };
Foo.prototype.getName = function () { alert(3) };

//函数表达式
var getName = function () { alert(4) }

//函数声明
function getName() { alert(5) }

//请写出输出结果
Foo.getName() //打印出2
getName()  //打印出4
Foo().getName()  //打印出1
getName()  //打印??? 1
new Foo.getName()  //打印？？？2
new Foo().getName()  //打印?? 3
new new Foo().getName()  //打印？？3

四、javaScript异步

1. 同步与异步

   1. 同步：符合咱们人的认知习惯，一行一行往下按照代码顺序执行，如果前面代码没有执行完，不会执行

      缺点：容易导致代码阻塞

   2. 异步：代码不会按照顺序执行，如果前面代码没有执行完，也会执行后面代码

      缺点：阅读代码有一定成本，包括调试

2. 异步的应用场景

   1. 数据请求（ajax）
   2. DOM操作:例如：点击事件
   3. 定时器操作：setTimeout,setInterval
   4. …

3. 管理异步

   1. 回调函数

      例如：
      $.ajax({
      …
      success:function(res) {
      $.ajax({

       success:function(res) {}
       })
      

      }
      })

      缺点：容易导致回调地狱

   2. Promise

      为了解决回调地狱问题，提出用Promise来管理异步代码
      
      //定义
      function request() {
       return new Promise((resolve,reject)=>{
         console.log(111)
        if(满足) {
          resolve(返值)  //用.then()接收
        }else {
          reject(返值)  //用.catch接收
        }
      })
      }
      
      //调用
      request().then(res=>{
      }).catch(error=>{
      })
      

   3. async/await

      async/await：用同步的方式来管理异步代码
      
      async写在function关键字前面
      
      async function fn() {
      
      
      }
      await必须要结合async使用
      
      async function request() {
      
         await getList()
      }
      
      
      await后面能跟什么值？？ await后面只可以跟做任意值 
      
      new Promise代码是同步的
      .then是同步的
      但.then中的回调函数是异步的
      
      

4. 第二道异步面试题开始

异步面试题代码如下：

async function async1(){
    console.log('async1 start')   
    await async2() 
    console.log('async1 end')    
}
async function async2() {
    console.log('async2')       
}
console.log('script start')    

setTimeout(() => { 
    console.log('setTimeout')   
});

async1()

new Promise((resolve=>{
    console.log('promise1')  
    resolve()
})).then(function () { 
    console.log('promise2')  
})
console.log('script end')     

运行结果：

1. script start
2. async1 start 
3. async2
4. promise1
5. script end
6. async1 end
7. promise2
8. setTimeout

代码执行顺序：同步-异步(先执行微任务->再执行)

异步：分宏任务代码和微任务代码(详细了解查一下event loop)

宏任务：

setTimeout
setInterval
setImmediate (Node独有)
requestAnimationFrame (浏览器独有)
I/O
UI rendering (浏览器独有)

微任务：

process.nextTick (Node独有)
async/await
Promise
Object.observe
MutationObserver