js：BOM（window物件事件、物件的定時器、this指向、js的執行機制）

阿新 • • 發佈：2020-07-28

1、BOM

（1）BOM概念

BOM（Browser Object Model）瀏覽器物件模型，他提供了獨立於內容與瀏覽器視窗進行互動的物件，核心是window

有一系列相關的物件域組成，每一個物件都有很多的屬性和方法

是瀏覽器廠商在各自的瀏覽器上定義的，相容性較差

把瀏覽器當做一個物件

頂級物件是window

學習的是瀏覽器視窗互動的一些物件

BOM包含DOM

（2）DOM（文件物件模型）

文件物件模型，把文件當做一個物件

頂級物件是document

主要是操作頁面的元素

是W3C的標準規範

（3）window物件

<body>
        <script>
            var 
 num=90;
           document.onkeyup=function(){
               window.alert(window.num);
           }
        </script>
    </body>

是js訪問瀏覽器的一個介面
是一個全域性物件，定義在全域性作用域中的變數、函式都會變成window物件的屬性和方法，在呼叫的時候可以省略window

2、window物件的常見事件

（1）視窗載入事件

<!DOCTYPE html>
<html>

    <head>
        <meta charset=" 
UTF-8">
        <title></title>
        <script>
            window.onload = function() {
                var b = document.getElementById("b");
                b.onclick = function() {
                    alert("hello");
                }
            }
        </script>
    </head>

    <body>
        <button id=" 
b">按鈕</button>
    </body>

</html>

有了window的onload事件以後可以把js程式碼放到頁面元素的前面，不用考慮載入順序的問題，因為onload是在頁面的全部內容載入完畢再去執行處理函式
使用傳統的事件註冊方式，onload事件只能使用一個，如果註冊多個的話會以最後一個為準。使用addEventListener沒有限制
存在的缺點是如果頁面的圖片較多，從使用者訪問到onload事件觸發需要經歷較長的時間，影響使用者的體驗

DOMContentLoaded事件：

　　　　<script>
            document.addEventListener("DOMContentLoaded",function(){
                alert("123");
            })
        </script>

DOMContentLoaded事件觸發時，僅當DOM載入完成，不包括css、圖片等，可以避免onload的缺點

（2）resize事件：瀏覽器的視窗大小變化的時候觸發

      <script>
            window.addEventListener("resize",function(){
                console.log("視窗變化了")
            })
        </script>

3、windows物件的定時器

（1）setTimeout函式：用於設定一個定時器，該定時器到期後執行函式，只調用一次函式

<head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var myfunction=function(){
                console.log("視窗變化了")
            }
            window.setTimeout(myfunction,3000);            
        </script>
    </head>

停止setTimeout定時器：

    <script>
            var myfunction=function(){
                console.log("視窗變化了")
            }
            window.setTimeout(myfunction,2000);    
            clearTimeout(myfunction);
        </script>

（2）setInterval定時器

<head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var myfunction=function(){
                console.log("視窗變化了")
            }
            window.setInterval(myfunction,2000);    
        </script>
    </head>

重複呼叫一個函式，每隔一段時間呼叫一次

關閉setInterval定時器：

window.clearInterval(myfunction);

4、this指向問題

（1）全域性作用域或者普通函式中this指向全域性物件window

<head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            console.log(this);
            function f(){
                console.log(this);
            }
            f();
        </script>
    </head>

定時器裡面的this指向window：

<script>
          setTimeout(function(){
              console.log(this);
          },1000)
        </script>

（2）方法中誰呼叫誰this就指向誰

<script type="text/javascript">
            var person = {
                num:12,
                sayHi:function(){
                    console.log(this);
                }
            }
            person.sayHi();
        </script>

（3）建構函式中，this指向建構函式的例項

<script type="text/javascript">
            function fun(){
                console.log(this)
            }
            var fun=new fun();
        </script>

5、js的執行機制

（1）js的執行機制

JavaScript語言的一大特點就是單執行緒,也就是說,同一個時間只能做一件事。這是因為Javascript這門指令碼語言誕生的使命所致，JavaScript 是為處理頁面中使用者的互動,以及操作DOM而誕生的。比如我們對某個DOM元素進行新增和刪除操作,不能同時進行。應該先進行新增,之後再刪除。
單執行緒就意味著,所有任務需要排隊,前一個任務結束,才會執行後一個任務。這樣所導致的問題是:如果JS執行的時間過長,這樣就會造成頁面的渲染不連貫,導致頁面渲染載入阻塞的感覺。
為了解決這個問題,利用多核CPU的計算能力, HTML5提出Web Worker標準,允許JavaScript指令碼建立多個執行緒。於是, JS中出現了同步和非同步。

<script>
           console.log(3);
           setTimeout(function(){
               console.log(2);
           },1000);
           console.log(1);
        </script>

（2）同步任務與非同步任務

<script>
           console.log(3);
           setTimeout(function(){
               console.log(2);
           },0);
           console.log(1);
        </script>

同步任務：

同步任務都在主執行緒上執行,形成一個執行棧。

非同步任務：
JS的非同步是通過回撥函式實現的，非同步任務在任務佇列裡面
一般而言，非同步任務有以下三種類型