iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

JS進入新手村,我好害怕系列 第 26

Day26:終於要進去新手村了-Javascript-函式-物件-建構式

今天文章會延續昨天的程式碼去做建構式的學習紀錄
我們先看看原本的程式碼:

var player=new Object;
player.name="John";
player.hp=100;
player.fight=function(){
    this.hp=this.hp-2
};
player.rest=function(){
    this.hp++
}
};
player.report=function(){
    alert(this.name+":"+this.hp)
};
player.fight();
player.rest();
player.report();

這上方指的是John這個角色的部分,如果用上方的程式碼要再建立新的角色,就需要重複上面程式碼,只是換個角色或是名稱,但是一但角色多了之後,整個程式碼就會變成有點混亂,這時候我們可以使用建構式去作出一個模板,接下來要創立新角色就只要套用模板就可以了,方法如下:

function player (name,hp){
    this.name=name;
    this.hp=hp;
    this.fight=function(){
        this.hp-=2
    };
    this.rest=function(){
        this.hp++
    };
    this.report=function(){
    alert(this.name+":"+this.hp)
    };
    }

我們可以看到上方做出了基本的模板出來,function player就是我們設定要用來建構物件的函式,內容就是我們規劃出來的樣板,使用this建立新建的空白物件,接著我們要來使用這個樣板,使用方式如下:


var player = new player("John", 100);  //輸入資料丟回函式
player.fight();  //呼叫內部函式
player.report(); //呼叫內部函式
var player2= new player("Bob", 80);
player2.rest();
player2.report();

參考來源:
https://wcc723.github.io/javascript/2017/12/18/javascript-constructor/
https://www.youtube.com/watch?v=xSu7TbPPy34


上一篇
Day25:終於要進去新手村了-Javascript-函式-物件綜合範例
下一篇
Day27:終於要進去新手村了-HTML DOM 基本觀念
系列文
JS進入新手村,我好害怕30

尚未有邦友留言

立即登入留言