五月天婷亚洲天综合网,毛片A片免费视频不卡观看

首頁

022020-6

React 簡單介紹

why React？

React是Facebook開發(fā)的一款JS庫，那么Facebook為什么要建造React呢，主要為了解決什么問題，通過這個又是如何解決的？

從這幾個問題出發(fā)我就在網(wǎng)上搜查了一下，有這樣的解釋。

Facebook認(rèn)為MVC無法滿足他們的擴(kuò)展需求，由于他們非常巨大的代碼庫和龐大的組織，使得MVC很快變得非常復(fù)復(fù)雜，每當(dāng)需要添加一項新的功能或特性時，系統(tǒng)的復(fù)雜度就成級數(shù)增長，致使代碼變得脆弱和不可預(yù)測，結(jié)果導(dǎo)致他們的MVC正在土崩瓦解。認(rèn)為MVC不適合大規(guī)模應(yīng)用，當(dāng)系統(tǒng)中有很多的模型和相應(yīng)的視圖時，其復(fù)雜度就會迅速擴(kuò)大，非常難以理解和調(diào)試，特別是模型和視圖間可能存在的雙向數(shù)據(jù)流動。

解決這個問題需要“以某種方式組織代碼，使其更加可預(yù)測”，這通過他們(Facebook)提出的Flux和React已經(jīng)完成。

Flux是一個系統(tǒng)架構(gòu)，用于推進(jìn)應(yīng)用中的數(shù)據(jù)單向流動。React是一個JavaScript框架，用于構(gòu)建“可預(yù)期的”和“聲明式的”Web用戶界面，它已經(jīng)使Facebook更快地開發(fā)Web應(yīng)用

對于Flux，目前還沒怎么研究，不怎么懂，這里就先把Flux的圖放上來，有興趣或者了解的可以再分享下，這里主要說下React。

那么React是解決什么問題的，在官網(wǎng)可以找到這樣一句話：

We built React to solve one problem: building large applications with data that changes over time.

構(gòu)建那些數(shù)據(jù)會隨時間改變的大型應(yīng)用，做這些，React有兩個主要的特點(diǎn)：

簡單
簡單的表述任意時間點(diǎn)你的應(yīng)用應(yīng)該是什么樣子的，React將會自動的管理UI界面更新當(dāng)數(shù)據(jù)發(fā)生變化的時候。
聲明式
在數(shù)據(jù)發(fā)生變化的時候，React從概念上講與點(diǎn)擊了F5一樣，實(shí)際上它僅僅是更新了變化的一部分而已。
React是關(guān)于構(gòu)造可重用組件的，實(shí)際上，使用React你做的僅僅是構(gòu)建組建。通過封裝，使得組件代碼復(fù)用、測試以及關(guān)注點(diǎn)分離更加容易。

另外在React官網(wǎng)上，通過《Why did we build React?》為什么我們要建造React的文檔中還可以了解到以下四點(diǎn)：

React不是一個MVC框架
React不使用模板
響應(yīng)式更新非常簡單
HTML5僅僅是個開始

React主要的原理

Virtual DOM 虛擬DOM
傳統(tǒng)的web應(yīng)用，操作DOM一般是直接更新操作的，但是我們知道DOM更新通常是比較昂貴的。而React為了盡可能減少對DOM的操作，提供了一種不同的而又強(qiáng)大的方式來更新DOM，代替直接的DOM操作。就是Virtual DOM,一個輕量級的虛擬的DOM，就是React抽象出來的一個對象，描述dom應(yīng)該什么樣子的，應(yīng)該如何呈現(xiàn)。通過這個Virtual DOM去更新真實(shí)的DOM，由這個Virtual DOM管理真實(shí)DOM的更新。

為什么通過這多一層的Virtual DOM操作就能更快呢？這是因為React有個diff算法，更新Virtual DOM并不保證馬上影響真實(shí)的DOM，React會等到事件循環(huán)結(jié)束，然后利用這個diff算法，通過當(dāng)前新的dom表述與之前的作比較，計算出最小的步驟更新真實(shí)的DOM。

Components 組件
在DOM樹上的節(jié)點(diǎn)被稱為元素，在這里則不同，Virtual DOM上稱為commponent。Virtual DOM的節(jié)點(diǎn)就是一個完整抽象的組件，它是由commponents組成。

component 的使用在 React 里極為重要, 因為 components 的存在讓計算 DOM diff 更。

