頁面設計將全部的structure功能都集中于之中。
html結構圖-01
html結構圖與word文檔做平行的對比。
html結構圖-02
Murach的總結比其他的教材更為出色。
HTML負責結構,CSS負責裝飾,用html的strucure思路重新思考word的排版。
avaScript深入系列第七篇,結合之前所講的四篇文章,以權威指南的demo為例,具體講解當函數執行的時候,執行上下文棧、變量對象、作用域鏈是如何變化的。
在《JavaScript深入之執行上下文?!分兄v到,當 JavaScript 代碼執行一段可執行代碼(executable code)時,會創建對應的執行上下文(execution context)。
對于每個執行上下文,都有三個重要屬性:
然后分別在《JavaScript深入之變量對象》、《JavaScript深入之作用域鏈》、《JavaScript深入之從ECMAScript規范解讀this》中講解了這三個屬性。
閱讀本文前,如果對以上的概念不是很清楚,希望先閱讀這些文章。
因為,這一篇,我們會結合著所有內容,講講執行上下文的具體處理過程。
在《JavaScript深入之詞法作用域和動態作用域》中,提出這樣一道思考題:
var scope="global scope";
function checkscope(){
var scope="local scope";
function f(){
return scope;
}
return f();
}
checkscope();
var scope="global scope";
function checkscope(){
var scope="local scope";
function f(){
return scope;
}
return f;
}
checkscope()();
兩段代碼都會打印'local scope'。雖然兩段代碼執行的結果一樣,但是兩段代碼究竟有哪些不同呢?
緊接著就在下一篇《JavaScript深入之執行上下文棧》中,講到了兩者的區別在于執行上下文棧的變化不一樣,然而,如果是這樣籠統的回答,依然顯得不夠詳細,本篇就會詳細的解析執行上下文棧和執行上下文的具體變化過程。
我們分析第一段代碼:
var scope="global scope";
function checkscope(){
var scope="local scope";
function f(){
return scope;
}
return f();
}
checkscope();
執行過程如下:
1.執行全局代碼,創建全局執行上下文,全局上下文被壓入執行上下文棧
ECStack=[
globalContext
];
2.全局上下文初始化
globalContext={
VO: [global, scope, checkscope],
Scope: [globalContext.VO],
this: globalContext.VO
}
2.初始化的同時,checkscope 函數被創建,保存作用域鏈到函數的內部屬性[[scope]]
checkscope.[[scope]]=[
globalContext.VO
];
3.執行 checkscope 函數,創建 checkscope 函數執行上下文,checkscope 函數執行上下文被壓入執行上下文棧
ECStack=[
checkscopeContext,
globalContext
];
4.checkscope 函數執行上下文初始化:
同時 f 函數被創建,保存作用域鏈到 f 函數的內部屬性[[scope]]
checkscopeContext={
AO: {
arguments: {
length: 0
},
scope: undefined,
f: reference to function f(){}
},
Scope: [AO, globalContext.VO],
this: undefined
}
5.執行 f 函數,創建 f 函數執行上下文,f 函數執行上下文被壓入執行上下文棧
ECStack=[
fContext,
checkscopeContext,
globalContext
];
6.f 函數執行上下文初始化, 以下跟第 4 步相同:
fContext={
AO: {
arguments: {
length: 0
}
},
Scope: [AO, checkscopeContext.AO, globalContext.VO],
this: undefined
}
7.f 函數執行,沿著作用域鏈查找 scope 值,返回 scope 值
8.f 函數執行完畢,f 函數上下文從執行上下文棧中彈出
ECStack=[
checkscopeContext,
globalContext
];
9.checkscope 函數執行完畢,checkscope 執行上下文從執行上下文棧中彈出
ECStack=[
globalContext
];
第二段代碼就留給大家去嘗試模擬它的執行過程。
var scope="global scope";
function checkscope(){
var scope="local scope";
function f(){
return scope;
}
return f;
}
checkscope()();
不過,在下一篇《JavaScript深入之閉包》中也會提及這段代碼的執行過程。
---------轉自冴羽
*請認真填寫需求信息,我們會在24小時內與您取得聯系。