JavaScript變量聲明如何提升

這篇文章主要講解了“JavaScript變量聲明如何提升”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript變量聲明如何提升”吧！

變量

• 一個變量只定義但沒有賦初值，默認(rèn)值是 undefined

• 定義變量時必須寫var（不用var定義，而直接將值賦給它，隨不引發(fā)報錯，但會產(chǎn)生作用域問題）

• 你可以提前使用一個稍后才聲明的變量，而不會引發(fā)異常

• 再執(zhí)行所有代碼前，js有預(yù)解析階段，會預(yù)讀所有變量的定義

• 注意：變量聲明提升只提升定義不提升值

console.log(a);   // 先使用變量var a = 12;     // 后定義變量

• 基本數(shù)據(jù)類型

• 當(dāng)我們需要將對象銷毀、數(shù)組銷毀或者刪除事件監(jiān)聽時、通常將他們設(shè)置為null

• undefined既是值又是一種類型，這種類型只有它自己一個值

• 字符串常用方法

• substring(a, b) 從a開始到b結(jié)束的子串，不包括b處；如果省略第二個參數(shù)，返回的子串會一直到字符串的結(jié)尾，若a > b，會自動調(diào)整為小數(shù)在前

• substr(a, b) 從a開始長度為b的子串；如果省略第二個參數(shù)，返回的子串會一直到字符串的結(jié)尾；a可以是負(fù)數(shù)，表示倒數(shù)位置

• slice(a, b) 從a開始到b結(jié)束的子串，不包括b處；兩個參數(shù)都可以是負(fù)數(shù)；a必須小于b，否則沒有結(jié)果（空串）

• 所有數(shù)字部分大小、不分整浮、不分正負(fù)，都是數(shù)字類型

• 較大或較小數(shù)（絕對值較?。┛梢詫懗煽茖W(xué)計數(shù)法3e8就是3^8

• 二進制數(shù)值以0b開頭，八進制以0開頭，十六進制以0x開頭

• NaN，not a number，即“不是一個數(shù)”，但它是一個數(shù)字類型的值（數(shù)學(xué)運算中，若結(jié)果不能得到數(shù)字，結(jié)果往往都是NaN，NaN == NaN結(jié)果為false）

• Infinity無窮大或無窮小

• Number

• String

  方法	功能
  charAt()	得到指定位置字符(越界為空串)
  substring()	提取子串
  substr()	提取字串
  slice()	提取子串
  toUpperCase()	將字符串變?yōu)榇髮?/td>
  toLowerCase()	將字符串變?yōu)樾?/td>
  indexOf()	檢索字符串（模式匹配）

• Boolean

• Undefined

• Null

• 復(fù)雜數(shù)據(jù)類型

• Object

• Array

• Function

• RegExp

• Date

• Map

• Set

• ……

可以用來檢測值或變量的類型

typeof 5;          // numbertypeof 'niubi';   // string

使用**Number()**函數(shù)

// 字符串 --> 數(shù)字Number('123');        // 123Number('123.4');      // 123.4Number('123年');       // NaNNumber('2e3');         // 2000Number('');            // 0Number('1 + 1');       // NaN// 布爾值 --> 數(shù)字Number(true);         // 1Number(false);        // 0// undefined 和 null --> 數(shù)字Number(undefined);    // NaNNumber(null);         // 0

**parseInt()**函數(shù)將字符串轉(zhuǎn)為整數(shù)

將自動截掉第一個非數(shù)字字符之后的所有字符

parseInt('3.14');       // 3parseInt('3.14是圓周率');   // 3parseInt('圓周率是3.14');    // NaNparseInt('3.99');           // 3

**parseFloat()**函數(shù)將字符串轉(zhuǎn)為浮點數(shù)

自動截掉第一個非數(shù)字字符、非小數(shù)點之后的所有字符

parseFloat('3.14');         // 3.14parseFloat('3.14是圓周率');   // 3.14parseFloat('圓周率是3.14');   // NaNparseFloat('3.99');          // 3.99// 會自動將true和false轉(zhuǎn)為字符串，結(jié)果為NaN

**String()**函數(shù)

變成“長得相同”的字符串。科學(xué)計數(shù)法和非10進制數(shù)字會轉(zhuǎn)為10進制的值

String(123);       // '123'String(123.4);     // '123.4'String(2e3);       // '2000'String(NaN);       // 'NaN'String(Infinity);  // 'Infinity'String(0xf);       // '15'String(true);      // 'true'String(false);     // 'false'String(undefined);   // 'undefined'String(null);        // 'null'

**Boolean()**函數(shù)

// 數(shù)字 --> 布爾值    0和NaN轉(zhuǎn)為false，其他轉(zhuǎn)為trueBoolean(123);    // trueBoolean(0);      // falseBoolean(NaN);    // falseBoolean(Infinity);    // trueBoolean(-Infinity);    // true// 布爾值 --> 布爾值     空串轉(zhuǎn)為false，其他轉(zhuǎn)為true;Boolean('');     // falseBoolean('abc');    // trueBoolean('false');  // true// undefined 和 null --> 布爾值      轉(zhuǎn)為falseBoolean(undefined);      // falseBoolean(null);           // false

**prompt()**函數(shù)函數(shù)彈出輸入框

var num = prompt('請輸入第一個數(shù)字');    // 返回值為string

表達式與運算符

如果參與數(shù)學(xué)運算的某操作數(shù)不是數(shù)字型，那么JavaScript會自動將此操作數(shù)轉(zhuǎn)換位數(shù)字型

隱式轉(zhuǎn)換的本質(zhì)是內(nèi)部調(diào)用Number()函數(shù)

3 * '4' 	 // 12true + true    // 2false + 2     // 23 * '2天'     // NaN

Math.pow(2, 3)      // 2^3Math.sqrt(81)      // 9Math.ceil()        // 向上取整Math.floor()       // 向下取整

