您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)JavaScript中有哪些繼承的方法,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
繼承: 首先繼承是一種關(guān)系,類(class)與類之間的關(guān)系,JS中沒有類,但是可以通過構(gòu)造函數(shù)模擬類,然后通過原型來實現(xiàn)繼承。
繼承也是為了數(shù)據(jù)共享,js中的繼承也是為了實現(xiàn)數(shù)據(jù)共享
我們可以聯(lián)想到原型,他的兩個作用是:
原型作用之一:數(shù)據(jù)共享,節(jié)省內(nèi)存空間
原型作用之二:為了實現(xiàn)繼承
繼承是一種關(guān)系:父類級別與類級別的關(guān)系
例子:
人類別: 姓名, 性別, 年齡 ,吃飯, 睡覺
學(xué)生類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 學(xué)習(xí)行為
老師類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資,教學(xué)行為
程序員: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資, 敲代碼
司機類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資 開車
動物類別: 體重, 顏色, 吃
狗類別: 體重,顏色, 吃, 咬人
二哈類別: 體重,顏色, 吃, 咬人 逗主人開心,汪汪,你好帥
面向?qū)ο蟮奶匦?封裝,繼承,多態(tài)
封裝:就是包裝
一個值存儲在一個變量中–封裝
一坨重復(fù)代碼放在一個函數(shù)中–封裝
一系列的屬性放在一個對象中–封裝
一些功能類似的函數(shù)(方法)放在一個對象中–封裝
好多相類似的對象放在一個js文件中—封裝
多態(tài):一個對象有不同的行為,或者是同一個行為針對不同的對象,產(chǎn)生不同的結(jié)果,要想有多態(tài),就要先有繼承,js中可以模擬多態(tài),但是不會去使用,也不會模擬,
構(gòu)造函數(shù)的屬性繼承:借用構(gòu)造函數(shù)
繼承的時候,不用改變原型的指向,直接調(diào)用父級的構(gòu)造函數(shù)的方式來為屬性賦值就可以了
—— 借用構(gòu)造函數(shù):把要繼承的父級的構(gòu)造函數(shù)拿過來,使用一下就可以啦。
借用構(gòu)造函數(shù):
構(gòu)造函數(shù)名字.call(當(dāng)前對象,屬性,屬性,屬性....);
優(yōu)點:解決了屬性繼承,并且值不重復(fù)的問題
缺陷:父級類別中的方法不能繼承
function Person (name, age) { this.type = 'human' this.name = name this.age = age } function Student (name, age) { // 借用構(gòu)造函數(shù)繼承屬性成員 Person.call(this, name, age) } var s1 = Student('張三', 18) console.log(s1.type, s1.name, s1.age) // => human 張三 18
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> function Person(name, age, sex, weight) { this.name = name; this.age = age; this.sex = sex; this.weight = weight; } Person.prototype.sayHi = function () { console.log("您好"); }; function Student(name,age,sex,weight,score) { //借用構(gòu)造函數(shù) Person.call(this,name,age,sex,weight); this.score = score; } var stu1 = new Student("小明",10,"男","10kg","100"); console.log(stu1.name, stu1.age, stu1.sex, stu1.weight, stu1.score); var stu2 = new Student("小紅",20,"女","20kg","120"); console.log(stu2.name, stu2.age, stu2.sex, stu2.weight, stu2.score); var stu3 = new Student("小麗",30,"妖","30kg","130"); console.log(stu3.name, stu3.age, stu3.sex, stu3.weight, stu3.score); </script> </head> <body> </body> </html>
構(gòu)造函數(shù)的原型方法繼承:拷貝繼承(for-in)
拷貝繼承;把一個對象中的屬性或者方法直接復(fù)制到另一個對象中
function Person (name, age) { this.type = 'human' this.name = name this.age = age } Person.prototype.sayName = function () { console.log('hello ' + this.name) } function Student (name, age) { Person.call(this, name, age) } // 原型對象拷貝繼承原型對象成員 for(var key in Person.prototype) { Student.prototype[key] = Person.prototype[key] } var s1 = Student('張三', 18) s1.sayName() // => hello 張三
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> //拷貝繼承;把一個對象中的屬性或者方法直接復(fù)制到另一個對象中 function Person() { } Person.prototype.age=10; Person.prototype.sex="男"; Person.prototype.height=100; Person.prototype.play=function () { console.log("玩的好開心"); }; var obj2={}; //Person的構(gòu)造中有原型prototype,prototype就是一個對象,那么里面,age,sex,height,play都是該對象中的屬性或者方法 for(var key in Person.prototype){ obj2[key]=Person.prototype[key]; } console.dir(obj2); obj2.play(); </script> </head> <body> </body> </html>
另一種繼承方式:原型繼承
原型繼承:改變原型的指向
function Person (name, age) { this.type = 'human' this.name = name this.age = age } Person.prototype.sayName = function () { console.log('hello ' + this.name) } function Student (name, age) { Person.call(this, name, age) } // 利用原型的特性實現(xiàn)繼承 Student.prototype = new Person() var s1 = Student('張三', 18) console.log(s1.type) // => human s1.sayName() // => hello 張三
組合繼承:原型+借用構(gòu)造函數(shù)繼承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> //原型實現(xiàn)繼承 //借用構(gòu)造函數(shù)實現(xiàn)繼承 //組合繼承:原型繼承+借用構(gòu)造函數(shù)繼承 function Person(name,age,sex) { this.name=name; this.age=age; this.sex=sex; } Person.prototype.sayHi=function () { console.log("薩瓦迪卡"); }; function Student(name,age,sex,score) { //借用構(gòu)造函數(shù):屬性值重復(fù)的問題 Person.call(this,name,age,sex); this.score=score; } //改變原型指向----繼承 Student.prototype=new Person();//不傳值 Student.prototype.eat=function () { console.log("吃東西"); }; var stu=new Student("小黑",20,"男","100分"); console.log(stu.name,stu.age,stu.sex,stu.score); stu.sayHi(); stu.eat(); var stu2=new Student("小黑黑",200,"男人","1010分"); console.log(stu2.name,stu2.age,stu2.sex,stu2.score); stu2.sayHi(); stu2.eat(); //屬性和方法都被繼承了 </script> </head> <body> </body> </html>
原型繼承:改變原型的指向
借用構(gòu)造函數(shù)繼承:主要解決屬性的問題
組合繼承:原型繼承+借用構(gòu)造函數(shù)繼承
既能解決屬性問題,又能解決方法問題
拷貝繼承:就是把對象中需要共享的屬性或者犯法,直接遍歷的方式復(fù)制到另一個對象中
javascript是一種動態(tài)類型、弱類型的語言,基于對象和事件驅(qū)動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言,同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能,現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器,如Node.js。
關(guān)于JavaScript中有哪些繼承的方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。