State 和 Render
React是如何呈現(xiàn)真實(shí)的DOM，如何渲染組件，什么時候渲染，怎么同步更新的，這就需要簡單了解下State和Render了。state屬性包含定義組件所需要的一些數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時，將會調(diào)用Render重現(xiàn)渲染，這里只能通過提供的setState方法更新數(shù)據(jù)。

好了，說了這么多，下面看寫代碼吧，先看一個官網(wǎng)上提供的Hello World的示例：

<!DOCTYPE html> <html> <head> <script src="http://fb.me/react-0.12.1.js"></script> <script src="http://fb.me/JSXTransformer-0.12.1.js"></script> </head> <body> <div id="example"></div> <script type="text/jsx"> React.render( <h1>Hello, world!</h1>,
        document.getElementById('example')
      ); </script> </body> </html>

這個很簡單，瀏覽器訪問，可以看到Hello, world!字樣。JSXTransformer.js是支持解析JSX語法的，JSX是可以在Javascript中寫html代碼的一種語法。如果不喜歡，React也提供原生Javascript的方法。

再來看下另外一個例子：

<html>
    <head>
        <title>Hello React</title>
        <script src="http://fb.me/react-0.12.1.js"></script>
        <script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
        <style>
        #content{
            width: 800px;
            margin: 0 auto;
            padding: 5px 10px;
            background-color:#eee;
        }
        .commentBox h1{
            background-color: #bbb;
        }
        .commentList{
            border: 1px solid yellow;
            padding:10px;
        }
        .commentList .comment{
            border: 1px solid #bbb;
            padding-left: 10px;
            margin-bottom:10px;
        }
        .commentList .commentAuthor{
            font-size: 20px;
        }
        .commentForm{
            margin-top: 20px;
            border: 1px solid red;
            padding:10px;
        }
        .commentForm textarea{
            width:100%;
            height:50px;
            margin:10px 0 10px 2px;
        }
        </style>
    </head>
    <body>
        <div id="content"></div>
        <script type="text/jsx">
        var staticData = [
            {author: "張飛", text: "我在寫一條評論~！"},
            {author: "關(guān)羽", text: "2貨，都知道你在寫的是一條評論。。"},
            {author: "劉備", text: "哎，咋跟這倆逗逼結(jié)拜了！"}
        ];

        var converter = new Showdown.converter();//markdown

        /** 組件結(jié)構(gòu)：
            <CommentBox>
                <CommentList>
                    <Comment />
                </CommentList>
                <CommentForm />
            </CommentBox>
        */
        //評論內(nèi)容組件
        var Comment = React.createClass({
            render: function (){
                var rawMarkup = converter.makeHtml(this.props.children.toString());
                return (
                    <div className="comment">
                        <h2 className="commentAuthor">
                            {this.props.author}:
                        </h2>
                        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
                    </div>
                );
            }
        });
        //評論列表組件
        var CommentList = React.createClass({
            render: function (){
                var commentNodes = this.props.data.map(function (comment){
                    return (
                        <Comment author={comment.author}>
                            {comment.text}
                        </Comment>
                    );
                });

                return (
                    <div className="commentList">
                        {commentNodes}
                    </div>
                );
            }
        });

        //評論表單組件
        var CommentForm = React.createClass({
            handleSubmit: function (e){
                e.preventDefault();
                var author = this.refs.author.getDOMNode().value.trim();
                var text = this.refs.text.getDOMNode().value.trim();
                if(!author || !text){
                    return;
                }
                this.props.onCommentSubmit({author: author, text: text});
                this.refs.author.getDOMNode().value = '';
                this.refs.text.getDOMNode().value = '';
                return;
            },
            render: function (){
                return (
                    <form className="commentForm" onSubmit={this.handleSubmit}>
                        <input type="text" placeholder="Your name" ref="author" /><br/>
                        <textarea type="text" placeholder="Say something..." ref="text" ></textarea><br/>
                        <input type="submit" value="Post" />
                    </form>
                );
            }
        });

        //評論塊組件
        var CommentBox = React.createClass({
            loadCommentsFromServer: function (){
                this.setState({data: staticData});
                /*
                方便起見，這里就不走服務(wù)端了，可以自己嘗試
                $.ajax({
                    url: this.props.url + "?_t=" + new Date().valueOf(),
                    dataType: 'json',
                    success: function (data){
                        this.setState({data: data});
                    }.bind(this),
                    error: function (xhr, status, err){
                        console.error(this.props.url, status, err.toString());
                    }.bind(this)
                });
                */
            },
            handleCommentSubmit: function (comment){
                //TODO: submit to the server and refresh the list
                var comments = this.state.data;
                var newComments = comments.concat([comment]);

                //這里也不向后端提交了
                staticData = newComments;

                this.setState({data: newComments});
            },
            //初始化 相當(dāng)于構(gòu)造函數(shù)
            getInitialState: function (){
                return {data: []};
            },
            //組件添加的時候運(yùn)行
            componentDidMount: function (){
                this.loadCommentsFromServer();
                this.interval = setInterval(this.loadCommentsFromServer, this.props.pollInterval);
            },
            //組件刪除的時候運(yùn)行
            componentWillUnmount: function() {
                clearInterval(this.interval);
            },
            //調(diào)用setState或者父級組件重新渲染不同的props時才會重新調(diào)用
            render: function (){
                return (
                    <div className="commentBox">
                        <h1>Comments</h1>
                        <CommentList data={this.state.data}/>
                        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
                    </div>
                );
            }
        });

        //當(dāng)前目錄需要有comments.json文件
        //這里定義屬性，如url、pollInterval，包含在props屬性中
        React.render(
            <CommentBox url="comments.json" pollInterval="2000" />,
            document.getElementById("content")
        );
        </script>
    </body>