===     // 全等于!==     // 不全等于// 兩個等號 == 運算符不比較值的類型，它會進行隱式轉(zhuǎn)換后比較值是否相等1 == true      // true1===true       // false0 == false     // true0 === false    // false0 == undefined  // false0 === undefined   // falseundefined == null  // trueundefined === null    // false

**isNaN()**函數(shù)判斷變量值是否為NaN

但isNaN()也不好用，它的機理是：只要該變量傳入Number()的執(zhí)行結(jié)果是NaN，則isNaN()函數(shù)都會得到true

a && b a真，值為b；a假，值為a

a||b a真，值為a，a假，值為b

邏輯運算優(yōu)先級：非 --> 與 --> 或

綜合運算運算順序：非 --> 數(shù)學(xué)運算 --> 關(guān)系運算 --> 邏輯運算

隨機數(shù)函數(shù)Math.random()

得到[a, b]區(qū)間的整數(shù)，公式為 parseInt(Math.random() * (b - a + 1)) + a;

數(shù)組

var arr = ['A', 'B', 'C', 'D']; var arr = new Array('A', 'B', 'C', 'D');var arr = new Array(4);     長度為4的數(shù)組，每一項都是undefined

下標(biāo)訪問越界時返回undefined

var arr = [2, 6, 7, 3];arr[6] = 4;console.log(arr);此時下標(biāo)越界，不會報錯，而是會將數(shù)組擴展，下標(biāo)6處為4，中間為empty

Array.isArray()方法可以用來檢測數(shù)組

函數(shù)

函數(shù)定義

// 常規(guī)function fun() {
    // 函數(shù)體語句}// 匿名函數(shù)var fun = function () {
    // 函數(shù)體語句}

函數(shù)聲明的提升

fun();function fun() {    // 在預(yù)解析階段會被提升
    alert("函數(shù)被執(zhí)行");}// 如果函數(shù)時用函數(shù)表達式的寫法定義的，則沒有提升特性fun();     // 引發(fā)錯誤var fun = function () {
    alert("函數(shù)被執(zhí)行");}

函數(shù)優(yōu)先提升

// 函數(shù)優(yōu)先提升// 函數(shù)表達式后提升； 變量聲明提升，無法覆蓋提升的函數(shù)fun();    // 彈出Bvar fun = function () {
    alert('A');}function fun() {
    alert('B');}fun();     // 彈出A

實參與形參個數(shù)不同

1. 實參個數(shù)多于形參，沒有形參接收它

2. 實參個數(shù)少于形參，沒有接收到實參的形參值為undefined

arguments 類數(shù)組對象

1. 函數(shù)內(nèi)arguments表示它接收到的實參列表，它是一個類數(shù)組對象

2. 類數(shù)組對象：所有屬性均從0開始的自然數(shù)序列，并且有l(wèi)ength屬性，和數(shù)組類似可以用方括號書寫下標(biāo)訪問對象的某個屬性值，但不能調(diào)用數(shù)組的方法

var聲明與省略

在函數(shù)外，用var聲明的變量為全局變量，不用var聲明的變量為全局變量

在函數(shù)中，用var聲明的變量為局部變量，不用var聲明的變量為全局變量

同為全局變量，同為window對象的其中一個屬性，用var聲明的變量不可以刪除，不用var聲明的變量可以刪除！

返回值

function sum(a, b) {
    return a + b;}var result = sum(3, 5);    // 返回值可被變量接收

若函數(shù)沒有返回值，則對它打印的結(jié)果是undefined

sort(a, b)方法

這個函數(shù)中的a、b分別表示數(shù)組中靠前和靠后的項，如果需要將它們交換位置，則返回任意正數(shù)；否則就返回負(fù)數(shù)

var arr = [33, 22, 11, 55];arr.sort(function (a, b) {
    if (a > b) {
        return 1;
    }
    return -1;});

變量賦值

數(shù)組深度克隆

var arr1 = [1, 2, 3, [4, 5]];function deepClone(arr) {
    var result = [];
    for (var i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            result.push(deepClone(arr[i]));
        } else {
            result.push(arr[i]);
        }
    }
    return result;}

局部函數(shù)

定義在一個函數(shù)內(nèi)部的函數(shù)是局部函數(shù)

只能在函數(shù)內(nèi)部調(diào)用

