Sign in Subscribe

ithome 鐵人賽：JavaScript 基礎二三事

Day23 函式內建方法：bind()、call()與apply()

今天來看看bind()、call()、apply()這三個函式內建方法。 當函式執行環境被創造出來，會一併創造arguments關鍵字，保存帶入自己的參數; 也會一併創造出this關鍵字，指向函數目前所處的物件，關於this可以參考這天的筆記。 若我們希望修改this指向的對象，有辦法達到這個目的嗎？ 我們可以利用bind()、call()、apply()這些函式內建方法來達成目的 先來看看bind()的例子 var superMan = { earthName: 'Clark Kent', KryptonName: 'Kal-El', getAllName: function(){ var allname = this.earthName + '　and　' + this.KryptonName; return allname; } } console.log(superMan.getAllName()) 結果是 接著在設定一個函式表示式logName var logName
SimonAllen

Day22 Function Factories、閉包與回呼

今天來看Function Factories、閉包與回呼這兩個章節 Function Factories JS並沒有重載函式的特性，但是可以用函式傳入的參數，在函式裡用if判斷達成類似的效果。 例如這樣： function hello(firstname, lastname, language){ language = language || 'en'; if(language === 'en'){ console.log('Hello ' + firstname + ' ' + lastname); }else if(language === 'es'){ console.log('Hola ' + firstname + ' ' + lastname); } } hello('
SimonAllen

Day21 閉包

今天來看看closure閉包 先來看看以下程式碼： function say(whattosay){ return function(name){ console.log(whattosay + ' ' + name); } } 設定一個函式陳述句，在裏頭用函式表示式回傳一個函式，並利用範圍練scope chain的特性放入whattosay，裏頭這個回傳函式沒有宣告whattosay，於是它會外部(參照)查找，去找設定這個函式的say函式參數whattosay。 關於外部參照，可以參考這天的筆記。 當我們呼叫函式say，會得到一個值，這個值是從函式say裡面return返回的另一個函式。我們可以帶入參數，這樣呼叫函式裡的函式： say('Hello')('Simon'); 目前這樣還OK 接著修改一下程式碼，設定一個變數去接(指向)函式say的回傳值： var talk = say('Hello'); talk('
SimonAllen

Day20 立即呼叫的函式表示式 IIFE

今天來看看IIFE IIFE全名為Immediately Invoked Functions Expressions 指的是可以立即執行的Functions Expressions函式表示式，中文多譯為立即(執行)函式。 來看看以下程式碼 var hello = function(name){ console.log('Hello ' + name); }; 這是一個Functions Expressions函式表示式，要呼叫它通常會寫成hello() hello(); 目前沒有傳值進去，所以函式印出Hello undefined 若把hello()這句刪掉，把程式碼改成這樣： var hello = function(name){ console.log('Hello ' + name); }(); 電腦在函式表示式後面讀到()，就知道要立刻呼叫這個函式，這種立刻執行的函式寫法就稱為IIFE。 若要傳值進去可以加參數在最後面的() var hello = function(name){ console.
SimonAllen

Day19 陣列、arguments、spread 與分號

今天的筆記內容比較雜一點。 陣列——任何東西的集合 要建立一個JS陣列可以這樣寫 var arr = new Array(); 也可以使用陣列實體語法來建立 var arr = []; 此外，JS的陣列與物件很像，可以放各種資料，例如：布林值、物件和函數..等等。 例如： var arr = [ 24, true, { name: 'Simon', isF2E: true}, function(name){ console.log(name + '挑戰鐵人賽第19天'); }, "hello" ]; 陣列是從0開始數，如果要執行陣列序號3的函式，並帶入陣列序號2的物件屬性值，可以這樣寫： arr[3](arr[2].name); 結果是
SimonAllen

Day18 物件、函式與 this

今天來看看this JavaScript在建立執行環境時，不論是全域、區域執行環境，在創造時會一併建立一個變數 this。而this會指向呼叫函式的執行環境，更進一步的說，this會指向函式目前所在物件。 如果我們直接這麼寫，這段程式碼的this會指向誰? console.log(this); 我們在全域執行環境呼叫this，此時它會指向全域物件，也就是window 那這樣呢？ function a(){ console.log(this); } var b = function(){ console.log(this); } a(); b(); 呼叫a、b函式，電腦創造函式a、b的執行環境，此時a、b函式內的this也一併被創造出來，那this會分別指向誰呢？ 還蠻合理的，畢竟a()、b()也視同window.a()、window.b()，這代表不管用函式表示式或函式陳述句，只要在全域定義、呼叫創造其執行環境，這時的this會指向全域物件。 但也因為函式a、
SimonAllen

Day17 傳值 by value 與傳址 by reference

今天來看傳值與傳址 call by value傳值與call by reference傳址指的是電腦記憶體中的東西，與程式的參照傳遞互動的模式。 call by value 當我們創造變數並給值時，變數會指向值在電腦記憶體中的位置，若我們以這個值為參照，指定另一個變數指向這個值時，電腦會在記憶體中新增(複製)一個新值，讓後來的這個變數指向新的值。 在JavaScript裡，布林值、字串、數值、null、undefined都是call by value。 來看看以下程式碼 var a = 100; var b; b = a; a = a - 70; console.log('a現在是' + a); console.log('b現在是' + b)
SimonAllen