目的: 了解 JavaScript class 的寫法及 繼承(extends) & static 的用法
處理說明: 1>JavaScript class 的本體是 函式(function) ,
class 只是宣告函式的一種特別的語法。
2>class person_child extends person_parent{
}
-->JavaScript將 person_child.prototype 的 [[Prototype]] 設為 person_parent.prototype，
[傳統寫法] [class寫法]
一.傳統寫法 - 物件屬性 - 以 prototype 定義屬性1>傳統宣告 Object ＿的方法 - function ObjectName(par_param) { }
1>>定義物件 - 以 function 函式定義物件 - constructor() , this.property=xxxx;
function Person(par_name){
this.name=par_name;
}
2>>定義屬性 Object.prototype.property
Person.prototype.name="Defaultname";
3>>定義方法 Object.prototype.property=function() { }
Person.prototype.SayHello=function(){console.log(" Hello !! "+this.name);}
4>實際建立 Object - new Constructor
var Person1=new Person("parent Micro Tsai");
Person1.SayHello();
--> 執行結果 :
Hello!! parent Micro Tsai
二.傳統宣告 Object 的 ＿inherit 方法 - child.prototype=parent.prototype;
1>>宣告 person_son Object
function person_son(par_name,par_age){
this.name=par_name;
this.age=par_age
}
this.name=par_name;
this.age=par_age
}
2>>person_son 繼承自 person
//person_son.prototype.__proto__ = Person.prototype;
//person_son.prototype.__proto__ = Person.prototype;
person_son.prototype = Person.prototype;
person_son.prototype.ShowName = function(){
console.log("My name is "+this.name);
}
person_son.prototype.ShowAge = function(){
console.log("My age is "+this.age);
}
var person_son1=new person_son("child Micro Tsai",28);
person_son1.SayHello(); //person_son1未定義 SayHello ,因繼承自 parent ,所以可以用 SayHello
person_son1.ShowName();
person_son1.ShowAge();
person_son.prototype.ShowName = function(){
console.log("My name is "+this.name);
}
person_son.prototype.ShowAge = function(){
console.log("My age is "+this.age);
}
var person_son1=new person_son("child Micro Tsai",28);
person_son1.SayHello(); //person_son1未定義 SayHello ,因繼承自 parent ,所以可以用 SayHello
person_son1.ShowName();
person_son1.ShowAge();
--> 執行結果:
Hello !! child Micro Tsai
My name is child Micro Tsai
My age is 28
三.class 的物件寫法
1>宣告 class - class class_name{ constructor(){}; SayHello(){}; }
class Person_parent{
constructor(par_name){
this.name=par_name;
}
SetName(par_name){ this.name=par_name; }
SayHello(){
console.log(" Hello "+this.name);
}
}
Person2=new Person_parent("Micro Tsai 2");
Person2.SayHello();
Person2.SetName("Micro Tsai 3");
Person2.SayHello();
--> 執行結果:
Hello parent Micro Tsai
Hello parent Micro Tsai SetName
2>class的繼承 子class extends 父class
class Person_child extends Person_parent{
constructor (par_name,par_gender){
super(par_name); //call parent.constructor
this.gender=par_gender;
}
SetAge(par_age){
this.age=par_age;
}
ShowAge(){
console.log(this.name+" age is "+this.age);
}
SayHello(par_name){
console.log("please Jump !! "+par_name);
super.SayHello(); //call parent function SayHello();
}
ShowGender(){
console.log(this.name+" gender is "+this.gender);
}
}
Person_child=new Person_child("Micro Tsai 5","Male");
Person_child.SayHello(Person_child.name);
Person_child.SetAge(57);
Person_child.SetAge(57);
Person_child.ShowAge();
Person_child.ShowGender();
--> 執行結果:
please Jump !! Micro Tsai 5
Hello Micro Tsai 5
Micro Tsai 5 age is 57
Micro Tsai 5 gender is Male