function fun() {
    function inner() {
        console.log('你好');
    }
    inner();   // 調(diào)用inner函數(shù)}fun();

作用域鏈

在函數(shù)嵌套中，變量會從內(nèi)到外逐層尋找它的定義

var a = 10;var b = 20;function fun() {
    var c = 30;
    function inner() {
        var a = 40;
        var d = 50;
        console.log(a, b, c, d);   // 使用變量時，js會從當(dāng)前層開始，逐層向外尋找定義
    }
    inner();}fun();

閉包

閉包是函數(shù)本身和該函數(shù)聲明時所處的環(huán)境狀態(tài)的組合

函數(shù)能夠”記憶住“其定義時所處的環(huán)境，即使函數(shù)不在其定義的環(huán)境中被調(diào)用，也能訪問定義時所處環(huán)境的變量

在js中，每次創(chuàng)建函數(shù)時都會創(chuàng)建閉包，但是閉包特性往往需要將函數(shù)”換一個地方“執(zhí)行，才能被觀察出來

閉包的功能：

1. 記憶性：當(dāng)閉包產(chǎn)生時，函數(shù)所處環(huán)境的狀態(tài)會始終保持在內(nèi)存中，不會在外層函數(shù)調(diào)用后被自動清除。

   function fun() {
       var name = 'niubi';
       function innerFun() {
           alert(name);
       }
       return innerFun;}var inn = fun();inn();     // 內(nèi)部函數(shù)被移動到了外部執(zhí)行

2. 模擬私有變量

   function fun() {
       var a = 0;
       return function() {
           alert(a);
       }}var getA = fun();getA();

function fun() {
    var a = 0;
    return {
        getA: function () {
            return a;
        },
        add: function () {
            a++;
        }, 
        pow: function () {
            a *= 2;
        }
    };}var obj = fun();console.log(obj.getA());obj.add();

注意：不能濫用閉包，否則會造成網(wǎng)頁的性能問題，嚴(yán)重時可能導(dǎo)致內(nèi)存泄漏。

立即調(diào)用函數(shù)IIFE

特殊寫法，一旦被定義，就立即被調(diào)用

函數(shù)必須轉(zhuǎn)為函數(shù)表達式才能被調(diào)用

(function () {       // 通過圓括號將函數(shù)變?yōu)楸磉_式
    // statements})();+function() {
    alert(1);}();-function() {
    alert(1);}();

1. 可以用來給變量賦值

   var age = 12;var sex = '男';var title = (function () {
       if (age < 18) {
           return '小朋友';
       } else {
           if (sex == '男') {
               return '先生';
           } else {
               return '女士';
           }
       }})();

2. 在一些場合（如for循環(huán)中）將全局變量變?yōu)榫植孔兞?，語法更緊湊

var arr = [];for (var i = 0; i < 5; i++) {
    arr.push(function () {
        alert(i);     
    });}arr[2]();    // 彈出5

解決方法：

var arr = [];for (var i = 0; i < 5; i++) {
    (function (i)  {
        arr.push(function() {
            alert(i);
        });
    })(i);}arr[2]();   // 彈出2

DOM

nodeType常用屬性值

節(jié)點的nodeType屬性可以顯示這個節(jié)點具體的類型

document對象

訪問元素節(jié)點主要依靠document對象

幾乎所有DOM的功能都被封裝到了document對象中

document對象也表示整個HTML文檔，它是DOM節(jié)點樹的根

訪問元素節(jié)點的常用方法

document.getElementById()

如果頁面上有相同id的元素，則只能得到第一個

<p id = "box">我是一個盒子</p><p id = "para">我是一個段落</p>

var box = document.getElementById('box');var para = document.getElementById('para');

getElementsByTagName()

數(shù)組方便遍歷，從而可以批量操控元素節(jié)點

即使頁面上只有一個指定標(biāo)簽名的節(jié)點，也將得到長度為1的數(shù)組

任何一個節(jié)點元素也可以調(diào)用getElementsByTagName()方法，從而的到其內(nèi)部的某種類的元素節(jié)點

<p>段落</p><p>段落</p><p>段落</p><p>段落</p>

var ps = document.getElementsByTagName('p');

getElementsByClassName()

<p class = "spec">盒子</p><p class = "spec">盒子</p><p class = "spec">盒子</p><p class = "spec">盒子</p>

var spec_ps = document.getElementsByClassName('spec');

querySelector()

該方法只能得到頁面上一個元素，如果有多個元素符合條件，則只能得到第一個元素

<p id = "box1">
    <p>段落</p>
    <p class = "spec">段落</p>
    <p>段落</p>
    <p>段落</p></p>

var the_p = document.querySelector('#box1 .spec');

querySelectAll()

即使頁面上只有一個符合選擇器的節(jié)點，也將得到長度為1的數(shù)組

延遲運行

使用window.onload = function() {}事件（給window對象添加事件監(jiān)聽，onload表示頁面都加載完畢了），使頁面加載完畢后，再執(zhí)行指定的代碼

節(jié)點的關(guān)系

注意：文本節(jié)點也屬于節(jié)點，所以我們一般情況下會排除文本節(jié)點的干擾（用只考慮元素節(jié)點）

書寫常見節(jié)點關(guān)系函數(shù)

<body>
    <p id = "box1">
        <p>段落</p>
        <p class = "spec">段落</p>
        <p>段落</p>
        <p>段落</p>
	</p>
    <script>
        var box = document.getElementById('box1');
        var spec = document.getElementsByClassName('spec');
        // 封裝一個函數(shù)，返回元素的所有子元素節(jié)點，類似children的功能
        function getChildren(node) {
            var children = [];
            // 遍歷node這個節(jié)點的所有子節(jié)點，判斷每一個字節(jié)的nodeType屬性是不是1
            // 如果是1， 就推入結(jié)果數(shù)組
            for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i] == 1) {
                    children.push(node.childNodes[i]);
                }
            }
            return children;
        }
       
        // 封裝一個函數(shù)，這個函數(shù)可以返回元素的前一個元素兄弟節(jié)點，類似previousElementSibling的功能
        function getElementPrevSibling(node) {
            var o = node;
            while (o.previousSibling != null) {
                if (o.prebiousSibling.nodeType == 1) {
                    // 結(jié)束循環(huán)，找到了
                    return o.previousSibling;
                }
                o = o.previousSibling;
            }
            return null;
        }
        
        // 封裝一個函數(shù)，該函數(shù)可以返回元素的所有元素兄弟節(jié)點
        function getAllElementSibling(node) {
            var prevs = [];
            var nexts = [];
            var o = node;
            while (o.previousSibling != null) {
                if (o.previousSibling.nodeType == 1) {
                    prevs.unshift(o.previousSibling);
                }
                o = o.previousSibling;
            }
            o = node;
            while (o.nextSibling != null) {
                if (o.nextSibling.nodeType == 1) {
                    nexts.push(o.nextSibling);
                }
                o = o.nextSibling;
            }
            return prevs.concat(nexts);
        }
    </script></body>

改變元素節(jié)點中的內(nèi)容

改變元素節(jié)點中的內(nèi)容可以使用兩個相關(guān)屬性

• innerHTML

  能以HTML語法設(shè)置節(jié)點中的內(nèi)容

