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();

下課!!!!!

Made with Slides.com