因為在工作中看到bind,搞了很久之後才發現自己根本把bind和apply、call搞混了,決定先把這個部分給搞清楚。
前言
當我們在建立一個物件或函式(特別的物件)時,除了我們給他的東西以外,JavaScript還會同時給它三個方法:bind、call、apply。
Not a winner, not a loser.
因為在工作中看到bind,搞了很久之後才發現自己根本把bind和apply、call搞混了,決定先把這個部分給搞清楚。
當我們在建立一個物件或函式(特別的物件)時,除了我們給他的東西以外,JavaScript還會同時給它三個方法:bind、call、apply。
因為正在深入了解 JavaScript這個語言,因為已經下定決心要先熟練這個語言了,應該要好好瞭解並熟悉一些更深入的概念和用法才是,並且把自己的筆記放在這,希望也能有些用處。
let person = {
firstName: 'Jimmy',
lastName: 'Huan',
get fullName(){
return this.firstName + ' ' + this.lastName;
},
set fullName(name){
let words = name.split(' ');
this.firstName = words[0] || '';
this.lastName = words[1] || '';
}
}
let person = {
firstName: 'Jimmy',
lastName: 'Huan'
}
Object.defineProperty(person, 'fullName', {
get: function(){
return this.firstName + ' ' + this.lastName;
},
set: function(name) {
var words = name.split(' ');
this.firstName = words[0] || '';
this.lastName = words[1] || '';
}
});
console.log(person.fullName);// 'Jimmy Huan'
person.fullName = "Kobe Bryant"; //'Kobe Bryant'
console.log(person.firstName); // 'Kobe'
console.log(person.lastName); // 'Bryant'
這次介紹的主題是很常用的if和switch,讓我們看看CoffeeScript如何呈現吧。
首先要介紹的是運算元,我們知道JavaScript有 == 和 === 的區別,但是基本上建議大家都使用 === 取代 == ,因為 === 會去判別變數類別,而 == 較不嚴謹,所以在某些情況會出現意想不到的錯誤,例如:數字1等於字串1等等。
而在CoffeeScript裡,一律都是編譯成 === ,以下將運算元列表給各位參考:
目前開始學習使用CoffeeScript,來自我筆記一下,歡迎討論指教喔!
CoffeeScript是JavaScript的一個編譯語言,簡單來說明就是寫CoffeeScript,然後CoffeeScript的編譯器再轉換成JavaScript。
至於為什麼要用CoffeeScript?我想可讀性和便利性是最大的主因,一個好的程式語言要有三大條件:寫少做多、易於閱讀、方便維護,而CoffeeScript就是為了改善JavaScipt而誕生的,從以下的介紹便會開始了解CoffeeScript方便的地方。
coffee -h
– 查看CoffeeScript指令coffee -c foobar.coffee
– 將foobar.coffee編譯成foobar.jscoffee -cw foobar.coffee
– 當foobar.coffee有變更就會自動編譯成js檔coffee -c src -o js
– 將src內所有coffee檔編譯成js檔,存到js資料夾coffee -cw src -o js
– src內的檔案有變更時,就會自動轉換並編譯到js資料夾在CoffeeScript裡面,我們不用去理會變數宣告,CoffeeScript會自動幫我們處理變數宣告這一塊,不用自己寫一堆var,並且確保我們的變數在想要的地方執行,我們只要在我們想要的時候使用變數就可以了,還有,CoffeeScript可以不用分號結尾,這點真是不錯。
感謝CrazyLion補充:JavaScript也沒有要求要分號結尾!只是在學習時都有分號結尾 查了之後才知道,原來是壓縮程式碼時,沒分號有時候會產生問題。
CoffeeScript
foo = "Coffee"
bar = "Script"
alert ( foo + bar ) #CoffeeScript
JavaScript
var bar, foo;
foo = "Coffee";
bar = "Script";
alert(foo + bar);
我們如果要用一堆變數串成一個字串,要放入一堆加號,什麼"Answer is " + ans +"."
,感覺就是非常地麻煩,coffee只要寫成 "Answer is #{ans}."
就完美解決了,注意!一定要用雙引號包起來,單引號只會顯示#{ans}
,而不會顯示ans內的數值!順便一提,ES6也趕緊加入了${foo}
樣板字串的概念XD
CoffeeScript
ans = "Script"
alert ( "Coffee#{ans}" )
JavaScript
var ans;
ans = "Script";
alert ( "Coffee" + ans );
JavaScript最重要的function,在CoffeeScript裡變得十分簡單,本來的匿名函式寫法是 function(){ … }
,在CoffeeScript裡面,只要 () -> …
就解決了。
foobar = () ->
alert ( "foobar" )
#等於
foobar = ->
alert ("foobar")
CoffeeScript
cookies = ->
confirm "Do you want some cookies?";
JavaScript
var cookies;
cookies = function() {
return confirm("Do you want some cookies?");
};
學會怎麼定義函式後,當然也要知道該如何呼叫它,有以下幾種方式。
CoffeeScript
confirm = (reallyWant) ->
if reallyWant
true
plus = (a , b, ifPlus ) ->
if ifPlus
result = a + b
else
result = a
"Answer is #{result}"
alert plus 20, 10, confirm true
JavaScript
var confirm, plus;
confirm = function(reallyWant) {
if (reallyWant) {
return true;
}
};
plus = function(a, b, ifPlus) {
var result;
if (ifPlus) {
result = a + b;
} else {
result = a;
}
return "Answer is " + result;
};
alert(plus(20, 10, confirm(true)));