• innerText

  只能以純文本的形式設(shè)置節(jié)點中的內(nèi)容

<body>
    <p id = "box"></p>
    <script>
        var oBox = document.getElementById('box');
        oBox.innerHTML = '<ul><li>牛奶</li><li>咖啡</li></ul>';    // 可以解析HTML語法
        // oBox.innerText = 'niub';    // 里面只能是純文本
    </script></body>

改變元素節(jié)點的CSS樣式

相當(dāng)于在設(shè)置行內(nèi)style屬性

oBox.style.backgroundColor = 'red';     // CSS 屬性要寫成駝峰形式oBox.style.backgroundImage = 'url(images/1.jpg)';oBox.style.fontSize = '32px';

改變元素節(jié)點的HTML屬性

標(biāo)準(zhǔn)的W3C屬性，如src、href等，只需直接打點進行更改即可

oImg.src = 'images/2.jpg';

不符合W3C標(biāo)準(zhǔn)的屬性，要使用setAttribute()和getAttribute()來設(shè)置、讀取

<body>
    <p id = "box"></p>
    <script>
        var box = document.getElementById('box');
        box.setAttribute('data-n', 10);    // 添加data-n屬性，值為10
        var n = box.getAttribute('date-n');
        alert(n);
    </script></body>

節(jié)點的創(chuàng)建

document.createElement()方法用于創(chuàng)建一個指定tagname的HTML元素

var op = document.createElement('p');

新創(chuàng)建出的節(jié)點是”孤兒節(jié)點“，并沒有被掛載到DOM樹上，無法看見他

必須繼續(xù)使用appendChild() 或 insertBefore() 方法將孤兒節(jié)點插入到DOM樹上

任何已經(jīng)在DOM樹上的節(jié)點，都可以調(diào)用appendChild() 方法，它可以將孤兒節(jié)點掛載到他的內(nèi)部，成為它的最后一個子節(jié)點

父節(jié)點.appendChild(孤兒節(jié)點);

任何已經(jīng)在DOM樹上的節(jié)點，都可以調(diào)用insertBefore() 方法，它可以將孤兒節(jié)點掛載到它的內(nèi)部，成為它的”標(biāo)桿子節(jié)點“之前的節(jié)點

父節(jié)點.insertBefore(孤兒節(jié)點, 標(biāo)桿節(jié)點);

移動節(jié)點

如果將已經(jīng)掛載到DOM樹上的節(jié)點成為appendChild()或者insertBefore()的參數(shù)，這個節(jié)點將會被移動

新父節(jié)點.appendChild(已經(jīng)有父親的節(jié)點);新父節(jié)點.insertBefore(已經(jīng)有父親的節(jié)點, 標(biāo)桿子節(jié)點);// 這意味著一個節(jié)點不能同時位于DOM樹的兩個位置

刪除節(jié)點

removeChild() 方法從DOM中刪除一個子節(jié)點

父節(jié)點.removeChild(要刪除子節(jié)點);

克隆節(jié)點

cloneNode()方法可以克隆節(jié)點，克隆出的節(jié)點是”孤兒節(jié)點“

參數(shù)是boolean類型，表示是否采用深度克隆，若為true，則該節(jié)點的所有后代節(jié)點也都會被克隆，若為false，則只克隆該節(jié)點本身

var 孤兒節(jié)點 = 老節(jié)點.cloneNode();var 孤兒節(jié)點 = 老節(jié)點.cloneNode(true);

事件

• 常見的鼠標(biāo)事件監(jiān)聽

onmouseenter不冒泡，onmouseover冒泡

• 常見的鍵盤事件監(jiān)聽

• 常見的表單事件監(jiān)聽

• 常見的頁面事件監(jiān)聽

當(dāng)盒子嵌套時事件監(jiān)聽的執(zhí)行順序

<p id = "box1">
    <p id = "box2">
        <p id = "box3"></p>
    </p></p><script>
    var oBox1 = document.getElementById('box1');
    var oBox2 = document.getElementById('box2');
    var oBox3 = document.getElementById('box3');
    
    oBox1.onclick = function () {
        console.log('box1');
    };
    
    oBox2.onclick = function () {
        console.log('box2');
    };
    
    oBox3.onclick = function () {
        console.log('box3');
    };
    // 點擊最里面的盒子，傳播方向是從內(nèi)到外</script>

事件傳播

事件的傳播是：先從外到內(nèi)，然后再從內(nèi)到外（最內(nèi)層不是先捕獲再冒泡，而是根據(jù)書寫代碼順序決定。同名盒子同階段與順序有關(guān)。如果給元素設(shè)置相同的兩個或多個同名事件，則DOM0級寫法后面寫的會覆蓋先寫的；而DOM2級會按順序執(zhí)行）

onxxxx（DOM0級事件監(jiān)聽）只能監(jiān)聽冒泡階段，所以觀察出來的結(jié)果是從內(nèi)到外

addEventListener()方法（DOM2級事件監(jiān)聽）

