2. 程式人生 > >JS【知識筆記】

JS【知識筆記】

阿新 • • 發佈：2019-05-12
特定 book 返回頂部 dem 成對 into scrolltop 最好 單獨

一、JS文件位置

  • 多個.JS文件最好合並到一個文件中，減少加載頁面時發送的請求數量。
  • 某個單獨頁面需要的js，最好放在HTML文檔的最後，</body>之前，這樣能使瀏覽器更快地加載頁面。先加載完界面，再執行腳本，不至於先執行復雜腳本帶來的頁面顯示不全。
  • 侵入式與非侵入式JavaScript

　　侵入式JavaScript

jQuery出現以前，在同一個文件中混雜JavaScript代碼和HTML標記是非常流行的做法。將JavaScript代碼作為某個特性的值放入HTML元素中是很常見的，如以下代碼：

<div onclick="javascript:alert(‘click‘);"
 
>Testing, testing</div>

　　非侵入式JavaScript

jQuery改變了這種情況，因為jQuery提供了查找元素和捕獲單擊事件更好的方法。現在可以從HTML特性中移除JavaScript代碼了。事實上，可以將javascript代碼與HTML完全分離。

即使查看視圖渲染的HTML標記，也看不到任何的javascript代碼，腳本留下的唯一的痕跡是一個或多個引用javascript文件的<script>標簽。

二、JS判斷是否為空

  • 方法一
var keyVal= $("#key").val();  


 
if(keyVal==undefined || keyVal=="" || keyVal==null){  

     alert("隱藏域的值為空");  

}

此方法效率不高，不建議。

  • 方法二
var keyVal= $("#key").val();  

if(keyVal.length==0){  

     alert("隱藏域的值為空");  

}

此方法效率高。

三、JS中的text()，html() ，val()的區別

　　text()和html()都可以用於元素文本的存取，但是html()不僅可以用於元素文本的存取，還可以用於元素節點的存取。

　　val()不同於text()和html()，val()用於input節點內容的存取。

1. text()

<div>text</div>

var text = $("div").text(); //div元素

console.log(text);

console:text

2. html()

<div><p>text</p></div>

var str = $("div").html();

console.log(str);

console：<p>text</p> //取到了元素節點

3. val()

<input type="text" value="text"/>

var str = $("input").val(); //只用於input元素

console.log(str);

console:text

四、JS中獲得Webconfig的配置信息

var timer= (<%=System.Web.Configuration.WebConfigurationManager.AppSettings["homeTimer"]%>);

setTimeout(‘myrefresh()‘, timer); //指定x秒刷新一次

五、JS中把任意數字轉為二進制數

二進制輸出：toString函數

var m=3;

m.toString(2);

結果 "11"

NumberObject.toString(radix)

Radix：規定表示數字的基數，使 2 ~ 36 之間的整數。若省略該參數，則使用基數 10。

六、JS中生成GUID

function  newGuid()
{
    var guid = "";
    for (var i = 1; i <= 32; i++){
      var n = Math.floor(Math.random()*16.0).toString(16);
      guid +=   n;
      if((i==8)||(i==12)||(i==16)||(i==20))
        guid += "-";  //可不要
    }
    return guid;    
}

七、JS中判斷是否為數字

　　完整方法，采用正則：

var r=/^[1-9][0-9]+$/gi;
document.writeln(r.test("011"));//false
document.writeln(r.test("11"));//true

　　按照特定需求來定 正則。假如首位可以是0，則 var r=/^[0-9]+$/gi;

若輸入的可以為空，則 var r=/^[0-9]*$/gi;

參考：jquery裏判斷是否為數字的各種方法及每種方法的優缺點

註意，上面的正則存在：相同的正則多次調用test()返回的值卻不同的問題

舉例：

var reg = /^1[345678][0-9]{9}$/g;
console.log(reg.test(15328044636));
console.log(reg.test(15328044636));

會發現控制臺打印的數據卻是：

true

false

問題原因：這是因為正則reg的g屬性，設置的全局匹配。RegExp有一個lastIndex屬性，來保存索引開始位置。

　　上面的問題，第一次調用的lastIndex值為0，到了第二次調用，值變成了11。

