筆記，js對象淺析

學習筆記，

來源：http://www.cnblogs.com/zuiyirenjian/p/3535126.html

 作者：醉意人間 

此外，關於自運行函數可參考  http://benalman.com/news/2010/11/immediately-invoked-function-expression/

在JS中，也常常需要復用，將一些常見的操作封裝起來，目前看到的很多JS庫，比如JQuery就是非常典型的，那麼如何在JS中寫一個可復用的呢？雖然在JS中有類的這個說法，但是我對這個玩意還是很抵觸的，但是存在即合理。JS中的類是通過函數來模擬的，也就是說JS中的函數具有雙重角色，用new關鍵字的將函數視為類，不用new的，它就是一個普普通通的函數。

我們知道，類就是一個數據類型，這個數據類型由屬性和方法（函數）組成，如果函數只有屬性，沒有方法，那麼這樣的類，一般就單純的表示為一個數據，增加上一些方法，那麼類的功能將會有質的變化。既然在JS中，函數可以表示為類，而類中又有方法，那麼在JS中函數內部新定義一個函數，也就不足為怪。

JS中最為強大的內容，我認為除了原型，就是閉包，這裡就討論閉包，閉包其實就是在一個函數內部定義一個新的函數，在執行的時候，會將這個函數返回，也可能是返回一個對象。下麵就是一個簡單的閉包：

  var MathTest = function (x, y) {

        var x = x;
        var y = y;

      var add = function () {

            return x + y;

        }

        return add;

    }

 var x = MathTest(3, 4);

        alert(x());

在執行的時候MathTest就是內部的add函數，調用MathTest的時候，相當於執行了x+y，這其實並不起卦，可以將add認為是function內部的一個變數，只是這個變數的值是一個函數，內部的函數是可以訪問它的上一個級別的數據，所以我們可以得到正確的值。

var Img = function () {
        var T$ = function (id) { return document.getElementById(id); }
        var ua = navigator.userAgent,
        isIE = /msie/i.test(ua) && !window.opera;
        var i = 0, sinDeg = 0, cosDeg = 0, timer = null;
        var rotate = function (target, degree) {
            target = T$(target);
            var orginW = target.clientWidth, orginH = target.clientHeight;
            clearInterval(timer);
            function run(angle) {
                if (isIE) { // IE
                    cosDeg = Math.cos(angle * Math.PI / 180);
                    sinDeg = Math.sin(angle * Math.PI / 180);
                    with (target.filters.item(0)) {
                        M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
                    }
                    target.style.top = (orginH - target.offsetHeight) / 2 + 'px';
                    target.style.left = (orginW - target.offsetWidth) / 2 + 'px';
                } else if (target.style.MozTransform !== undefined) {  // Mozilla
                    target.style.MozTransform = 'rotate(' + angle + 'deg)';
                } else if (target.style.OTransform !== undefined) {   // Opera
                    target.style.OTransform = 'rotate(' + angle + 'deg)';
                } else if (target.style.webkitTransform !== undefined) { // Chrome Safari
                    target.style.webkitTransform = 'rotate(' + angle + 'deg)';
                } else {
                    target.style.transform = "rotate(" + angle + "deg)";
                }
            }

            timer = setInterval(function () {
                i += 10;
                run(i);
                if (i > degree - 1) {
                    i = 0;
                    clearInterval(timer);
                }
            }, 10);
        }
        return { rotate: rotate }

    } ();

調用代碼：

      Img.rotate('demo', 360);

這個是一個比較複雜的，但是不要怕，這裡會牽扯到另外的知識，自執行函數和匿名函數。

所謂匿名函數就是沒有名字的函數，形式如下：

function () {
   
    }

既然沒有名字，那麼如何調用呢：

var b=function () {
   
    }
b()

可以將匿名函數付給一個變數，這個變數現在就充當了這個函數的名稱，但是記住，這個不是名稱，我只是這麼叫，如果覺得不妥的話，可以認為b現在就是這個匿名函數的代表，在用的時候用b就等同於使用右邊的函數。除了這種方式，還有就是自執行函數，形式如下：

（function(){
          //代碼
        })();

自執行函數相當於我們上面兩步的結合：

var b=function () {
   
    }
b()

自執行函數是非常有用的，可以用它創建命名空間，只要把自己所有的代碼都寫在這個特殊的函數包裝內，在使用的時候只需要用這個奇怪的函數即可，偉大的JQuery就是通過這個奇怪的函數創建了一個$的對象，在這個匿名函數中，往往會定義一個屬於自己的命名空間，或者返回一個屬於自己的對象，上面的Img對象包含了旋轉圖片的操作，這操作中，調用了很多匿名函數中定義的其它方法，這些方法都是為Rotate來服務的。那麼以後寫自己可服用的操作的時候，就可以通過這種做法。

我們見到的操作通常都是返回一個對象，但是也可以放回一個函數，下麵的，但是調用的時候，寫法有所差異：

    var Img = function () {
        var T$ = function (id) { return document.getElementById(id); }
        var ua = navigator.userAgent,
        isIE = /msie/i.test(ua) && !window.opera;
        var i = 0, sinDeg = 0, cosDeg = 0, timer = null;
        var rotate = function (target, degree) {
            target = T$(target);
            var orginW = target.clientWidth, orginH = target.clientHeight;
            clearInterval(timer);
            function run(angle) {
                if (isIE) { // IE
                    cosDeg = Math.cos(angle * Math.PI / 180);
                    sinDeg = Math.sin(angle * Math.PI / 180);
                    with (target.filters.item(0)) {
                        M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
                    }
                    target.style.top = (orginH - target.offsetHeight) / 2 + 'px';
                    target.style.left = (orginW - target.offsetWidth) / 2 + 'px';
                } else if (target.style.MozTransform !== undefined) {  // Mozilla
                    target.style.MozTransform = 'rotate(' + angle + 'deg)';
                } else if (target.style.OTransform !== undefined) {   // Opera
                    target.style.OTransform = 'rotate(' + angle + 'deg)';
                } else if (target.style.webkitTransform !== undefined) { // Chrome Safari
                    target.style.webkitTransform = 'rotate(' + angle + 'deg)';
                } else {
                    target.style.transform = "rotate(" + angle + "deg)";
                }
            }

            timer = setInterval(function () {
                i += 10;
                run(i);
                if (i > degree - 1) {
                    i = 0;
                    clearInterval(timer);
                }
            }, 10);
        }
        return  rotate ；

    } ();

調用代碼：

      Img('demo', 360);

這兩種方式，根據自己的習慣，我個人傾向前者。