oBox.addEventListener('click'，function() {
 // 這里是事件處理函數(shù)}, true);     // 第三個參數(shù)若為true，監(jiān)聽捕獲階段，為false，監(jiān)聽冒泡階段

事件對象

事件處理函數(shù)提供一個形式參數(shù)，它是一個對象，封裝了本次事件的細節(jié)

這個參數(shù)通常用單詞event或字母e來表示

oBox.onmousemove = function (e) {
 // 對象e就是這次事件的“事件對象”};

對象相關(guān)屬性

• 鼠標(biāo)位置相關(guān)屬性

觸發(fā)這次事件時鼠標(biāo)的位置的屬性

• e.charCode和e.keyCode屬性

e.charCode屬性通常用于onkeypress事件中，表示用戶輸入的字符的“字符碼”

字符	字符碼
數(shù)字0 ~ 數(shù)字9	48 ~ 57
大寫字母A ~ Z	65 ~ 90
小寫字母 a ~ z	97 ~ 122

e.keyCode屬性通常用于onkeydown和onkeyup事件中，表示用戶按下的按鍵的“鍵碼”

按鍵	鍵碼
數(shù)字0 ~ 數(shù)字9	48 ~ 57
字母部分大小寫 a ~ z	65 ~ 90
四個方向鍵 ← ↑ → ↓	37、38、39、40
回車鍵	13
空格鍵	32

阻止默認(rèn)事件

e.preventDefault()方法用來阻止事件產(chǎn)生的“默認(rèn)動作”

e.stopPropagation()方法用來阻止事件繼續(xù)傳播

批量添加事件監(jiān)聽性能問題

• 每一個事件監(jiān)聽注冊都會消耗一定的系統(tǒng)內(nèi)存，而批量添加事件會導(dǎo)致監(jiān)聽數(shù)量太多，內(nèi)存消耗會很大

事件委托

每一個事件監(jiān)聽注冊都會消耗一定的系統(tǒng)內(nèi)存，而批量添加事件會導(dǎo)致監(jiān)聽數(shù)量太多，內(nèi)存消耗會很大（當(dāng)有大量類似元素需要批量添加事件監(jiān)聽時，使用事件委托可以減少內(nèi)存開銷）

利用事件冒泡機制，將后代元素事件委托給祖先元素

注意：不能委托不冒泡的事件給祖先元素

當(dāng)有動態(tài)元素節(jié)點上樹時，使用事件委托可以讓新上樹的元素具有事件監(jiān)聽

相關(guān)屬性

定時器

setInterval()函數(shù)可以重復(fù)調(diào)用一個函數(shù)，在每次調(diào)用之間具有固定的時間間隔

setInterval(function () {
    // 這個函數(shù)將自動被以固定間隔時間調(diào)用}, 2000);    // 第二個參數(shù)為間隔時間，單位為毫秒// 該函數(shù)可以接收第3、4……個參數(shù)，他們將按順序傳入函數(shù)setInterval(function (a, b) {
    // 形式參數(shù) a 的值是88，形參b的值是66}, 2000, 88, 66);     // 從第三個參數(shù)開始，表示傳入函數(shù)內(nèi)的參數(shù)// 具名函數(shù)也可以傳入setIntervalvar a = 0;function fun() {
    console.log(++a);};setInterval(fun, 1000);

清除定時器

clearInterval() 函數(shù)可以清除一個定時器

// 設(shè)置定時器，并用timer變量接收這個定時器var timer = setInterval(function () {
    }, 2000);// 點擊按鈕時，清除定時器oBtn.onclick = function () {
    clearInterval(timer);    };

延時器

setTimeout() 函數(shù)可以設(shè)置一個延時器，當(dāng)指定時間到了之后，會執(zhí)行函數(shù)一次，不再重復(fù)執(zhí)行

var timer = setTimeout(function () {
    // 這個函數(shù)會在 2 秒后執(zhí)行一次}, 2000);clearTimeout(timer);    // 清除延時器

異步

異步： 不會阻塞CPU繼續(xù)執(zhí)行其他語句，當(dāng)異步完成時，會執(zhí)行 ”回調(diào)函數(shù)“（callback）

setInterval() 和 setTimeout() 是兩個異步語句

setTimeout(function () {
    console.log('A');}, 2000);  // 異步語句console.log('B');    // 異步語句不會阻塞程序的正常執(zhí)行// 運行結(jié)果BA

函數(shù)節(jié)流

一個函數(shù)執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才允許執(zhí)行第二次

var lock = true;function 需要節(jié)流的函數(shù)() {
    // 如果鎖時關(guān)閉狀態(tài)，則不執(zhí)行
    if(!lock) return;
    // 函數(shù)核心語句
    
    // 關(guān)鎖
    lock = false;
    
    // 指定毫秒數(shù)后將鎖打開
    setTimeout(function () {
        lock = true;
    }, 2000);}

BOM

BOM（Browser Object Model，瀏覽器對象模型）是JS與瀏覽器窗口交互的接口

ｗindow對象

window對象是當(dāng)前 js 腳本運行所處的窗口，而這個窗口中包含DOM結(jié)構(gòu)，window.document屬性就是document對象

在有標(biāo)簽頁功能的瀏覽器中，每個標(biāo)簽都擁有自己的window對象；也就是說，同一個窗口的標(biāo)簽頁之間不會共享一個window對象

1. 全局變量會成為window對象的屬性

   var a = 10;console.log(window.a == a);   // true

   這意味著多個js文件之間是共享全局作用域的，即js文件沒有作用域隔離功能

2. 內(nèi)置函數(shù)普遍是window的方法

   如setInterval()、alert()等內(nèi)置函數(shù)，普遍是window的方法

窗口尺寸相關(guān)屬性

獲得不包含滾動條的窗口寬度，要用document.documentElement.clientWidth

resize事件

在窗口大小改變之后，就會觸發(fā)resize事件，可以使用window.onresize或者window.addEventListener(‘resize’)來綁定事件處理函數(shù)

已卷動高度

window.scrollY屬性表示在垂直方向已滾動的像素值

document.documentElement.scrollTop屬性也表示窗口卷動高度

為了更好的瀏覽器兼容行，通常將兩個一起寫

var scrollTop = window.scrollY || document.documentElement.scrollTop;

document.documentElement.scrollTop不是只讀的，而window.scrollY是只讀的

scroll事件

在窗口被卷動之后，就會觸發(fā)scroll事件，可以使用window.onscroll或者window.addEventListener(‘scroll’)來綁定事件處理函數(shù)

Navigator對象

window.navigator屬性可以檢索navigator對象，它內(nèi)部含有用戶此次活動的瀏覽器的相關(guān)屬性和標(biāo)識

History對象

window.history 對象提供了操作瀏覽器會話歷史的接口

常用的操作就是模擬瀏覽器回退按鈕

history.back();       // 等同于點擊瀏覽器的回退按鈕history.go(-1);       // 等同于 history.back();

Location對象

window.location 標(biāo)識當(dāng)前所在網(wǎng)址，可以通過給這個屬性賦值命令瀏覽器進行頁面跳轉(zhuǎn)

window.location = 'http://www.baidu.com';window.location.href = 'http://www.baidu.com';

• 重新加載當(dāng)前頁面

  可以調(diào)用location的reload方法以重新加載當(dāng)前頁面，參數(shù)true表示從服務(wù)器強制加載

  window.location.reload(true);

• GET 請求查詢參數(shù)

  window.location.search 屬性即為當(dāng)前瀏覽器的 GET 請求查詢參數(shù)

offsetTops屬性

該屬性表示此元素到定位祖先元素的垂直距離

定位祖先元素：在祖先中，離自己最近的且擁有定位屬性的元素

使用這個屬性的時候，所有祖先元素不要有定位

面向?qū)ο?/h5>

對象（object）是”鍵值對“的集合，表示屬性和值的映射關(guān)系

var obj = {
    name: '小明',
    age: 12,
    sex: '男',
    hobbies: ['足球', '編程']};     // js中 花括號表示對象

注意：

• 如果對象的屬性鍵名不符合js標(biāo)識符命名規(guī)范，則這個鍵名必須用引號包裹

• 如果屬性名不符合js標(biāo)識符命名規(guī)范，則必須用方括號的寫法來訪問

• 如果屬性名以變量形式存儲，則必須使用方括號形式

  var obj = {
      a: 1,
      b: 2,
      c: 3};var key = 'b';console.log(obj.key);    // undefinedconsole.log(obj[key]);   // 2

對象的創(chuàng)建

var obj = {
    a: 10};obj.b = 40;

刪除屬性

使用delete操作符刪除某個對象的屬性

var obj = {
    a: 1,
    b: 2};delete obj.a;

對象的方法

如果某個屬性值是函數(shù)，則它被稱為對象的方法

var xiaoming = {
    name: '小明',
    age: 12,
    sex: '男',
    hobbys: ['足球','游泳','編程'],
    'favorite-book': '舒克和貝塔',
    sayHello: function () {
        console.log('hello');
    }};

對象的遍歷

對象的遍歷需要使用for…in…循環(huán)，可是遍歷對象的每個鍵

for (var k in obj) {
    console.log('屬性' + k + '的值是' + obj[k]);}

對象的深克隆

var obj1 = {
    a: 1, 
    b: 2, 
    c: [33, 44, {
        m: 55,
        n: 66,
        p: [77, 88]
    }]};function DeepClone(o) {
    if (Array.isArray(o)) {
        var result = [];
        for (var i = 0; i < o.length; i++) {
            result.push(DeepClone(o[i]));
        }
    } else if(typeof o == 'object') {
        var result = {};
        for (var k in o) {
            result[k] = DeepClone(o[k]);
        }
    } else {
        var result = o;
    }
    return result;}

函數(shù)的上下文

函數(shù)中可以使用this關(guān)鍵字，它表示函數(shù)的上下文

同一個函數(shù)，用不同的形式調(diào)用它，則函數(shù)的上下文不同

函數(shù)只有被調(diào)用，他的上下文才能被確定

相關(guān)規(guī)則

規(guī)則	上下文
對象.函數(shù)()	對象
函數(shù)()	window
數(shù)組[下標(biāo)]()	數(shù)組
IIFE	window
定時器	window
DOM事件處理函數(shù)	綁定DOM的元素
call和apply	任意指定

函數(shù).call(上下文);函數(shù).apply(上下文);

區(qū)別：

function sum(b1, b2) {
    alert(this.c + this.m + this.e + b1 + b2);}sum.call(xiaoming, 5, 3);    // call要用逗號羅列參數(shù)sum.apply(xiaoming, [5, 3]);  // apply要把參數(shù)寫到數(shù)組中

new操作符調(diào)用函數(shù)

new 函數(shù)()

js規(guī)定，使用new操作符調(diào)用函數(shù)會進行“四步走”：

1. 函數(shù)體內(nèi)會自動創(chuàng)建出一個空白對象

2. 函數(shù)的上下文（this）會指向這個對象

3. 函數(shù)體內(nèi)的語句會執(zhí)行

4. 函數(shù)會自動返回上下文對象，即使函數(shù)沒有return語句

function fun() {   // {}   this指向這個空對象
    this.a = 3;
    this.b = 5;    // {a: 3, b: 5}
    // 自動補充return this;}var obj = new fun();console.log(obj);

構(gòu)造函數(shù)

將之前的函數(shù)進行一小步改進

function People(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;}var xiaoming = new People('小明', 12, '男');var xiaoming = new People('小紅', 10, '女');var xiaogang = new People('小剛', 13, '男');

• 用new調(diào)用一個函數(shù)，這個函數(shù)就被稱為“構(gòu)造函數(shù)”，任何函數(shù)都可以是構(gòu)造函數(shù)，只需要用new調(diào)用它

• 構(gòu)造函數(shù)用來“構(gòu)造新對象”，它內(nèi)部的語句將為新對象添加若干屬性和方法，完成對象的初始化

為對象添加方法

function People(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHello = function () {
        console.log('我是' + this.name);
    };}var xiaoming = new People('小明', 12, '男');xiaoming.sayHello();

prototype

任何函數(shù)都有prototype屬性，prototype是英語”原型“的意思，prototype屬性值是個對象，它默認(rèn)擁有constructor屬性指回函數(shù)

構(gòu)造函數(shù)的prototype是實例的原型

原型鏈查找

實例可以打點訪問它的原型的屬性和方法，這被成為”原型鏈查找“

function People(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;}People.prototype.nationality = '中國';     // 在構(gòu)造函數(shù)的prototype上添加nationality屬性var xiaoming = new People('小明', 12, '男');console.log(xiaoming.nationality);

hasOwnProperty()

該方法可以檢查對象是否真正”自己擁有“某屬性或者方法

xiaoming.hasOwnProperty('name');    // truexiaoming.hasOwnProperty('age');     // truexiaoming.hasOwnProperty('sex');     // truexiaoming.hasOwnProperty('nationality');    // false

in

in運算符只能檢查某個屬性或方法是否可以被對象訪問，不能檢查是否是自己的屬性或方法

'name' in xiaoming     // true'age' in xiaoming      // true'sex' in xiaoming      // true'nationality' in xiaoming    // true

在prototype上添加方法

將方法直接添加到實例身上的缺點：每個實例和每個實例的方法函數(shù)都是內(nèi)存中不同的函數(shù)，造成了內(nèi)存的浪費，可以通過將方法寫道prototype上來解決。

function People(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;}People.prototype.sayHello = function () {
    console.log('我是' + this.name);};var xiaoming = new People('小明', 12, '男');xiaoming.sayHello();

原型鏈的終點

數(shù)組的原型鏈

繼承

1. 借助原型鏈實現(xiàn)繼承

讓Student的prototype屬性指向父類的實例，然后給Student的prototype添加Student的方法

通過原型鏈實現(xiàn)繼承的問題

• 如果父類的屬性中有引用類型值，則這個屬性會被所有子類的實例共享

• 子類的構(gòu)造函數(shù)中，往往需要重復(fù)定義很多超類定義過的屬性。即，子類的構(gòu)造函數(shù)寫的不夠優(yōu)雅

2. 借助構(gòu)造函數(shù)

為了解決原型中包含引用類型值所帶來問題和子類構(gòu)造函數(shù)不優(yōu)雅的問題，通常使用一種叫做 “借助構(gòu)造函數(shù)” 的技術(shù)，也被稱為 “偽造對象” 或 “經(jīng)典繼承”

在子類構(gòu)造函數(shù)的內(nèi)部調(diào)用超類的構(gòu)造函數(shù)，但要注意使用call()綁定上下文

function People(name, sex, age) {
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.arr = [1, 2, 3];}function Student(name, sex, age, school, sid) {
    People.call(this, name, sex, age);
    this.school = school';
    this.sid = sid;}var xiaoming = new Student('小明', '男', 12, '學(xué)校', 123456);

3. 組合繼承

將借用原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合到一起，叫做組合繼承，也叫做偽經(jīng)典繼承

缺點：

組合繼承最大的問題就是無論在什么情況下，都會調(diào)用兩次超類的構(gòu)造函數(shù)：一次是在創(chuàng)建子類原型的時候，另一次是在子類構(gòu)造函數(shù)的內(nèi)部。

原型式繼承

Object.create()方法，可以根據(jù)指定的對象為原型創(chuàng)建出新對象(IE9)

var obj2 = Object.create(obj1);// 寫法2var obj2 = Object.create(obj1, {    // 第二個參數(shù)為一個對象，將要補充的屬性寫在里面
    d: {    // 屬性的值仍然是一個對象
        value : 99     // 值為99
    }     // 可以遮蔽原型上的同名屬性});

在沒有必要 “興師動眾” 的創(chuàng)建構(gòu)造函數(shù)，而只是想讓新對象與現(xiàn)有對象 “類似” 的情況下，使用Object.create() 即可勝任，稱為原型式繼承

Object.create() 的兼容性寫法

在低版本瀏覽器中實現(xiàn)Object.create()

// 道格拉斯·克羅克福德寫的一個函數(shù)// 函數(shù)功能就是以 o 為原型，創(chuàng)建新對象function object(o) {
    // 創(chuàng)建一個臨時構(gòu)造函數(shù)
    function F() {}
    // 讓這個臨時構(gòu)造函數(shù)的prototype指向o, 這樣它new出來的對象，__proto__指向了o
    F.prototype = o;
    return new F();}

寄生式繼承

編寫一個函數(shù)，它可以 “增強對象”，只要把對象傳入這個函數(shù)，這個函數(shù)將以此對象為 “基礎(chǔ)” 創(chuàng)建出新對象，并為新對象賦予新的預(yù)置方法

function f(o) {
    var p = Object.create(o);
    p.display = function () {
        console.log(111);
    }
    return p;}

缺點：

由于不能做到函數(shù)復(fù)用而降低效率（方法沒有寫到prototype上）

寄生組合式繼承

通過借用構(gòu)造函數(shù)來繼承屬性，通過原型鏈的混成形式來繼承方法

function inheritPrototype(subType, superType) {
    var prototype = Object.create(superType.prototype);
    subType.prototype = prototype;
}

// 父類
function People(name, sex, age) {
    this.name = name;
    this.sex = sex;
    this.age = age;
}

People.prototype.sayHello = function() {
    console.log("hello");
}
People.prototype.sleep = function () {
    console.log("sleep");
}

// 子類
function Student(name, sex, age, school, sid) {
    People.call(this, name, sex, age);
    this.school = school;
    this.sid = sid;
}

inheritPrototype(Student, People);   // 讓Student類的Prototype指向以People.prototype為原型的一個新對象

Student.prototype.exam = function () {
    console.log("exam");
};

var xiaoming = new Student('小明', '男', 12, '學(xué)校', 123456);

instanceof運算符

用來檢測 ”某對象是不是某個類的實例“

xiaoming instanceof Student// 底層機理：檢查Student.prototype屬性是否在xiaoming的原型鏈上（多少層都行，只要在就行）

內(nèi)置構(gòu)造函數(shù)

JavaScript有很多內(nèi)置構(gòu)造函數(shù)，比如Array就是數(shù)組類型的構(gòu)造函數(shù)，F(xiàn)unction就是函數(shù)類型的構(gòu)造函數(shù)，Object就是對象類型的構(gòu)造函數(shù)

內(nèi)置構(gòu)造函數(shù)非常有用，所有該類型的方法都是定義在它的內(nèi)置構(gòu)造函數(shù)的prototype上的，我們可以給這個對象添加新的方法，從而拓展某些類型的功能

內(nèi)置構(gòu)造函數(shù)的關(guān)系

Object.prototype是萬物原型鏈的終點，JavaScript中函數(shù)數(shù)組皆為對象。

任何函數(shù)都可以看做是Function “new出來的”，Object是函數(shù)，所以它也是Function類的對象

包裝類

包裝類的目的就是為了讓基本類型值可以從它們的構(gòu)造函數(shù)的prototype上獲得方法

Math對象

Math.pow()
Math.sqrt()
Math.ceil()      // 向上取整
Math.floor()     // 向下取整
Math.round()     // 四舍五入
Math.max()      // 參數(shù)列表的最大值
Math.min()

// 計算arr數(shù)組的最大值
var arr = [3, 6, 9, 2];
var max = Math.max.apply(null, arr);

Date對象

new Date()     // 得到當(dāng)前時間的日期對象
newDate(2020, 11, 1)     // 第二個參數(shù)從0開始算
new Date('2020-12-01')

常見方法

方法	功能
getDate()	得到日期 1 ~ 31
getDay()	得到星期 0 ~ 6
getMonth()	得到月份 0 ~ 11
getFullYear()	得到年份
getHours()	得到小時數(shù) 0 ~ 23
getMinutes()	得到分鐘數(shù) 0 ~ 59
getSeconds()	得到秒數(shù) 0 ~ 59

時間戳

通過getTime()方法或者Date.parse()函數(shù)可以將日期對象變?yōu)闀r間戳

通過new Date(時間戳)的寫法，可以將時間戳變?yōu)槿掌趯ο?/p>