</html>

乍一看挺多，主要看腳本部分就可以了。方便起見，這里都沒有走后端。定義了一個全局的變量staticData，可權(quán)當(dāng)是走服務(wù)端，通過瀏覽器的控制臺改變staticData的值，查看下效果，提交一條評論，查看下staticData的值的變化。

應(yīng)用情況

國外應(yīng)用的較多，facebook、Yahoo、Reddit等。在github可以看到一個列表Sites-Using-React，國內(nèi)的話，查了查，貌似比較少，目前知道的有一個杭州大搜車。大多技術(shù)要在國內(nèi)應(yīng)用起來一般是較慢的，不過React確實(shí)感覺比較特殊，特別是UI的組件化和Virtual DOM的思想，我個人比較看好，有興趣繼續(xù)研究研究。

比較分析

和其他一些js框架相比，React怎樣，比如Backbone、Angular等。

React不是一個MVC框架，它是構(gòu)建易于可重復(fù)調(diào)用的web組件，側(cè)重于UI, 也就是view層
其次React是單向的從數(shù)據(jù)到視圖的渲染，非雙向數(shù)據(jù)綁定
不直接操作DOM對象，而是通過虛擬DOM通過diff算法以最小的步驟作用到真實(shí)的DOM上。
不便于直接操作DOM，大多數(shù)時間只是對 virtual DOM 進(jìn)行編程

作者：RK_CODER
鏈接：https://www.jianshu.com/p/ae482813b791
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

評論(0) 瀏覽(3014)

022020-6

手機(jī)appUI界面設(shè)計賞析（二）

前端達(dá)人

與傳統(tǒng)PC桌面不同，手機(jī)屏幕的尺寸更加小巧操作，方式也已觸控為主，APP界面設(shè)計不但要保證APP功能的完整性和合理性，又要保證APP的功能性和實(shí)用性，在保證其擁有流暢的操作感受的同時，滿足人們的審美需求。

接下來為大家介紹幾款手機(jī)appui界面設(shè)計

--手機(jī)appUI設(shè)計--

（以上圖片均來源于網(wǎng)絡(luò)）

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

更多精彩文章：

手機(jī)appUI界面設(shè)計賞析（一）

評論(0) 瀏覽(3636)

012020-6

JavaScript必須掌握的基礎(chǔ) --- 閉包

seo達(dá)人

閉包(Closure)的定義

閉包是一個讓初級JavaScript使用者既熟悉又陌生的一個概念。因為閉包在我們書寫JavaScript代碼時，隨處可見，但是我們又不知道哪里用了閉包。

關(guān)于閉包的定義，網(wǎng)上(書上)的解釋總是千奇百怪，我們也只能“取其精華去其糟粕”去總結(jié)一下。

即使函數(shù)在當(dāng)前作用域外調(diào)用，但是還能訪問當(dāng)前作用域中的變量和函數(shù)
有權(quán)訪問另一個函數(shù)作用域中的變量(函數(shù))的函數(shù)。
閉包是指那些能夠訪問自由變量的函數(shù)

ECMAScript中，閉包指的是：

