爲了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原做者全部,翻譯僅用於學習。css
JavaScript有5種基本的數據類型,分別是:布爾、null、undefined、String和Number。這些基本類型在賦值的時候是經過值傳遞的方式。值得注意的是還有另外三種類型: Array、Function和Object,它們經過引用來傳遞。從底層技術上看,它們三都是對象。html
若是一個基本的數據類型綁定到某個變量,咱們能夠認爲該變量包含這個基本數據類型的值。vue
var x = 10; var y = 'abc'; var z = null;
當咱們使用 = 將這些變量賦值到另外的變量,其實是將對應的值拷貝了一份,而後賦值給新的變量。咱們把它稱做值傳遞。node
var x = 10; var y = 'abc'; var a = x; var b = y; console.log(x, y, a, b) // 10, 'abc', 10, 'abc'
a
和x
都包含10,b
和y
都包含'abc'
,而且它們是徹底獨立的拷貝,互不干涉。若是咱們將a
的值改變,x
不會受到影響。webpack
var x = 10; var y = 'abc'; var a = x; var b = y; a = 5; b = 'def'; console.log(x, y, a, b); // 10, 'abc', 5, 'def'
若是一個變量綁定到一個非基本數據類型(Array, Function, Object),那麼它只記錄了一個內存地址,該地址存放了具體的數據。注意以前提到指向基本數據類型的變量至關於包含了數據,而如今指向非基本數據類型的變量自己是不包含數據的。web
對象在內存中被建立,當咱們聲明arr = []
,咱們在內存中建立了一個數組。arr
記錄的是該內存的地址。面試
var arr = []; // (a) arr.push(1); // (b)
當執行完(a)以後,內存中建立了一個空的數組對象,其內存地址爲#001
, arr 指向該地址。編程
當執行完(b)以後,數組對象中多了一個元素,可是數組的地址依然沒有變,arr
也沒有變。數組
對象是經過引用傳遞,而不是值傳遞。也就是說,變量賦值只會將地址傳遞過去。函數
var reference = [1]; var refCopy = reference;
reference
和refCopy
指向同一個數組。 若是咱們更新reference
,refCopy
也會受到影響。
reference.push(2); console.log(reference, refCopy); // [1, 2], [1, 2]
若是咱們將一個已經賦值的變量從新賦值,那麼它將包含新的數據或則引用地址。
var obj = { first: 'fundebug.com'}; obj = { second: 'fundebug.cn'};
obj 從指向第一個對象變爲指向第二個對象。
若是一個對象沒有被任何變量指向,就如第一個對象(地址爲#001
),JavaScript引擎的垃圾回收機制會將該對象銷燬並釋放內存。
對於引用類型的變量,==
和===
只會判斷引用的地址是否相同,而不會判斷對象具體裏屬性以及值是否相同。所以,若是兩個變量指向相同的對象,則返回true
。
var arrRef = ['Hi!']; var arrRef2 = arrRef; console.log(arrRef === arrRef2); // true
若是是不一樣的對象,及時包含相同的屬性和值,也會返回false
。
var arr1 = ["Hi!"]; var arr2 = ["Hi!"]; console.log(arr1 === arr2); // false
若是想判斷兩個不一樣的對象是否真的相同,一個簡單的方法就是將它們轉換爲字符串而後判斷。
var arr1str = JSON.stringify(arr1); var arr2str = JSON.stringify(arr2); console.log(arr1str === arr2str); // true
另外一個方法就是遞歸地判斷每個屬性的值,直到基本類型位置,而後判斷是否相同。
當咱們將基本類型數據傳入函數,函數會將這些數據拷貝賦值給函數的參數變量。
var hundred = 100; var two = 2; function multiply(x, y) { return x * y; } var twoHundred = multiply(hundred, two);
hundred
的值拷貝給變量x
,two
的值拷貝給變量y
。
對於一個函數,給定一個輸入,返回一個惟一的輸出。除此以外,不會對外部環境產生任何附帶影響。咱們機會稱該函數爲純函數。全部函數內部定義的變量在函數返回以後都被垃圾回收掉。
可是,若是函數的輸入是對象(Array, Function, Object),那麼傳入的是一個引用。對該變量的操做將會影響到本來的對象。這樣的編程手法將產生附帶影響,是的代碼的邏輯複雜和可讀性變低。
所以,不少數組函數,好比 Array.map 和 Array.filter 是以純函數的形式實現。雖然它們的參數是一個數組變量,可是經過深度拷貝並賦值給一個新的變量,而後在新的數組上操做,來防止原始數組被更改。
咱們來看一個例子:
function changeAgeImpure(person) { person.age = 25; return person; } var alex = { name: 'Alex', age: 30 }; var changedAlex = changeAgeImpure(alex); console.log(alex); // { name: 'Alex', age: 25 } console.log(changedAlex); // { name: 'Alex', age: 25 }
在非純函數changeAgeImpure
中,將對象person
的age
更新並返回。原始的alex
對象也被影響,age
更新爲25。
讓咱們來看如何實現一個純函數:
function changeAgePure(person) { var newPersonObj = JSON.parse(JSON.stringify(person)); newPersonObj.age = 25; return newPersonObj; } var alex = { name: 'Alex', age: 30 }; var alexChanged = changeAgePure(alex); console.log(alex); // { name: 'Alex', age: 30 } console.log(alexChanged); // { name: 'Alex', age: 25 }
咱們經過JSON.sringify
將對象變爲一個字符串,而後再經過JSON.parse
將字符串變回對象。經過該操做會生成一個新的對象。
值傳遞和引用傳遞常常在面試中被問到,來嘗試回答一下以下代碼如何輸出:
function changeAgeAndReference(person) { person.age = 25; person = { name: 'John', age: 50 }; return person; } var personObj1 = { name: 'Alex', age: 30 }; var personObj2 = changeAgeAndReference(personObj1); console.log(personObj1); // -> ? console.log(personObj2); // -> ?
本次給你們推薦一個免費的學習羣,裏面歸納移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。 對web開發技術感興趣的同窗,歡迎加入Q羣:943129070,無論你是小白仍是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時天天更新視頻資料。 最後,祝你們早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峯。