var d = new Date();var timestamp1 = d.getTime();var timestamp2 = Date.parse(d);

正則表達式

正則表達式（regular expression）描述了字符串的 “構(gòu)成模式”，經(jīng)常被用于檢查字符串是否符合預(yù)定的格式要求
創(chuàng)建正則表達式

1. 使用/內(nèi)容/的語法形式

var str = '123456';var regxp = /^\d{6}$/;if (regxp.text(str)) {
	alert('符合規(guī)則');} else {
	alert('不符合規(guī)則');}

2. new RegExp(‘內(nèi)容’)的形式

var regxp2 = new RegExp('^\\d{6}$')

元字符

元字符	功能
\d	匹配一個數(shù)字
\D	匹配一個非數(shù)字字符
\w	匹配一個單字字符（字母、數(shù)字或下劃線）
\W	匹配非單字字符
\s	匹配一個空白字符，包括空格、制表符和換行符
.	任意字符
^	匹配開頭
$	匹配結(jié)尾

不管一個符號有沒有特殊意義，都可以在其之前加上一個\以確保它表達的是這個符號本身

方括號表示法

使用方括號，如[xyz]，可以創(chuàng)建一個字符集，表示匹配方括號中的任意字符

/^[by]\d{7}$/

使用短橫-來指定一個字符范圍，^表示否定

