您好,登錄后才能下訂單哦!
javascript的對象繼承有幾種方法?相信很多人對javascript的對象繼承方法的了解處于一知半解狀態,小編給大家總結了以下內容。如下資料是關于javascript的對象繼承方法的內容。
1原型鏈繼承
所有的javascript 都會繼承一個prototype原型對象 繼承原型對象上的屬性和方法。
例如:
date 對象 從Date.prototype 原型對象上繼承屬性和方法
array 對象 從Array.prototype 原型對象上繼承屬性和方法
要繼承 必須有父類 ----子類繼承父類 繼承父類的屬性和方法
特點:實例可以繼承自身實例的屬性 父類里面的構造函數屬性 父類的原型屬性
缺點:不能繼承子類的原型屬性和方法
太單一 只能單繼承 不能進行多繼承
繼承之后原型對象上的屬性全部是共享的
子類不能直接向父類傳遞參數
function Person() {
this.name;
this.sex;
this.sleep = function () {
return "睡覺";
};
this.eat = function () {
return "吃飯"
}
}
//給父類添加原型屬性和方法
Person.prototype.job = function () {
return "工作";
};
Person.prototype.color = "黃";
function Child() {
this.age = 20;
}
Child.prototype = new Person(); //核心 讓子類的原型 等于 父類的實例對象
var child = new Child();
console.log(Child.prototype);//繼承之后指向Person 對象
console.log(child instanceof Child); ///true
console.log(child instanceof Person); //true
2構造函數
直接使用call apply 繼承
構造繼承直接在子類的內部去寫
優點: 可以實現多繼承;可以向父類傳遞參數
缺點: 子類的實例是本身 不是父類;構造繼承只能call apply 父類對象的構造屬性和方法 不能復制原型屬性和方法
//父類
function Animail(s, a) {
this.sex = s;
this.age = a;
this.sleep = function () {
return "睡覺";
}
}
//Animal 添加原型屬性
Animail.prototype.color = "花色";
//動物類別類
function Type(t) {
this.type = t;
}
//子類
function Cat(n, s, a, t) {
this.name = n;
this.eat = function () {
return "吃東西"
}
Animail.call(this, s, a);
Type.apply(this, [t]);
}
//實例化子類對象
var cat = new Cat("小貓", "公", 2, "貓科"); //類對象在實例化的時候會直接執行自身的構造函數
console.log(cat);
/檢測構造繼承里面的類別問題
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animail);//false
console.log(cat instanceof Type);//false
3實例繼承
原理是在子類里面直接構造父類的實例
優點:可以傳遞給父類參數 不限制調用的方式
缺點:不能多繼承;不能拿到子類的構造屬性和方法
實例繼承 子類的實例不是本身而是父類
//父類
function Person(n, s) {
this.name = n;
this.sex = s;
this.sleep = function () {
console.log(this.name + "睡覺");
}
}
//子類
function Child(n, s) {
var per = new Person(n, s);
return per;
}
//實例化子類對象
var child = new Child("張三", "女");
console.log(child instanceof Child);//false
console.log(child instanceof Person);//true
4拷貝繼承
原理是 將父類里面的屬性方法拷貝給子類
子類的實例是本身 不是父類
子類向父類傳遞參數
可以支持多繼承
function Animal(n) {
this.name = n;
this.sleep = function () {
return this.name + "睡覺"
}
}
function Cat(n, a) {
this.age = a;
//拷貝
var animal = new Animal(n);
for (var p in animal) {
Cat.prototype[p] = animal[p];
}
//繼續new 別的對象 進行拷貝
}
/* Cat.prototype.name="";
Cat.prototype.sleep=function (){
};*/
//實例化子類
var cat = new Cat("小花", 3);
console.log(cat);
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animal);//false
5組合繼承
構造繼承+原型鏈繼承
子類的實例即是本身也是父類
沒有原型對象屬性的共享
實現多繼承
調用了兩次父類的構造函數
function Person(n) {
this.name = n;
this.sleep = function () {
return this.name + "睡覺";
}
}
Person.prototype = {
job: function () {
return this.name + "job";
}
}
function Child(n, a, s) {
this.age = a;
this.sex = s;
//構造繼承
Person.call(this, n);
}
//原型鏈繼承
Child.prototype = new Person();
var child = new Child("張三", 18, "男");
console.log(child);
console.log(child instanceof Child); //true
console.log(child instanceof Person);//true
6寄生組合繼承
是處理組合繼承的缺點 避免兩次調用父類的構造函數
原理是把父類的原型給予一個空對象的原型
子類對象的實例即是本身也是父類
function Person(n) {
this.name = n;
this.sleep = function () {
return this.name + "睡覺";
}
}
console.log(Person.prototype);
function Child(n, a) {
this.age = a;
this.eat = function () {
return this.name + "吃飯"
}
Person.call(this, n);
}
//寄生
(function () {
var fn = function () {
};
//將父類的原型對象給予空對象
fn.prototype = Person.prototype;
Child.prototype = new fn();
})();
var child = new Child("李四", 20);
console.log(child);
console.log(child instanceof Child); //true
console.log(child instanceof Person); //true
關于javascript的對象繼承的方法就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果喜歡這篇文章,不如把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。