解決方案

  • 第一種方案是將g去掉，關閉全局匹配。
  • 第二種就是在每次匹配之前將lastIndex的值設置為0。
技術分享圖片 
var reg = /^1[345678][0-9]{9}$/g;
console.log(reg.lastIndex, reg.test(15328044636));
reg.lastIndex = 0;
console.log(reg.lastIndex, reg.test(15328044636));

//打印的值
0 true
0 true
View Code

八、JS中轉義字符

　　最近遇到調接口返回的字符串中含 & ，到界面顯示確成了 &amp; 。

轉義字符：

技術分享圖片

參考：【轉義字符】HTML 字符實體&lt; &gt: &amp;等

默認情況下中文，空格，‘&’等字符都會被瀏覽器自動轉義一次。

自定義轉換方法：

技術分享圖片 
/**
 * @function escapeHTML 轉義html腳本 < > & " ‘
 * @param a -
 *            字符串
 */
escapeHTML: function(a){
    a = "" + a;
    return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/‘/g, "&apos;");;
},
/**
 * @function unescapeHTML 還原html腳本 < > & " ‘
 * @param a -
 *            字符串
 */
unescapeHTML: function(a){
    a = "" + a;
    return a.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, ‘"‘).replace(/&apos;/g, "‘");
},
View Code

1，escapeHTML將< > & " ‘轉成字符實體
使用場景：
（1）用戶在頁面中錄入（比如輸入框） <script>alert(2);</script>， js將該內容提交給後端保存
（2）顯示時，後端將字符串返回前端；js接收到之後：
a, 使用escapeHTML，將字符串轉為 &lt;script&gt;alert(2);&lt;/script&gt;此時，瀏覽器將能正確解析，因為瀏覽器接收到實體字符後，轉成對應的尖括號等。
b, 不使用escapeHTML，瀏覽器一看到<，便認為是html標簽的開始，直接把剛才的字符串當腳本執行了，這就是xss漏洞。

2，unescapeHTML將字符實體轉成< > & " ‘
使用場景：
後端將已經轉義後的內容顯示到頁面；比如&lt;script&gt;alert(2);&lt;/script&gt;
js收到後：
a，前端進行unescapeHTML，則可以直接dom操作，將標簽顯示到頁面。
b，前端沒有unescapeHTML，則原樣輸出<script>alert(2);</script>，但此時並沒有執行。

九、JS中url的應用

　　1、打開新窗體【另開窗口】：window.open(url, ‘_blank‘);

　　2、刷選當前窗口：window.location.reload();

　 3、刷新當前頂層窗口：window.top.location.reload(); 【eg：使用了artDialog 彈出窗口，在窗口上進行操作時，想操作原窗口，需要用window.top】

十、JS中數組去除空值

　　有時定義一個數組：var array=[ ]; 然後賦值array=" "; 此時判斷其長度length=1。需要將空字符串刪掉

技術分享圖片 
/**
 * 擴展Array方法, 去除數組中空白數據
 */
Array.prototype.notempty = function() {
    var arr = [];
    this.map(function(val, index) {
        //過濾規則為，不為空串、不為null、不為undefined，也可自行修改
        if (val !== "" && val != undefined) {
            arr.push(val);
        }
    });
    return arr;
}
View Code

//調用方法
var a = [1, 2, undefined, 4, "", 5, null, 7, 0, 8];
var b = a.notempty();
//輸出b [1, 2, 4, 5, 7, 0, 8]

十一、JS中緩存數據Cookie

　　1、讀取cookie：var x = document.cookie;

　　2、設置cookie：document.cookie="username=John Doe";

　　3、刪除cookie：類似設置，document.cookie="username="; 或者設置一個過期的時間

技術分享圖片 
//設置某個key的cookie值
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

