四虎在线成人免费观看,国产精品久久久久7777,小嫩批日出水无码视频免费

公告

序

　　昨天寫了篇通過jQuery源碼學(xué)習(xí)javascript（一），里面有一個(gè)定義對(duì)象C的方法，我早期也沒有太注意這個(gè)方面的技術(shù)細(xì)節(jié)。后來我查了一下資料，發(fā)現(xiàn)里面有很多巧的地方。今天與大家分享。

巧妙1：函數(shù)

　　在javascript代碼中函數(shù)是個(gè)不可多得的人才。

　　　　? 它可以歸置代碼段，封裝相對(duì)獨(dú)立的功能。

　　　　? 它也可以實(shí)現(xiàn)類，注入ＯＯＰ思想。

　　jQuery就是一個(gè)函數(shù)，你也可以把它當(dāng)成類（呵呵，本身就是類）。

(function(){
    var jQuery = function() {
        // 函數(shù)體
    }   
    window.jQuery = window.$ = jQuery;
})();
console.log(jQuery);

輸出結(jié)果

上面的空函數(shù)就是所謂的構(gòu)造函數(shù)，構(gòu)造函數(shù)在面向?qū)ο笳Z言中是類的一個(gè)基本方法。

巧妙2：擴(kuò)展原型

　　何為原型對(duì)象？我給出一篇博文大家可以去了解一下http://www.rzrgm.cn/gnface/archive/2012/08/22/2651534.html。

　　javascript為所有函數(shù)綁定一個(gè)prototype屬性，由這個(gè)屬性指向一個(gè)原型對(duì)象。我們?cè)谠蛯?duì)象中定義類的繼承屬性和方法等。

　　原型對(duì)象是javascript實(shí)現(xiàn)繼承的基本機(jī)制。

(function(){
    var jQuery = function() {
        // 函數(shù)體
    }
    jQuery.fn = jQuery.prototype = {
        // 擴(kuò)展原型對(duì)象
        jquery: "1.8.3",
        test: function() {
            console.log('test');
        }
    }
    window.jQuery = window.$ = jQuery;
})();

(new jQuery()).test();

巧妙3：使用工廠方法來創(chuàng)建一個(gè)實(shí)例

　　上面的方法必須使用下面的方法才能進(jìn)行調(diào)用，這樣就會(huì)產(chǎn)生很多對(duì)象，從而浪費(fèi)內(nèi)存消耗。

(new jQuery()).test();

　　jQuery源碼使用了很柔和的方法，也是大家比較熟悉的工廠方法，進(jìn)行調(diào)用。

(function(){
    var jQuery = function() {
        // 函數(shù)體
        return jQuery.fn.init();
    }
    jQuery.fn = jQuery.prototype = {
        // 擴(kuò)展原型對(duì)象
        jquery: "1.8.3",
        init: function() {
            return this;
        },  
        test: function() {
            console.log('test');
        }   
    }   
    window.jQuery = window.$ = jQuery;
})();
jQuery().test();

假想1：讓jQuery函數(shù)體直接返回該對(duì)象——我用this

(function(){
    var jQuery = function() {
        return this;
    }   
    jQuery.fn = jQuery.prototype = {
        // 擴(kuò)展原型對(duì)象
        jquery: "1.8.3",
        test: function() {
            console.log('test');
        }   
    }   
    window.jQuery = window.$ = jQuery;
})();
console.log(jQuery());

輸出結(jié)果

發(fā)現(xiàn)這里的this指向Window對(duì)象。　　

假想2：讓jQuery函數(shù)體直接返回類的實(shí)例。

(function(){
    var jQuery = function() {
        return new jQuery();
    }   
    jQuery.fn = jQuery.prototype = {
        // 擴(kuò)展原型對(duì)象
        jquery: "1.8.3",
        test: function() {
            console.log('test');
        }   
    }   
    window.jQuery = window.$ = jQuery;
})();
console.log(jQuery());

輸出結(jié)果

發(fā)現(xiàn)上面是一個(gè)遞歸死循環(huán)，出現(xiàn)內(nèi)存外溢。

巧妙4：分隔作用域

思考1：init()方法返回的this作用域是什么？

(function(){
    var jQuery = function() {
        // 函數(shù)體
        return jQuery.fn.init();
    }
    jQuery.fn = jQuery.prototype = {
        // 擴(kuò)展原型對(duì)象
        jquery: "1.8.3",
        init: function() {
            this.init_jquery = '2.0';
            return this;
        }
    }   
    window.jQuery = window.$ = jQuery;
})();   
console.log(jQuery().jquery);
console.log(jQuery().init_jquery);

輸出結(jié)果

init()方法中的this作用域：this關(guān)鍵字引用了init()函數(shù)作用域所在的對(duì)象，同時(shí)也能夠訪問上一級(jí)對(duì)象jQuery.fn對(duì)象的作用。——這種思路會(huì)破壞作用域的獨(dú)立性，對(duì)于jQuery框架來說，很可能造成消極影響。

思考2：怎么把init()中的this從jQuery.fn對(duì)象中分隔出來？——實(shí)例化init初始化類型。

(function(){
    var jQuery = function() {
        // 函數(shù)體
        return new jQuery.fn.init();
    }
    jQuery.fn = jQuery.prototype = {
        // 擴(kuò)展原型對(duì)象
        jquery: "1.8.3",
        init: function() {
            this.init_jquery = '2.0';
            return this;
        }
    }   
    window.jQuery = window.$ = jQuery;
})();   
console.log(jQuery().jquery);
console.log(jQuery().init_jquery);

輸出結(jié)果

通過實(shí)例化init()初始化類型，限定了init()方法里的this，只在init()函數(shù)內(nèi)活動(dòng)，不讓它超出范圍。

巧妙5：原型傳遞

思考1：在巧妙4中，我們把init()中的this從jquery.fn對(duì)象中分隔出來。那我們?nèi)绾文茏龅奖ＷC“巧妙4”的基礎(chǔ)上，還能訪問jQuery原型對(duì)象呢？——原型傳遞。

讓jQuery的原型對(duì)象覆蓋init()構(gòu)造器的原型對(duì)象。

jQuery.fn.init.prototype = jQuery.fn;

全部代碼：

(function(){
    var jQuery = function() {
        // 函數(shù)體
        return new jQuery.fn.init();
    }
    jQuery.fn = jQuery.prototype = {
        // 擴(kuò)展原型對(duì)象
        jquery: "1.8.3",
        init: function() {
            this.init_jquery = '2.0';
            return this;
        }
    }   
    jQuery.fn.init.prototype = jQuery.fn;
    window.jQuery = window.$ = jQuery;
})();
console.log(jQuery().jquery);
console.log(jQuery().init_jquery);

輸出結(jié)果

妙棋

　　把init()對(duì)象的prototype指針指向jQuery.fn?！@樣init()里的this繼承了jQuery.fn原型對(duì)象定義的方法和屬性。

總結(jié)

　　感謝博友的留言，尤其是puni ，給我介紹了一本不錯(cuò)的書。如果大家能補(bǔ)充一下，那就再好不過了。

川山甲

川山甲

公告