從理論角度：所有的函數(shù)都是閉包。因為它們都在創(chuàng)建的時候就將上層上下文的數(shù)據(jù)保存起來了。哪怕是簡單的全局變量也是如此，因為函數(shù)中訪問全局變量也就相當(dāng)于是在訪問自由變量，這個時候使用最外層的作用域。
從實(shí)踐角度：一下才算是閉包：
- 即使創(chuàng)建它的上下文已經(jīng)銷毀，它仍然存在。
- 在代碼中引用了自由變量。

閉包跟詞法作用域，作用域鏈，執(zhí)行上下文這幾個JavaScript中重要的概念都有關(guān)系，因此要想真的理解閉包，至少要對那幾個概念不陌生。

閉包的優(yōu)點(diǎn)：

可以是用函數(shù)內(nèi)部的變量(函數(shù))，也可以說是可以訪問函數(shù)作用域。
擁有私有變量，避免污染全局變量

閉包的缺點(diǎn)：

私有變量一直存在，占用內(nèi)存。

我們來一步一步引出閉包。

自執(zhí)行函數(shù) ( IIFE )

自執(zhí)行函數(shù)也叫立即調(diào)用函數(shù)(IIFE)，是一個在定義時就執(zhí)行的函數(shù)。

var a=1;
(function() { console.log(a)
})()

上述代碼是一個最簡單的自執(zhí)行函數(shù)。

在ES6之前，是沒有塊級作用域的，只有全局作用域和函數(shù)作用域，因此自執(zhí)行函數(shù)還能在ES6之前實(shí)現(xiàn)塊級作用域。

// ES6 塊級作用域 var a = 1; if(true) { let a=111; console.log(a); // 111 } console.log(a); // 1

這里 if{} 中用let聲明了一個 a。這個 a 就具有塊級作用域，在這個 {} 中訪問 a ，永遠(yuǎn)訪問的都是 let 聲明的a，跟全局作用域中的a沒有關(guān)系。如果我們把 let 換成 var ，就會污染全局變量 a 。

如果用自執(zhí)行函數(shù)來實(shí)現(xiàn)：

var a = 1;
(function() { if(true) { var a=111; console.log(a); // 111 }
})() console.log(a); // 1

為什么要在這里要引入自執(zhí)行函數(shù)的概念呢？因為通常我們會用自執(zhí)行函數(shù)來創(chuàng)建閉包，實(shí)現(xiàn)一定的效果。

來看一個基本上面試提問題：

for(var i=0;i<5;i++) {
    setTimeout(function() { console.log(i);
    },1000)
}

在理想狀態(tài)下我們期望輸出的是 0 ，1 ，2 ，3 ，4。但是實(shí)際上輸出的是5 ，5 ，5 ，5 ，5。為什么是這樣呢？其實(shí)這里不僅僅涉及到作用域，作用域鏈還涉及到Event Loop、微任務(wù)、宏任務(wù)。但是在這里不講這些。

下面我們先解釋它為什么會輸出 5個5，然后再用自執(zhí)行函數(shù)來修改它，以達(dá)到我們預(yù)期的結(jié)果。

提示：for 循環(huán)中，每一次的都聲明一個同名變量，下一個變量的值為上一次循環(huán)執(zhí)行完同名變量的值。

首先用var聲明變量 for 是不會產(chǎn)生塊級作用域的，所以在 () 中聲明的 i 為全局變量。相當(dāng)于：

// 偽代碼 var i; for(i=0;i<5;i++) {
    setTimeout(function() { console.log(i);
    },1000)
}

setTimeout中的第一個參數(shù)為一個全局的匿名函數(shù)。相當(dāng)于：

// 偽代碼 var i; var f = function() { console.log(i);
} for(i=0;i<5;i++) {
    setTimeout(f,1000)
}

由于setTimeout是在1秒之后執(zhí)行的，這個時候for循環(huán)已經(jīng)執(zhí)行完畢，此時的全局變量 i 已經(jīng)變成了 5 。1秒后5個setTimeout中的匿名函數(shù)會同時執(zhí)行，也就是5個 f 函數(shù)執(zhí)行。這個時候 f 函數(shù)使用的變量 i 根據(jù)作用域鏈的查找規(guī)則找到了全局作用域中的 i 。因此會輸出 5 個5。

那我們怎樣來修改它呢？

思路1：讓setTimeout匿名函數(shù)中訪問的變量 i 不再訪問全局作用域中的 i 。因此把它包裹在一個函數(shù)作用域中。這時匿名函數(shù)訪問變量 i 時，會先去包裹它的函數(shù)作用域中查找。