元字符	等價的方括號表示法
\d	[0-9]
\D	[^0-9]
\w	[A-Z-z0-9_]
\W	[^A-Z-z0-9_]

量詞

量詞	意義
*	匹配前一個表達式0次或多次。等價于{0,}
+	匹配前一個表達式1次或多次。等價于{1,}
?	匹配前面一個表達式0次或1次。等價于{0,1}
{n}	匹配了前面一個字符剛好出現(xiàn)了n次
{n,}	匹配前一個字符至少出現(xiàn)了n次
{n,m}	匹配前面的字符至少n次，最多m次

修飾符

也叫標(biāo)志（flags），用于使用正則表達式實現(xiàn)高級搜索

修飾符	意義
i	不區(qū)分大小寫搜索
g	全局搜索

var re = /m/gi;var re = new RegExp('m', 'gi');

正則表達式相關(guān)方法

方法	簡介
test()	測試某字符串是否匹配正則表達式，返回布爾值
exec()	根據(jù)正則表達式，在字符串中進行查找，返回結(jié)果數(shù)組或null

字符串的相關(guān)正則方法

方法	簡介
search()	在字符串中根據(jù)正則表達式進行查找匹配，返回首次匹配到的位置索引，測試不到則返回-1
match()	在字符串中根據(jù)正則表達式進行查找匹配，返回一個數(shù)組，找不到則返回null
replace()	使用替換字符串替換掉匹配到的子字符串，可以使用正則表達式
split()	分隔字符串為數(shù)組，可以使用正則表達式

var str = 'abc123def4567ghi89';
     
// search()方法，很像indexOf()，返回查找到的第一個下標(biāo)，如果找不到就是-1
var result1 = str.search(/\d+/g);
var result2 = str.search(/m/g);
console.log(result1);       // 3
console.log(result2);       // -1

// match()方法，返回查找到的數(shù)組，找不到就是null
var result3 = str.match(/\d+/g);
console.log(result3);       // ["123", "4567", "89"]

// replace()方法，進行替換
var result4 = str.replace(/[a-z]+/g, '*');      // 注意+表示貪婪的，盡可能多的連續(xù)匹配小寫字母
console.log(result4);       // *123*4567*89

// split()方法，進行字符串拆為數(shù)組
var result5 = str.split(/\d+/g);
console.log(result5);       // ["abc", "def", "ghi", ""]

感謝各位的閱讀，以上就是“JavaScript變量聲明如何提升”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript變量聲明如何提升這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！