JavaScript
講師 - 呂家睿
- 建中資訊38屆學術長+副社
- 玩雀魂
- 頭像是應急食品
- 被電爛
- 有問題歡迎來問我啊
- Fastapi
- Qt(C++)
- 數學好難
- 一點點sandbox
- Machine Learning
- discord bot
- 打開電腦
學術力
Review
Function 函式
- 像一個積木
- 可以讓程式變簡潔
- 參數
- 回傳值
- 區域變數 vs全域變數
主函式
準備材料
揉麵團
預熱烤箱200 度
麵團成捏餅狀
加配料:番茄醬、蘑菇
烤10分鐘
Object 物件
- JavaScript幾乎所有都是物件
- 包含屬性(變數)、方法(函式)
- 封裝特性
更多
物件
函式是物件
JS裡面幾乎所有東西都是物件，包含函式
- 一個可呼叫物件
- 被呼叫時會執行特定的程式
- 可以像一般物件一樣操作
函式是物件
console.log(pizza())
console.log(typeof(pizza))
function pizza()
{
return "I'm a pizza"
}
console.log(pizza())
console.log(typeof(pizza))有兩種最常見的函式創建方式
藍圖形式:
上下都印得出來
console.log(pizza())
console.log(typeof(pizza))
pizza = function(){return "I'm a pizza"}
console.log(pizza())
console.log(typeof(pizza))物件形式:
上面會報錯，下面正常
函式是物件
console.log(pizza())
console.log(typeof(pizza))
pizza = function(){return "I'm a pizza"}
console.log(pizza())
console.log(typeof(pizza))匿名函式物件
pizza
指派
pizza()
執行
"I'm a Pizza"
pizza = function(){return "I'm a pizza"}
pizza.flavor = "Peperoni"
pizza.price = 350
pizza.eat = function(){return "Yum!"}
console.log(pizza())
console.log(typeof(pizza))
console.log(`The pizza's flavor is ${pizza.flavor}`)
console.log(`The pizza's price is ${pizza.price}`)
console.log(pizza.eat())
console.dir(pizza)可以像一個正常物件使用:
- 屬性Attribute
- 方法Method
可以顯示特定物件的所有屬性
函式是物件
pizza = function() {return "I'm a pizza"}
function measureTime(input)
{
console.log(`Now running function ${input.name}`)
console.time("Timer")
input()
console.timeEnd("Timer")
console.log(`Finshed running function ${input.name}`)
}
measureTime(pizza)我們也可以把函式(物件)當作參數傳進另一個函式裡面
measureTime在這裡相當於一個裝飾器
什麼是裝飾器?
函式
裝飾器
裝飾器decorator
另一個函式作為一個包裝包在原函式外面
一個烤pizza的函式
一個裝飾器
參數為一個函式
把函式打包後回傳一個新函式(物件)
創建打包過的函式物件
function logger(func)
{
return function(...args)
{
console.log(`Now running ${func.name}`)
console.time("Timer")
const result = func(...args)
console.log(`Done running ${func.name}`)
console.timeEnd("Timer")
return result
}
}
function makePizza()
{
for(let i = 0; i < 1000000; i++){}
return "Pizza baked"
}
const makePizzaWithLog = logger(makePizza)
makePizzaWithLog()箭頭函式 arrow function
- 是一種特殊的函式
- 沒有名字
- 沒有this
- 沒有prototype
- fast
function pizza(flavor)
{
this.flavor = flavor
setTimeout(function(){
console.log(`The flavor is ${this.flavor}`)
}, 1000);
}
const myPizza = new pizza("hawaii")用正常函式
function pizza(flavor)
{
this.flavor = flavor
setTimeout(() => {
console.log(`The flavor is ${this.flavor}`)
}, 1000);
}
const myPizza = new pizza("hawaii")用箭頭函式
箭頭函式 arrow function
const bakePizza = function(flavor){ console.log(`Baking a ${flavor} pizza!`)}
const bakePizza2 = (flavor) => {console.log(`Baking a ${flavor} pizza!`)}
const myPizza = new bakePizza("mushroom")
const myPizza2 = new bakePizza2("mushroom")箭頭函式放參數直接打在括號裡面
prototype原型:
可以想像是一個藍圖，當你用new創建一個物件時其實你是讓那個物件"繼承原本的物件"
練習題
function Pizza(type) {
this.type = type;
}
Pizza.prototype.bake = function() {
console.log(`Starting the oven for ${this.type}...`);
setTimeout(function() {
console.log(`Finished baking ${this.name} at ${Pizza.bakeryName}`);
}, 2000);
};
const myPizza = new Pizza("Hawaiian");
console.log("Bakery:", Pizza.bakeryName);
myPizza.eat();
myPizza.bake(); 下面有一段程式，但是他有一些問題還有一些尚未寫完的地方
請修好這段程式讓他能正常運作
解答
function Pizza(type) {
this.type = type;
}
Pizza.prototype.eat = function() {
console.log(`Nom nom, eating ${this.type} pizza!`);
};
Pizza.bakeryName = "Cool Pizzeria";
Pizza.prototype.bake = function() {
console.log(`Starting the oven for ${this.type}...`);
setTimeout(() => {
console.log(`Finished baking ${this.type} at ${Pizza.bakeryName}`);
}, 2000);
};
const myPizza = new Pizza("Hawaiian");
console.log("Bakery Name:", Pizza.bakeryName);
myPizza.eat();
myPizza.bake(); 下課!!!!!
JavaScript-4
By ck11300111呂家睿