for(var i=0;i<5;i++) {
    (function (){ setTimeout(function() { console.log(i);
        },1000)
    })();
}

上述例子會輸出我們期望的值嗎？答案是否。為什么呢？我們雖然把 setTimeout 包裹在一個匿名函數(shù)中了，但是當(dāng)setTimeout中匿名函數(shù)執(zhí)行時，首先去匿名函數(shù)中查找 i 的值，找不到還是會找到全局作用域中，最終 i 的值仍然是全局變量中的 i ，仍然為 5個5.

那我們把外層的匿名函數(shù)中聲明一個變量 j 讓setTimeout中的匿名函數(shù)訪問這個 j 不就找不到全局變量中的變量了嗎。

for(var i=0;i<5;i++) {
    (function (){ var j = i;
        setTimeout(function() { console.log(j);
        },1000)
    })();
}

這個時候才達(dá)到了我們預(yù)期的結(jié)果：0 1 2 3 4。

我們來優(yōu)化一下：

for(var i=0;i<5;i++) {
    (function (i){ setTimeout(function() { console.log(i);
        },1000)
    })(i);
}

*思路2：用 let 聲明變量，產(chǎn)生塊級作用域。

for(let i=0;i<5;i++) {
    setTimeout(function() { console.log(i);
    },1000)
}

這時for循環(huán)5次，產(chǎn)生 5 個塊級作用域，也會聲明 5 個具有塊級作用域的變量 i ，因此setTimeout中的匿名函數(shù)每次執(zhí)行時，訪問的 i 都是當(dāng)前塊級作用域中的變量 i 。

理論中的閉包

什么是理論中的閉包？就是看似像閉包，其實(shí)并不是閉包。它只是類似于閉包。

 function foo() { var a=2; function bar() { console.log(a); // 2 }
    bar();
}
foo();

上述代碼根據(jù)最上面我們對閉包的定義，它并不完全是閉包，雖然是一個函數(shù)可以訪問另一個函數(shù)中的變量，但是被嵌套的函數(shù)是在當(dāng)前詞法作用域中被調(diào)用的。

實(shí)踐中的閉包

我們怎樣把上述代碼foo 函數(shù)中的bar函數(shù)，在它所在的詞法作用域外執(zhí)行呢？

下面的代碼就清晰的展示了閉包：

function foo() { var a=2; function bar() { console.log(a);
    } return bar;
} var baz=foo();
baz(); // 2 —— 朋友，這就是閉包的效果。

上述代碼中 bar 被當(dāng)做 foo函數(shù)返回值。foo函數(shù)執(zhí)行后把返回值也就是 bar函數(shù) 賦值給了全局變量 baz。當(dāng) baz 執(zhí)行時，實(shí)際上也就是 bar 函數(shù)的執(zhí)行。我們知道 foo 函數(shù)在執(zhí)行后，foo 的內(nèi)部作用域會被銷毀，因為引擎有垃圾回收期來釋放不再使用的內(nèi)存空間。所以在bar函數(shù)執(zhí)行時，實(shí)際上foo函數(shù)內(nèi)部的作用域已經(jīng)不存在了，理應(yīng)來說 bar函數(shù) 內(nèi)部再訪問 a 變量時是找不到的。但是閉包的神奇之處就在這里。由于 bar 是在 foo 作用域中被聲明的，所以 bar函數(shù) 會一直保存著對 foo 作用域的引用。這時就形成了閉包。

我們先看個例子：

var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope;
    } return f;
} var foo = checkscope();
foo();

我們用偽代碼來解釋JavaScript引擎在執(zhí)行上述代碼時的步驟：

當(dāng)JavaScript引擎遇到可執(zhí)行代碼時，就會進(jìn)入一個執(zhí)行上下文(環(huán)境)
首先遇到的是全局代碼，因此進(jìn)入全局執(zhí)行上下文，把全局執(zhí)行上下文壓入執(zhí)行上下文棧。
全局上下文創(chuàng)建時會先在內(nèi)部創(chuàng)建VO/AO，作用域鏈，this。然后執(zhí)行代碼。
當(dāng)遇到 checkscope 函數(shù)執(zhí)行時，進(jìn)入checkscope的執(zhí)行上下文，然后壓入執(zhí)行上下文棧。
checkscope 執(zhí)行上下文創(chuàng)建時會先在內(nèi)部創(chuàng)建VO/AO，作用域鏈，this。然后執(zhí)行代碼。
當(dāng)checkscope 函數(shù)執(zhí)行完畢時，會從執(zhí)行上下文棧中彈出，此時它的AO也會被瀏覽器回收。(這是理想狀態(tài)下)
執(zhí)行foo函數(shù)，向上查找foo的值，發(fā)現(xiàn)foo的值為checkscope函數(shù)內(nèi)部函數(shù)f。因此這一步為執(zhí)行 checkscope 內(nèi)部函數(shù)f。
執(zhí)行f函數(shù)同執(zhí)行 checkscope 的步驟一致。
f 函數(shù)執(zhí)行完畢，從執(zhí)行上下文棧中彈出。