//獲取某個特定key的cookie值
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(‘;‘);
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}
function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("歡迎 " + user + " 再次訪問");
    }
    else {
        user = prompt("請輸入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}
View Code

更多參考：JavaScript Cookie

十二、JS中數據序列化與反序列化

需要引入 jquery.json.js

技術分享圖片 
 $(function () {
            var data = {
                orderID: "ModelOrderID",
                pnr: "hello"
            };
            var jsonStr = $.toJSON(data);  //把數組轉換成json字符串
            console.log(jsonStr);
            var json = $.parseJSON(jsonStr);   //將json字符串反序列化為json對象
            console.log(json);

        })
View Code

分部輸出：

{"orderID":"ModelOrderID","pnr":"hello"}

和

技術分享圖片

十三、JS中過濾函數$.grep()

$.grep() 函數使用指定的函數過濾數組中的元素，並返回過濾後的數組。

提示：源數組不會受到影響，過濾結果只反映在返回的結果數組中。

$.grep( array, function [, invert ] )

參數

描述

array

Array類型 將被過濾的數組。

function

Function類型 指定的過濾函數。grep()方法為function提供了兩個參數：其一為當前叠代的數組元素，其二是當前叠代元素在數組中的索引。

invert

可選。 Boolean類型默認值為false，指定是否反轉過濾結果。如果參數invert為true，則結果數組將包含function返回false的所有元素。

以下示例:

技術分享圖片 
var arr =$.grep( [0,1,2], function(n,i){
        return n > 0;
    });
console.log(arr);//[1,2]

var arr =$.grep( [0,1,2], function(n,i){
        return n > 0;
    },true);//返回n<=0的元素
console.log(arr);//[0]
View Code

十四、JS中遍歷$().each()和$.each()

　　在jquery中，遍歷對象和數組，經常會用到$().each和$.each()，兩個方法。

1、$().each 在dom處理上面用的較多。

如果頁面有多個input標簽類型為checkbox，對於這時用$().each來處理多個checkbook，例如：

技術分享圖片 
$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true)
{
//一些操作代碼
}
View Code

回調函數是可以傳遞參數，i就為遍歷的索引。

2、遍歷一個數組通常用$.each()來處理

例如：

技術分享圖片 
$.each([{name:"limeng",email:"xfjylimeng"},{name:"hehe",email:"xfjylimeng"}],function(i,n)
{
alert("索引:"+i+"對應值為："+n.name);
});
//參數i為遍歷索引值，n為當前的遍歷對象.

var arr1 = [ "one", "two", "three", "four", "five" ];
$.each(arr1, function(){
alert(this);
});
//輸出：one   two  three  four   five

var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
//輸出：1   4   7

var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
});
//輸出：1   2  3  4  5
View Code

十五、JS中個元素設置錨點

　　有以下幾種方式：

1、a標簽href=#XX去實現

eg：<a href="#a01"></a>

<p id="a01">練習</p>
<p>練習</p>

不好，頁面會有刷新感

2、 scrollIntoView()

參考：https://blog.csdn.net/qq_38047742/article/details/82621666

Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內

錨點定位是一個再熟悉不過的操作了，通常會用a標簽href=#XX去實現，不過這樣做，有一個問題，就是頁面會有刷新感，而且地址欄會有變化，F5刷新，則#XXX還是顯示在地址欄裏，這樣如果要進一步進行有關地址欄url的操作，就不得不再做些判斷，所以尋找一些新的方法。

如果要求不是很高，scrollIntoView()這個方法就可以取代傳統錨點定位，它是利用滾動原理，來將相應的元素滾動到可是區域內。

首先需要說明的是，這個方法並沒有寫入標準，但是大多數主流瀏覽器已經支持或部分支持其功能了，所以可以放心使用，當然如果有朝一日標準出來了，那就按標準來吧。

  • scrollIntoView實現簡單的錨點定位

將指定元素定位到瀏覽器頂部，底部，中間

element.scrollIntoView(); // 等同於element.scrollIntoView(true)

element.scrollIntoView(alignToTop); // Boolean型參數

element.scrollIntoView(scrollIntoViewOptions); // Object型參數

　　scrollIntoViewOptions參數 可選

如果為true，元素的頂端將和其所在滾動區的可視區域的頂端對齊。相應的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個參數的默認值。

如果為false，元素的底端將和其所在滾動區的可視區域的底端對齊。相應的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

3、 jquery animate實現錨點慢慢平滑滾動效果

參考： https://www.cnblogs.com/firstdream/p/7424692.html

