JavaScript作用域、閉包、對象與原型鏈概念及用法實例總結

本文實例講述了JavaScript作用域、閉包、對象與原型鏈概念及用法。分享給大家供大家參考，具體如下：

1 JavaScript變量作用域

1.1 函數(shù)作用域

沒有塊作用域：即作用域不是以{}包圍的，其作用域完成由函數(shù)來決定，因而if /for等語句中的花括號不是獨立的作用域。

如前述，JS的在函數(shù)中定義的局部變量只對這個函數(shù)內部可見，稱之謂函數(shù)作用域。

嵌套作用域變量搜索規(guī)則：當在函數(shù)中引用一個變量時，JS會搜索當前函數(shù)作用域，如果沒有找到則搜索其上層作用域，一直到全局作用域。

var value = 'global';
var f1 = function(){
 console.log(v1); //global
};
f1();
var f2 = function(){
 var v1 ='local';
 console.log(v1); //local
};
f2();

詞法作用域規(guī)則：函數(shù)的嵌套關系是定義時決定的，而非調用時決定的，即詞法作用域，即嵌套關系是由詞法分析時確定的，而非運行時決定。

var v1 = 'global';
var f1 = function(){
 console.log(v1);
}
f1(); //global
var f2 = function(){
 var v1 = 'local';
 f1();
};
f2(); //global

對于這兩個規(guī)則的相互作用，函數(shù)內無論什么位置定義的局部變量，在進入函數(shù)時都是已經定義的，但未初始化，即為undefined，直到運行到變量被賦值時才被初始化，因此若訪問了未初始化的變量，我們會得到undefined的說明。

var v1 = 'global';
var f = function(){
 console.log(v1); //undefined
 var v1 = 'local';
};

1.2 全局作用域

全局作用域的變量是全局對象的屬性，不論在什么函數(shù)中都可以直接訪問，而不需要通過全局對象，但加上全局對象，可以提供搜索效率。

滿足下列條件的變量屬于全局作用域：

2 閉包

2.1 裝飾的定義

function f1(){
 //context define
 function f2(){
 //func define
 };
 return f2;
};
f2(); //獲得f1中的context

在類似C/C++這種的非函數(shù)式編程語言中，我們也可以定義函數(shù)指針并返回，但外層函數(shù)在執(zhí)行結束后為內層函數(shù)定義的上下文信息會被銷毀，而在閉包中，則保存了返回的函數(shù)，還包含返回函數(shù)的上下文信息。(由詞法作用域所支持)而且在返回閉包之后，上下文信息即被單獨創(chuàng)建出來，從而可以生成多個互相獨立的閉包實例。

2.2 閉包的用途

閉包有兩個用途，一是方便實現(xiàn)嵌套的回調函數(shù)，二是隱藏對象的細節(jié)。

對于前者，NodeJS的編程風格已經可以說明問題，對二后者，對于函數(shù)內部的局部變量外部是不可見的，但可以提供訪問函數(shù)來訪問和修改相應的局部變量，從而實現(xiàn)OO封裝的意圖。

3 對象

在基于類型的語言中，對象是由類實例化，而JS是基于原型的系統(tǒng)，對象是由原型復制生成的。

3.1 對象的創(chuàng)建與訪問

JavaScript中的Object實際上就是一個由屬性組成的關聯(lián)數(shù)組，屬性由名稱和值組成。可以由new Object()或{}來創(chuàng)建對象。對于創(chuàng)建簡單對象，可以使用對象初始化器來創(chuàng)建對象，即由{}字面值來創(chuàng)建對象，對象的屬性名可以為加''的字符串，也可不加引號。這對JS來說沒有區(qū)別，訪問對象的屬性時，可以使用句點也可使用關聯(lián)數(shù)組['name']，后者的好處是當我們不知道對象屬性名時，可以由變量來作為關聯(lián)數(shù)組的索引。

3.2 構造函數(shù)

我們也可以通過自定義構造函數(shù)來生成對象，從而能實例化更多的對象。構造函數(shù)也是函數(shù)，我們需要用大寫的函數(shù)名即可。在函數(shù)中可以定義成員變量，成員函數(shù)等。

3.3 上下文對象

在JS中，上下文對象即this指針，即被調用函數(shù)所處的環(huán)境。其作用是在函數(shù)內部引用到調用它的對象本身。this的出現(xiàn)會之前介紹的靜態(tài)作用域產生影響，加入了動態(tài)的內容。

由例子可以看到，我們可以通過不同的變量引用函數(shù)，不同之處調用上下文。

傳遞與綁定上下文

JavaScript的函數(shù)可以通過Call和Apply來動態(tài)綁定到特定的上下文。

如果想永久的綁定上下文，可以使用bind函數(shù)，需要注意的是同一函數(shù)上的多次bind是沒有效果的。

var person = {
 name:'noname',
 getName:function(){console.log(this.name); }
};
var bill = {name:'Bill'};
person.getName(); //noname
bill.getName = person.getName;
bill.getName(); //Bill
name = 'JavaScript';
func = person.getName;
func(); //JavaScript

3.4 原型

創(chuàng)建對象時，我們應該在構造函數(shù)內定義一般成員，而是其原型定義成員函數(shù)。

下面我們會主要介紹原型鏈

JS中有兩個特殊的對象：Object與Function，它們都是構造函數(shù)，用于生成對象。

Object.prototype是所有對象的祖先，Function.prototype是所有函數(shù)的原型，包括構造函數(shù)。

可以將JS的對象分為三類：用戶創(chuàng)建對象，構造函數(shù)對象，原型對象。

所有對象中都有一個__proto__屬性，其指向此對象的原型。

構造函數(shù)對象有prototype，指向其原型對象，通過此構造函數(shù)創(chuàng)建對象時，新創(chuàng)建對象的__proto__屬性將會指向構造函數(shù)的prototype屬性。

原型對象有一個constructor屬性，指向它對應的構造函數(shù)。

function Foo() {}
var obj = new Object();
var foo = new Foo();

參考文獻：《Node.JS開發(fā)指南》

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com