JavaScript

Day27 函式建構子與new

今天進入第6章節建立物件 JavaScript剛被創造出來時,為了吸引JAVA開發者借鑒了不少東西,包含名子JavaScript,而在物件部分,向JAVA和C++借鑒了new這個關鍵字,new和物件實體與法一樣,都可以讓使用者快速建立物件,與之一起出現的用法就是function constructor函式建構式。 function constructor 函式建構式(或譯函式建構子) 能用來新建物件的一種函式,透過與new運算子一起使用,能創建出新物件並設定該物件的屬性與方法 來看看程式碼 function batman(){ this.color = 'black'; this.city = 'Gotham City'; } var Bruce = new batman(); console.log(Bruce); 結果是 我們建立了一個物件給變數Bruce,在函式batman裏頭的this.color、this.city,現在和物件Bruce的屬性、值一樣,發生了什麼事? 在MDN的運算子表格裡,我們可以知道new也是一個運算子
SimonAllen

Day26 物件型別、Reflection and Extend

今天來看第5章節後半兩部影片 JavaScript是物件導向語言,基本上所有的東西可以分成兩大類:Primitive Types和Object Type Primitive Types 基本型別 關於基本型別Primitive Types,可以看第7天的筆記介紹 Object Type 物件型別 哪些東西是物件型別呢? JavaScript除了Primitive Types以外的東西,全都是物件型別! 來看看程式碼,這次直接在Chrome瀏覽器console輸入 var a = {}; var b = function(){}; var c = []; 建立空的物件、函式、陣列 直接輸入a.__proto__看看有什麼? 可以看到是一個物件,並且有很多屬性,若我們輸入a.__proto__.,就會跳出a物件原型可存取的屬性、方法。   若是a物件原型的原型會是什麼?輸入a.__proto__.__proto__ 可以看到原型鏈終點,也就是null。   接著看看函式,直接輸入b.__proto__看看有什麼
SimonAllen

Day25 古典與原型繼承、瞭解原型

今天來看看古典繼承、原型繼承與原型的介紹 繼承 表示一個物件可以取用另一個物件的屬性或方法 Classical Inheritance 古典繼承 C#、JAVA常用到的物件繼承方式,有一些專有名詞(語法)如:private私用、protected保護、friend夥伴、 interface介面...等術語。 古典繼承很流行,也解決了很多問題,但樹狀結構物件的互動模式,一但數量增加,很容易產生複雜、龐大的集合。 Prototypal Inheritance 原型繼承 JavaScript的物件繼承種類,相對古典繼承簡易、彈性,既然是所謂Prototypal「原型」,就代表有相對於目前物件的原型存在。 JS的所有物件(包含函式)都有個隱藏屬性proto,這個屬性會參考、指向另一個(原型)物件,而這個被指向的原始物件,就是我們當下這個物件的原型。 一個物件可以參照一個原型(物件),這個原型物件可以再參照另一個原型(物件)。 當我們使用的屬性、方法不存在當下操作的物件中,JS就會往該物件的原型去查找,有就存取它,沒有就在往原型的原型
SimonAllen

Day24 函數程式設計

今天來看函數程式設計的兩節影片 (udemy這系列影片稱呼Function為函數,但我個人比較習慣稱呼函式) 函數程式設計課程不可能在一兩節影片就講完,作者解釋他只是希望在這系列課程引入這個概念,以簡短影片讓人先體會它的威力。 先來看看以下程式碼 var arr1 = [1, 2, 3]; var arr2 = []; 現在有陣列arr1、arr2,我們想要複製arr1陣列的內容給arr2,並讓arr2陣列的值變arr1的2倍。 一般接續內容可能這樣寫: for(var i=0; i < arr1.length; i++){ arr2.push(arr1[i] * 2); } console.log(arr2); 結果是 因為JS具有一級函式的特性,我們可以將程式步驟拆成一個個函式,透過函式來讓程式碼更有結構性。 改成這樣 var arr1 = [1, 2, 3]; function mapForEach(arr, fn)
SimonAllen

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