JavaScript 解惑

俗話說"挖坑容易, 填坑難", 可能不是坑, 走的人多了也就變成了坑. 哎, 且看我能為後人填多少坑吧, 能填多少是多少吧.

坑: this

JavaScript裡面的坑真的是很多啊, 比如說 this, 估計就難道了很多人. 其實很簡單, 就是無論是誰call的這個對象, this就refer它了.

在定義函數function的時候, this指的是window
在Object裏面定義函數的時候, this指的是這個Object
在定義內函數的時候, this 指的是window. (內函數不傳遞this)

例子(jQuery):

做練習, 圖方便, 沒有下載到本地, 直接load網上的


``` javascript 
(function(){
    var obj = {
      doIt: function(e){
          console.log(this);
          e.preventDefault();
      }
    };
    $('a').on('click',  obj.doIt); 
})();

這裡的this指的是, anchor, 因為是a叫的function 'obj.doIt'

(function(){
    var obj = {
      doIt: function(){
          console.log(this);
      }
    };
    $('a').on('click', function(e){
        obj.doIt();
        e.preventDefault();
    });
})();

這裡的this指的是, obj本身, 因為沒有任何東西傳入到obj.doIt()裡面去.

如果還是聽不懂額, 這麼多選擇到底怎們辦啊?
對於新手來說, jQuery指出了一條簡潔的道路, 那就是用這個
$('a').on('click', $.proxy(obj.doIt, obj)); 把特定的Object傳入進去, 可以refer API. 當然, 這裡的this, 永遠都refer後面的obj.

坑: call 和 apply

call和apply之間有什麼區別? 據我所致, 毛線都沒有.
僅僅是兩個不同function的名字了, 比如說裡面 vs 裏面.

call的第二個及以後的parameter接受的是單獨的parameter.
apply的第二個parameter接受到的是array(數組).

call(this, a,b,c,d);
apply(this, [a,b,c,d]);

坑: css 和 animate

這個算是jQuery裡面獨有的吧. css沒有反映時間, 效果是立即呈現的; animate 與之相反, 但是"只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。"

例子

    $('button').on('click', function () {
       box.css({
           'left': w,
           'top': h
           'position': 'absolute'
       })
    });

效果立顯. 位置, 方式等全部都改變.

    $('button').on('click', function () {
       box.animate({
           'left': w,
           'top': h
           'position': 'absolute'
       })
    });

相反, 只有位置改變, 方式不改變(position 無效).

坑: 本地圖片 vs 網絡圖片

做練習, 偷懶沒有將圖片下載到本地, 直接調用網絡上的圖片, 如下

        <div class="slider">
            <ul>
                <li>
                    <img src="https://octodex.github.com/images/saritocat.png" alt="saritocat"/>
                </li>
                <li>
                    <img src="https://octodex.github.com/images/topguntocat.png" alt="labtocat"/>
                </li>
                <li>
                    <img src="https://octodex.github.com/images/octoliberty.png" alt="octoliberty"/>
                </li>
                <li>
                    <img src="https://octodex.github.com/images/twenty-percent-cooler-octocat.png" alt="21"/>
                </li>
            </ul>
        </div>

用這個方法

    var sliderUL = $('div.slider').css('overflow', 'hidden').children('ul'),
        imgs = sliderUL.find('img'),
        imgWidth = imgs[0].width,
        console.log('pic width: '+imgs[0].width);

imgWidth為0, 將圖片換位本地後, 算出正常width, 又是jQuery的一個坑. 當然了, 另外一個解決方法就是將function傳入window.load之後.

$(window).load(function() {
     // content
});

順便提一句, $(document).ready(function(){})與$(window).load(function(){})的區別就是, 前者是DOM ready, 後這是content ready, 比如說圖片.