首頁 > web前端 > js教程 > 全面分析JavaScript物件導向概念中的Object型別與作用域(附有範例)

全面分析JavaScript物件導向概念中的Object型別與作用域(附有範例)

亚连
發布: 2018-05-21 14:50:42
原創
1456 人瀏覽過

這篇文章主要介紹了解析JavaScript物件導向概念中的參考類型與作用域,文中重點講解了擴充函數運行作用域的需要的call和apply方法,朋友可以參考下

引用類型

引用類型主要包括:Object 類型、Array 類型、Date 類型、RegExp 類型、Function 類型等等。

引用類型使用時,需要從它們身上產生一個物件(實例)。也就是說,引用型別相當於一個模版,當我們想要用某個引用型別的時候,就需要用這個模版來產生一個物件來使用,所以引用型別有時候也稱作物件定義。

例如,我們需要產生一個person 對象,來定義某人的個人資訊和行為,那麼我們就需要依賴Object 類型:

var person = new Object();
person.name = "jiangshui";
person.sayName = function(){
  console.log(this.name);
}
登入後複製

上面的這個person 對象,透過new 運算子使用Object 類型這個「模版」定義。之後就可以對這個物件添加屬性 name 和方法 sayName 了。屬性和方法是 Object 類型具有的“功能”,所以透過 Object 等引用類型創建的物件就可以用這個了。

創建對像不一定非得需要用new 操作符,有一些類型可以簡化的創建,例如創建一個上面那樣的Object 類型的對象,也可以使用下面兩種方法:

var person = {};
person.name = "jiangshui";
person.sayName = function(){
  console.log(this.name);
}
登入後複製

var person = {
  name : "jiangshui",
  sayName : function(){
    console.log(this.name);
  }
};
登入後複製
登入後複製

{}運算子的功能就跟new Object() 一樣,簡化了運算。上面兩種寫法也有一些區別,第一種是“追加”,也就是在先前的定義中,繼續添加屬性或方法,如果之前已經存在了同名屬性方法,則會覆蓋。而第二種是“取代”,就是不管前面是否定義 person 物件的屬性和方法,這個方法會用新定義的內容,整個替換掉先前定義的。因為引用類型產生的對象,是儲存在記憶體中的一塊區域,然後將其指標保存在某變數中(person),第二種寫法,是產生了一個新物件(新記憶體區域),然後將person 變量指向了新記憶體區域,所以就把之前的取代了。了解這一點對後面理解,至關重要。

其他引用類型的用法大致一致,例如 Array 類型,也可以用 [] 來產生對象,或直接定義。產生陣列物件之後,就可以依照陣列的格式儲存資訊內容,此外物件會得到Array 類型中定義的那些方法,例如push、shift、sort 等等,就可以呼叫這些方法,例如:

#
var colors = [];
colors.push('red','green');
console.log(colors);
登入後複製

上面程式碼就是透過Array 類型建立一個陣列類型的對象,然後呼叫Array 類型裡面之前定義的push 方法,在物件裡面加入了red 和green 兩個值,最後在控制台印出來,就可以看到了。

call 和 apply 方法

這兩個方法是 Function 類型提供的,也就是說,可以在函數上面使用。 call 和 apply 方法的功能一樣,就是可以擴充函數運作的作用域,差別就在於使用 call 的時候,傳遞給函數的參數必須逐一列舉出來,而 apply 方法卻不用。這樣可以根據自己函數的要求來決定使用 call 或 apply。

擴充函數運行的作用域是什麼意思?舉個例子你就明白了。

你可以這樣理解,函數被包裹在一個容器(作用域)裡面,在這個容器裡面存在一些變數或其他東西,當函數運行,呼叫這些變數等,就會在目前容器裡面找這個東西。這個容器其實外面還包裹了一個更大的容器,如果當前小容器沒有的話,函數會到更大的容器裡面尋找,依次類推,一直找到最大的容器 window 物件。但是如果函數在目前小容器裡面運行的時候,小容器裡面有對應變數等,就算是大容器裡面也有,函數還是會呼叫自己容器裡面的。

而 call 和 apply 方法,就是解決這個問題,突破容器的限制。就前面例子:

var person = {
  name : "jiangshui",
  sayName : function(){
    console.log(this.name);
  }
};
登入後複製
登入後複製

開啟Chrome 的Console 之後,貼上進去執行一下,之後再執行person.sayName() 可以看到

2016510174813378.png (926×572)

這時候,person 就是一個容器,其中創建了一個sayName 方法(函數),執行的時候,必須在person 作用域下面執行。在最下面直接執行的時候,也就是在 window 的作用域下面執行會報錯 not defined,因為 window 下面沒有定義 sayName 方法。而裡面的 this 指針,是比較特殊的東西,它指向目前作用域,this.name 的意思,就是呼叫目前作用域下面的 name 值。

下面我們為window 物件新增name 屬性:

window.name = "yujiangshui";
登入後複製

或直接

name = "yujiangshui";
登入後複製

#

因为 window 是最大的容器,所以 window 可以省略掉,所有定义的属性或者变量,都挂靠到 window 上面去了,不信可以看:

2016510174850232.png (486×412)

那现在我们就想在 window 这个大容器下面,运行 person 小容器里面的 sayName 方法,就需要用 call 或 apply 来扩充 sayName 方法的作用域。执行下面语句:

person.sayName.call(window);
登入後複製

或者

person.sayName.call(this);
登入後複製

输出的结果都是一样的,你也可以换用 apply 看看效果,因为这个 demo 太简单的,不需要传递参数,所以 call 和 apply 功能效果就完全一致了。

2016510174922644.png (438×360)

解释一下上面代码,sayName 首先是 Function 类型的实例,也就具有了 call 方法和 apply 方法,call 和 apply 方法既然是 Function 类型的方法,所以就需要用这种方式调用 person.sayName.call(window) 而不是什么 person.sayName().call(window) 之类的。

然后 call 和 apply 方法的参数,就是一个作用域(对象),表示将前面的函数在传递进去的作用域下面运行。将 window 这对象传递进去之后,sayName 方法中的 this.name 指向的就是 window.name,于是就扩充了作用域。

为什么传递 window 和 this 都是一样的效果?因为我们当前执行这个函数的位置是 window,前面说过 this 指针指向的是当前作用域,所以 this 指向的就是 window,所以就等于 window。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在javascript中创建对象的各种模式解析(图文教程)

设计模式中的组合模式在JavaScript程序构建中的使用(高级篇)

详细解读JavaScript设计模式开发中的桥接模式(高级篇)

以上是全面分析JavaScript物件導向概念中的Object型別與作用域(附有範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板