JavaScript基礎插曲---apply,call和URL編碼等方法

來源:互聯網
上載者:User

標籤:

Js基礎學習

Js的壓縮:

就是利用js的文法格式通過縮短變數名,去掉空格等來進行壓縮。

Apply和call的使用

1:apply方法:應用某一對象的方法,用於一個對象替換當前對象。主要是改變this的值。

  1. <script type="text/javascript">
  2. ????var user_name = "阿輝";
  3. ????//一個函數,這裡主要注意裡面的this的含義。
  4. ????function showName() {
  5. ????????alert(this.user_name);
  6. ????};
  7. ????var p = { user_name: ‘阿紅‘ };
  8. ????showName.apply(p);// 這裡通過apply方法來改變函數中this的不同。這裡的p就是this.
  9. </script>

2:call方法:這個和上面的方法是一樣的,只是當需要有參數的時候需要逗號來區別,而apply是通過數組的形式來傳遞的。

這裡就是有參數的時候,我們使用apply的時候需要使用數組的形式來傳遞。

  1. var user_name = "阿輝";
  2. //一個函數,這裡主要注意裡面的this的含義。
  3. function showName(a,b,c) {
  4. ????alert(this.user_name);
  5. ????alert(a + b + c);
  6. };
  7. var p = { user_name: ‘阿紅‘ };
  8. showName.apply(p);// 這裡通過apply方法來改變函數中this的不同。這裡的p就是this.
  9. showName.apply(p, [12,12,12]);
  10. showName.call(p,13,13,13);

上面的代碼就是二者的區別。使用的時候我們需要注意這些小的知識點。

函數的遞迴:

當函數是匿名函數的時候我們使用遞迴的時候裡面的值千萬不要直接寫賦值的匿名函數,我們需要通過arguments.callee();來表示函數自身。

  1. var index = 0;
  2. //定義匿名函數
  3. var s = function() {
  4. ????index++;
  5. ????alert(index);
  6. ????if (index<5) {
  7. ????????//s();
  8. ????????arguments.callee();//表示函數自身
  9. ????}
  10. };
  11. var ss = s;
  12. ss();

encodeURL方法:將文本字串編碼為一個有效統一資源識別項(URL),這個方法不會對那些特殊的字元進行編碼,這時我們需要使用encodeURLCompoment方法對這些字元進行編碼。這個編碼的範圍更加的廣。

  1. var msg = ‘http://localhost:55186/js%E7%BB%83%E4%B9%A0/js11.html‘;
  2. var url_value = window.encodeURI(msg); //只編碼文本的字串
  3. var sss = window.encodeURIComponent(msg);//編碼更加的廣泛,前面的數字都進行了編碼。
  4. alert(sss);
  5. alert(url_value);

Eg:點擊實現展示關閉2級菜單。

思路:通過為<p>標籤來註冊單擊事件,接著找到它下面的<ul>,看是否隱藏,在進行操作。{思路很重要,每次的代碼都是那樣子,只需要學會解決問題的想法,這樣就可以以此類推,解決很多的問題。}

  1. <body>
  2. ????<ul id="umenu">
  3. ????????<li>
  4. ????????????<p>111</p>
  5. ????????????<ul>
  6. ????????????????<li>1</li>
  7. ????????????????<li>2</li>
  8. ????????????????<li>3</li>
  9. ????????????</ul>
  10. ????????</li>
  11. ????????<li>
  12. ????????????<p>222</p><ul><li>1</li><li>2</li><li>3</li></ul>
  13. ????????</li>
  14. ????????<li>
  15. ????????????<p>333</p><ul><li>1</li><li>2</li><li>3</li></ul>
  16. ????????</li>
  17. ????</ul>
  18. </body>

Js代碼如下:

  1. window.onload = function () {
  2. ??????//為每個功能表項目註冊單擊事件
  3. ??????var ps = document.getElementById(‘umenu‘).getElementsByTagName(‘p‘);
  4. ??????//遍曆ps,為每個註冊單擊事件
  5. ??????for (var i = 0; i < ps.length; i++) {
  6. ??????????ps[i].onclick = function () {
  7. ??????????????//1;找到p後面的<ul>,+this.parentNode是找到其父節點;
  8. ??????????????var x = this.parentNode.getElementsByTagName(‘ul‘)[0];
  9. ??????????????//2:判斷是否隱藏
  10. ??????????????if (x.style.display != ‘none‘) {
  11. ??????????????????x.style.display = ‘none‘;
  12. ??????????????} else {
  13. ??????????????????x.style.display = ‘block‘;
  14. ??????????????}
  15. ??????????};
  16. ??????}
  17. ??};

JavaScript基礎插曲---apply,call和URL編碼等方法

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.