js原型實現繼承

2021-09-02 15:20:58 字數 2783 閱讀 6995

繼承是一種關係,類與類之間的關係,但是js中沒有類,所以通過建構函式來模擬類,然後通過原型來實現繼承。繼承也是原型的第二個作用,同樣是為了資料共享,原型中實現繼承其實就是改變物件的原型指向

寫法:建構函式名字.call(當前物件, 屬性, 屬性, 屬性。。。)

案例:具體**如下

function person(name, age, ***, weight) 

person.prototype.sayhi = function () ;

function student(name,age,***,weight,score)

var stu1 = new student("小明",10,"男","10kg","100");

console.log(stu1.name, stu1.age, stu1.***, stu1.weight, stu1.score);//輸出 小明 10 男 10kg 100

var stu2 = new student("小紅",20,"女","20kg","120");

console.log(stu2.name, stu2.age, stu2.***, stu2.weight, stu2.score);//輸出 小紅 20 女 20kg 120

var stu3 = new student("小麗",30,"妖","30kg","130");

console.log(stu3.name, stu3.age, stu3.***, stu3.weight, stu3.score);//輸出 小麗 30 妖 30kg 130

借用建構函式繼承的優缺點:

借用建構函式繼承解決了屬性的繼承,並且達到了值不重複的問題,但是父級類別中的方法不能繼承。

寫法:通過改變子類的原型(prototype)指向,指向父類即可。

案例,具體**如下:

function animal(name,weight)

animal.prototype.eat=function()

//狗function dog(color)

dog.prototype=new animal("哮天犬","50kg");

dog.prototype.biteperson=function();

//哈士奇

function erha(***)

erha.prototype=new dog("黑白色");

erha.prototype.douren=function()

var erha=new erha("雄性");

console.log(erha.name, erha.weight,erha.color);//輸出 哮天犬 50kg 黑白色

erha.eat();//輸出 動物都要吃東西的

erha.biteperson();//輸出 哼 汪汪,咬死你

erha.douren();//輸出 哈士奇還可以逗人開心哦

組合繼承是 原型方法實現繼承和借用建構函式實現繼承的結合

案例:具體**如下:

function person(name,age,***,weight)

person.prototype.sayhi=function();

function student(name,age,***,weight,score);

//改變原型指向

student.prototype=new person();//不傳值

student.prototype.eat=function()

var stu=new student("小黑",20,"男","55kg","100分");

console.log(stu.name,stu.age,stu.***,stu.weight,stu.score);//輸出 小黑 20 男 55kg 100分

stu.sayhi();//輸出 人都會進行友好的打招呼

stu.eat();//輸出 吃東西

//屬性和方法都繼承了

拷貝繼承是把乙個物件中的屬性或者方法直接複製到另乙個物件中。

案例1(淺拷貝):具體**如下:

var obj1=

};var obj2=obj1;//指向同一位址

console.log(obj2.name,obj2.age);//輸出 小糊塗 20

obj2.sleep(); //輸出 睡覺了

var obj2={};

for(var key in obj1)

console.log(obj2.name, obj2.age); //輸出 小糊塗 20

案例2(深拷貝):具體**如下:

function person()

person.prototype.age=10;

person.prototype.***="男";

person.prototype.height=100;

person.prototype.play=function()

//上面的person的構造器中有原型prototype,prototype就是乙個物件,裡面有age ,***,height等屬性還有play這個方法

//這是真正的拷貝繼承

var obj2={};

for(var key in person.prototype)

console.log(obj2.age, obj2.***, obj2.height);// 輸出 10 "男" 100

obj2.play();//輸出 玩的好開興啊

JS通過原型實現多重繼承

宣告乙個動物型別 function animal 為動物類建立乙個aname屬性 animal.prototype.aname 動物 為動物類建立乙個吼叫的方法 animal.prototype.howl function word console.log 我是 this.aname 我想說 wor...

js繼承(一)原型繼承

正式開工了 繼承在js中有著很大的地位,同時理解起來也比較抽象,我將分幾篇部落格來記錄js的繼承。原型繼承 相當於將父類物件與子類物件打通橋梁,可以靈活實現追加屬性與行為 子類擁有父類的一切行為和屬性。特點 非常純粹的繼承關係,例項是子類的例項,也是父類的例項 父類新增原型方法 原型屬性,子類都能訪...

js繼承,原型鏈繼承

1 乙個型別的物件能夠訪問另外乙個型別的屬性和方法 2 類與類之間的關係 類就是眾多例項共有的屬性和方法的乙個抽象 function animal name animal.prototype.say function function dog 把子類的原型指向父類的例項 dog.prototype ...