面向物件三大特徵之繼承
阿新 • • 發佈:2018-11-12
面向物件的三大特徵包含:封裝、繼承、多型。現簡單介紹一下——繼承。
繼承有以下幾種方式:
1、例項繼承 (也稱:冒充繼承,經典繼承)(例項屬性 和 例項方法)
通過call和apply,來繼承,具體語法如下
fn.call(物件,引數一,引數二,……)
fn.apply(物件,[])
fn.apply(物件,arguments)
其中,arguments為偽陣列,可以接收後面的所有引數
具體案例如下:
<script type="text/javascript">
function Superman(name,age){
//Person.call(this,name,age); // Person.apply(this,[name,age]); Person.apply(this,arguments); } var sm = new Superman('小王',12); alert(sm.showName()); //小王
</script>
2、原型繼承
通過prototype原型繼承(原型屬性 和 原型方法)
<script type="text/javascript"> //原型 function Person(){} //原型屬性 Person.prototype.name = '小王'; Person.prototype.age = 20; //原型方法 Person.prototype.showName = function(){return this.name; } Person.prototype.showAge = function(){ return this.age; } //超人的建構函式 function Superman(){} //Superman.prototype = Person.prototype; //Superman.prototype = new Person(); for(let key in Person.prototype){ Superman.prototype[key]= Person.prototype[key]; } Superman.prototype.name = "人才"; var sm = new Superman(); alert(sm.showName()); var ps = new Person(); alert(ps.showName()); </script>
3、混合繼承
例項屬性通過call 或 apply實現繼承,例項方法通過prototype原型繼承,具體案例如下:
<script type="text/javascript"> //原型 function Person(name,age){ //例項屬性 this.name = name; this.age = age; } //原型屬性)(這裡註釋掉,是因為這裡要做混合繼承,要用例項屬性) // Person.prototype.name = '小王'; // Person.prototype.age = 22; //原型方法 Person.prototype.showName = function(){ return this.name; } Person.prototype.showAge = function(){ return this.age; } function Superman(name,age){ Person.apply(this,arguments); }
//遍歷Person中的所有原型方法prototype,然後賦值給Superman的原型prototype for(let key in Person.prototype){ Superman.prototype[key] = Person.prototype[key]; } let sm = new Superman('小皮',20); alert(sm.showName()); </script>
4、物件冒充
通過類似的方法實現繼承:this.student = Person; (student為子類,Person為父類)
function Person(name,age){
this.name = name;
this.age = age;
this.show = function(){
console.log(this.name+", "+this.age);
}
}
function Student(name,age){
this.student = Person;
this.student(name,age);
//可以刪除物件中指定的例項屬性
//delete student.name
//刪除對person的引用
//delete this.student;
}
var s = new Student("小王",22);
s.show();
// 小王, 22
var p = new Person("小皮",20);
p.show();
// 小皮, 20
等。。。