前言
-
在之前我們學(xué)到的面對對象編程的思想中饮寞,我們?nèi)ソ鉀Q一個問題去找對象孝扛,對象不存在我們便去創(chuàng)造對象;
-
那么我們之前去如何去創(chuàng)建對象的呢幽崩?是通過創(chuàng)建構(gòu)造函數(shù)去創(chuàng)建對象的
// 創(chuàng)建構(gòu)造函數(shù)
function Person(name,age){
this.name = name;
this.age = age;
this.say = function(){
console.log(this.name);
}
}
Person.sList = [];
Person.prototype.eat= function(){
}
// 創(chuàng)建對象
const p1 = new Person('小明',23);
-
那么接下來我們將學(xué)習(xí)如何通過 class 類來創(chuàng)建對象
一苦始、class類
(1)javascript中的class類型與java中的class類的性質(zhì)差不多,其中都有成員變量和方法(其中包含原型方法和原型屬性)慌申,也有繼承的屬性陌选;下面我們來創(chuàng)建一個簡單的類:
class Person{
static sList = []; // 靜態(tài)成員
// 構(gòu)造器 - 一般定義類屬性
constructor(name,age){
this.name = name;
this.age = age;
}
// 定義原型方法
eat(){
console.log(this.name+'在吃飯');
}
// 定義成員方法-箭頭函數(shù)
sayHi = (content)=>{
console.log(`${this.name}說的內(nèi)容是 ${content}`);
}
}
// 實例化對象
let p1 = new Person('小麗',22);
let p2 = new Person('小紅',21);
console.log('姓名是 ',p1.name);
p1.eat();
console.dir(Person)
console.dir(p1)
console.dir(p2)
p1.sayHi('今天學(xué)習(xí)javascript高級內(nèi)容');
注意:在定義成員方法和原型方法的時候,最大的區(qū)別就是成員方法是通過箭頭函數(shù)定義的
(2)打印結(jié)果
-
Person 構(gòu)造函數(shù)
原型對象中包含原型方法
-
p1 p2實例對象
示例對象中有成員方法
二蹄溉、class類繼承
1. 構(gòu)造函數(shù)的繼承
(1)構(gòu)造函數(shù)繼承
function Person(name){
this.name=name;
}
function Student(){
Person.call(this,'小明');
}
(2)拷貝繼承 for-in
(3)原型繼承-改變原型指向
2. class類的繼承
(1)注意:
- 在class類中咨油,我們用extends關(guān)鍵字實現(xiàn)繼承
- 當(dāng)子類繼承父類時,需要在子類的constructor中用super()調(diào)用父類的構(gòu)造函數(shù)
// 父類
class Person{
constructor(name, age) {
this.name = name;
this.age = age;
}
}
// 子類
class Student extends Person{
constructor(name, age,number,score){
super(name, age); // 調(diào)用父類構(gòu)造函數(shù)
this.number = number;
this.score = score;
}
}
let s1 = new Student("張三", 15, 1001, 98);
console.log(s1.name);
console.dir(Person)
console.dir(Student)
console.dir(s1)
(2)打印結(jié)果:
-
s1.name 學(xué)生姓名
-
Person 類
-
Student 類
student類中的原型對象繼承了Person類
-
s1 實例對象
示例對象中有name 和 age 屬性