但是我們想一個問題，checkscope函數(shù)執(zhí)行完畢，它的執(zhí)行上下文從棧中彈出，也就是銷毀了不存在了，f 函數(shù)還能訪問包裹函數(shù)的作用域中的變量(scope)嗎？答案是可以。

理由是在第6步，我們說過當(dāng)checkscope 執(zhí)行函數(shù)執(zhí)行完畢時，它的執(zhí)行上下文會從棧中彈出，此時活動對象也會被回收，按理說當(dāng) f 在訪問checkscope的活動對象時是訪問不到的。

其實(shí)這里還有個概念，叫做作用域鏈：當(dāng) checkscope 函數(shù)被創(chuàng)建時，會創(chuàng)建對應(yīng)的作用域鏈，里面值存放著包裹它的作用域?qū)?yīng)執(zhí)行上下文的變量對象，在這里只是全局執(zhí)行上下文的變量對象，當(dāng)checkscope執(zhí)行時，此時的作用域鏈變化了，里面存放的是變量對象(活動對象)的集合，最頂端是當(dāng)前函數(shù)的執(zhí)行上下文的活動對象。端是全局執(zhí)行上下文的變量對象。類似于：

checkscope.scopeChain = [
    checkscope.AO
    global.VO
]

當(dāng)checkscope執(zhí)行碰到了 f 函數(shù)的創(chuàng)建，因此 f 函數(shù)也會創(chuàng)建對應(yīng)的作用域鏈，默認(rèn)以包裹它的函數(shù)執(zhí)行時對應(yīng)的作用域鏈為基礎(chǔ)。因此此時 f 函數(shù)創(chuàng)建時的作用域鏈如下：

checkscope.scopeChain = [
    checkscope.AO
    global.VO
]

當(dāng) f 函數(shù)執(zhí)行時，此時的作用域鏈變化如下：

checkscope.scopeChain = [
    f.AO
    checkscope.AO
    global.VO
]

當(dāng)checkscope函數(shù)執(zhí)行完畢，內(nèi)部作用域會被回收，但是 f函數(shù) 的作用域鏈還是存在的，里面存放著 checkscope函數(shù)的活動對象，因此在f函數(shù)執(zhí)行時會從作用域鏈中查找內(nèi)部使用的 scope 標(biāo)識符，從而在作用域鏈的第二位找到了，也就是在 checkscope.AO 找到了變量scope的值。

正是因為JavaScript做到了這一點(diǎn)，因此才會有閉包的概念。還有人說閉包并不是為了擁有它采取設(shè)計它的，而是設(shè)計作用域鏈時的副作用產(chǎn)物。

閉包是JavaScript中最難的點(diǎn)，也是平常面試中常問的問題，我們必須要真正的去理解它，如果只靠死記硬背是經(jīng)不起考驗的。

評論(0) 瀏覽(2865)

1 2 3 4

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.yvirxh.cn

首頁

React 簡單介紹

why React？

React主要的原理

應(yīng)用情況

比較分析

手機(jī)appUI界面設(shè)計賞析（二）

JavaScript必須掌握的基礎(chǔ) --- 閉包

閉包(Closure)的定義

自執(zhí)行函數(shù) ( IIFE )

理論中的閉包

實(shí)踐中的閉包

分類

日歷

鏈接

個人資料

存檔

首頁

React 簡單介紹

why React？

React主要的原理

應(yīng)用情況

比較分析

手機(jī)appUI界面設(shè)計賞析（二）

JavaScript必須掌握的基礎(chǔ) --- 閉包

閉包(Closure)的定義

自執(zhí)行函數(shù) ( IIFE )

理論中的閉包

實(shí)踐中的閉包

分類

日歷

鏈接

個人資料

存檔

why React？