技術分享圖片 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js平滑滾動到頂部、底部、指定地方</title> 
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script> 
<style> 
.box{ height:200px; width:100%; background:#ccc; margin:10px 0;} 
.location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003}; 
</style> 
</head> 
<body> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box a">產品介紹產品介紹產品介紹產品介紹產品介紹產品介紹產品介紹產品介紹產品介紹產品介紹產品介紹產品介紹產品介紹</div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box bottom"></div> 
<div class="location"> 
<p class="scroll_top">返回頂部</p> 
<p class="scroll_a">產品介紹</p> 
<p class="scroll_bottom">滑到底部</p> 
</div> 
<script type="text/javascript"> 
jQuery(document).ready(
    function($){ 
        $(‘.scroll_top‘).click(
            function(){
                $(‘html,body‘).animate({scrollTop: ‘0px‘}, 800);
            }); 
            $(‘.scroll_a‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘.a‘).offset().top}, 800);
    }); 
$(‘.scroll_bottom‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘.bottom‘).offset().top}, 800);}); }); 
</script> 
</body> 
</html>
View Code

4、 瀏覽器兼容性問題

若寫成：

$("body ").animate({

scrollTop: $(‘#id-hotel-policy‘).offset().top - intMinusTopBig

}, 8, function () {

// Animation complete.

});

則在高版本的chrome瀏覽器【67版】和firefox瀏覽器中都不可用。需要改為

$("body,html").animate({

scrollTop: $(‘#id-hotel-policy‘).offset().top - intMinusTopBig

}, 8, function () {

// Animation complete.

});

參考：關於頁面滾動值scrollTop在FireFox與Chrome瀏覽器間的兼容問題

發送到

十六、JS中下拉框的change事件

　　HTML：

技術分享圖片 
 <div>
        <select id="selectID">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
    </div>
View Code

　　JS：

技術分享圖片 
 $(function () {
            $(‘#selectID‘).trigger(‘change‘); //移入時 觸發select的change事件，即下面的事件

            //綁定下拉框change事件，當下來框改變時調用 SelectChange()方法
            $("#selectID").change(function () { SelectChange(); });
        });

        function SelectChange() {
            //獲取下拉框選中項的text屬性值
            var selectText = $("#selectID").find("option:selected").text();
            alert(selectText);
            //獲取下拉框選中項的value屬性值
            var selectValue = $("#selectID").val();
            alert(selectValue);
            //獲取下拉框選中項的index屬性值
            var selectIndex = $("#selectID").get(0).selectedIndex;
            alert(selectIndex);
            ////獲取下拉框最大的index屬性值
            var selectMaxIndex = $("#selectID option:last").attr("index");
            alert(selectMaxIndex);
        }
View Code

十七、JS中多張圖片切換(不循環)

思路：

1.先獲取圖片的id

2.定義一個存放多個圖片的數組，並給它一個初始編號 num=0;

3.當點擊圖片時，先讓num自增，然後判斷num的值是否和數組的長度相等，如果相等，就讓num回到0；

4.最後就把arr[num]賦給oImg的src屬性，就能讀取到圖片的路徑了。

技術分享圖片 
//初始化的時候加載參數
    var oImg = $(‘.left-part‘).children(‘img‘);
    var arr = [‘https://dimg04.c-ctrip.com/images/fd/hotel/g4/M09/4B/1C/CggYHlX364OAB964AADVhVE_jjU887_C_800_525_Q70.jpg‘, ‘https://dimg04.c-ctrip.com/images/2002070000002qls70D99_C_800_525_Q70.jpg‘, ‘https://dimg04.c-ctrip.com/images/200g0i00000099f6p39DB_C_800_525_Q70.jpg‘];
    var num = 3;
    var index = 0;
    $(‘#picIndex‘).text(index+1);
    $(‘#picNum‘).text(num);
    oImg.attr(‘src‘, arr[index]);
    $(‘.next-btn‘).click(function () {
        if (index >= arr.length-1) {
            return false;
        }
        index++;
        $(‘#picIndex‘).text(index+1);
        oImg.attr(‘src‘, arr[index]);
    });
    $(‘.pre-btn‘).click(function () {
        if (index <= 0) {
            return false;
        }
        index--;
        $(‘#picIndex‘).text(index + 1);
        oImg.attr(‘src‘, arr[index]);
    });
View Code

1、my97日期控件

日期控件使用

技術分享圖片 
<div class="el-input el-input--small">
<span style="width:45%;display:inline-block;"> @Html.TextBoxFor(m => m.Request.ArrivalDateStart, new { style = "width:90px", onfocus = "WdatePicker({skin:‘wingon‘,doubleCalendar:true,dateFmt:‘yyyy-MM-dd‘,minDate:‘%y/%M/%d‘,onpicked:function(){Request_ArrivalDateEnd.focus();}})" }) </span>
—<span style="width:45%;display:inline-block;"> @Html.TextBoxFor(m => m.Request.ArrivalDateEnd, new { style = "width:90px", onfocus = "WdatePicker({doubleCalendar:true,dateFmt:‘yyyy-MM-dd‘,minDate:‘#F{$dp.$D(\\‘Request_ArrivalDateStart\\‘,{d:0})}‘,skin:‘wingon‘})" })</span>
</div>
View Code

註：引入js <script type="text/javascript" src="@Url.Content("~/Scripts/FRMy97DatePicker/WdatePicker.js")"></script>

開始時間的 onpicked 可要可不要

Request_ArrivalDateStart 是開始時間控件的id，

參考：http://www.my97.net/demo/index.htm

JS【知識筆記】

相關推薦

JS【知識筆記】

特定 book 返回頂部 dem 成對 into scrolltop 最好 單獨 一、JS文件位置 多個.JS文件最好合並到一個文件中，減少加載頁面時發送的請求數量。 某個單獨頁面需要的js，最好放在HTML文檔的最後，</body>之前，這樣能使瀏覽器

【知識筆記】js中undefined和null的區別和聯絡

在JavaScript中存在這樣兩種原始型別:Null與Undefined。這兩種型別常常會使JavaScript的開發人員產生疑惑，在什麼時候是Null，什麼時候又是Undefined?Undefined型別只有一個值，即undefined。當宣告的變數還未被初始化時，變數的預設值為undefined。Nu

【知識筆記】常見瀏覽器核心

五大瀏覽器-四大核心 瀏覽器四大核心：Trident核心（俗稱IE核心） 　　　　　　　　WebKit核心 　　　　　　　　Blink核心 　　　　　　　　Gecko核心（俗稱Firefox核心） 以下是各常用瀏覽器所使用的核心：1、IE瀏覽器核心：Trident核心，也是俗稱的IE核心； 

【知識筆記】ASP.NET報錯問題

安全 取數據 任務 except 失敗 bubuko 異常 ali name 一、前端asp.net在遠程部署到IIS時報錯：Web 部署任務失敗，在遠程計算機上處理請求時出錯 服務器在處理請求時遇到問題。請與服務器管理員聯系以了解詳細信息((2017/6/16 16:2

【知識筆記】CSS

腳本 知識 margin 打開 win main 賦值 導航 頁腳 一、CSS文件 　　引用css文件，放在Head裏面。 一般只使用一個文件，這無關於網站的大小，網站越大，某種意義上這種做法的優勢與潛力就會體現的越明顯。 對於門戶網站那就不適合只用一個文件。對於網

【知識小結】Git 個人學習筆記及心得

art over round TP 緩存 PE QQ 的區別 rda https://mp.weixin.qq.com/s/D96dXYfu3XAA4ac456qo0g git架構 工作區：就是你在電腦裏能看到的目錄。 版本庫：工作區有一個隱藏目錄.git，，而是

【學習筆記】深入理解js原型和閉包（3）——prototype原型

既typeof之後的另一位老朋友！ prototype也是我們的老朋友，即使不瞭解的人，也應該都聽過它的大名。如果它還是您的新朋友，我估計您也是javascript的新朋友。   在咱們的第一節（深入理解js原型和閉包（1）——一切皆是物件）中說道，函式也是一種物件。他也是屬性的集合，你也可以

【學習筆記】深入理解js原型和閉包（8）——簡述【執行上下文】上

什麼是“執行上下文”（也叫做“執行上下文環境”）？暫且不下定義，先看一段程式碼： 第一句報錯，a未定義，很正常。第二句、第三句輸出都是undefined，說明瀏覽器在執行console.log(a)時，已經知道了a是undefined，但卻不知道a是10（第三句中）。 在一段js程式碼拿過來真正一句一

【學習筆記】深入理解js原型和閉包（9）—— 簡述【執行上下文】下

繼續上一篇文章（https://www.cnblogs.com/lauzhishuai/p/10078231.html）的內容。 上一篇我們講到在全域性環境下的程式碼段中，執行上下文環境中有如何資料： 變數、函式表示式——變數宣告，預設賦值為undefined； this——賦值； 函式宣告

【學習筆記】深入理解js原型和閉包（11）——執行上下文棧

繼續上文的內容。 執行全域性程式碼時，會產生一個執行上下文環境，每次呼叫函式都又會產生執行上下文環境。當函式呼叫完成時，這個上下文環境以及其中的資料都會被消除，再重新回到全域性上下文環境。處於活動狀態的執行上下文環境只有一個。 其實這是一個壓棧出棧的過程——執行上下文棧。如下圖：   可

【學習筆記】深入理解js原型和閉包（12）——簡介【作用域】

提到作用域，有一句話大家（有js開發經驗者）可能比較熟悉：“javascript沒有塊級作用域”。所謂“塊”，就是大括號“｛｝”中間的語句。例如if語句： 再比如for語句： 所以，我們在編寫程式碼的時候，不要在“塊”裡面宣告變數，要在程式碼的一開始就宣告好了。以避免發生歧義。如： &nbs

【學習筆記】深入理解js原型和閉包（15）——閉包

前面提到的上下文環境和作用域的知識，除了瞭解這些知識之外，還是理解閉包的基礎。 至於“閉包”這個詞的概念的文字描述，確實不好解釋，我看過很多遍，但是現在還是記不住。 但是你只需要知道應用的兩種情況即可——函式作為返回值，函式作為引數傳遞。 第一，函式作為返回值 如上程式碼，bar函式作為返回值，賦

【學習筆記】深入理解js原型和閉包（17）——補this

本文對《深入理解js原型和閉包（10）——this》一篇進行補充，原文連結：https://www.cnblogs.com/lauzhishuai/p/10078307.html 原文中，講解了在javascript中this的各個情況，寫完之後發現還落下一種情況，就此補充。   原文中thi

【學習筆記】深入理解js原型和閉包（18）——補充：上下文環境和作用域的關係

本系列用了大量的篇幅講解了上下文環境和作用域，有些人反映這兩個是一回兒事。本文就用一個小例子來說明一下，作用域和上下文環境絕對不是一回事兒。   再說明之前，咱們先用簡單的語言來概括一下這兩個的區別。 00 上下文環境： 可以理解為一個看不見摸不著的物件（有若干個屬性），雖然看不見

【學習筆記】vue.js

安裝 開發環境<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 生產環境<script src="https://cdn.jsdelivr.net/npm/vue"&

【讀書筆記】你唔知JS 詞法作用域

詞法階段   簡單地說， 詞法作用域就是定義在詞法階段的作用域。 換句話說， 詞法作用域是由你在寫程式碼時將變數和塊作用域寫在哪裡來決定的， 因此當詞法分析器處理程式碼時會保持作用域不變。    window.a 通過這種技術可以訪問那些被同名變數所遮蔽的全域性變數。

【讀書筆記】你唔知JS 函式作用域和塊作用域

函式中的作用域   1.無論識別符號宣告出現在作用域中的何處， 這個識別符號所代表的變數或函式都將附屬於所處作用域的氣泡。    2.這些識別符號全都無法從全域性作用域中進行訪問， 因此會導致ReferenceError 錯誤。     隱藏

雲管理服務相關知識【學習筆記】......實時更新

文章目錄 雲MSP誕生的背景 雲MSP扮演的角色 雲MSP需要具備的能力 源自第三方網路解釋 源自Gartner報告 基礎能力 1、支援多雲 2、l

【知識積累】使用js-xlsx，JS實現匯入excel表格

1.匯入功能的實現1.1.引入相關的js外掛<!--js-xlsx --> <!-- <script src="http://oss.sheetjs.com/js-xlsx

【讀書筆記】《你不知道的JS-上》

本書概要： 1、作用域和閉包 2、this和物件原型 筆記1 > 3.4 塊作用域 > 3.4.3 let > 垃圾收集 let 變數可以通過顯示的塊作用域來實現記憶體垃圾回收，正確程式碼： function process(data) {