JavaScript繼承的三種方法例項
繼承程式設計客棧
1. 什麼是繼承
繼承: 首先繼承是一種關係，類(class)與類之間的關係，js中沒有類,但是可以通過建構函式模擬類，然後通過原型來實現繼承。
- 繼承也是為了資料共享,js中的繼承也是為了實現資料共享
我們可以聯想到原型，他的兩個作用是：
- 原型作用之一:資料共享,節省記憶體空間
- 原型作用之二:為了實現繼承
繼承是一種關係：父類級別與類級別的關係
例子:
人類別: 姓名,性別,年齡,吃飯,睡覺
學生類別: 姓名,睡覺 學習行為
老師類別: 姓名,睡覺 工資,教學行為
程式設計師: 姓名,敲程式碼
司機類別: 姓名,睡覺 工資 開車
動物類別: 體重， 顏色,吃
狗類別: 體重,顏色,吃,咬人
二哈類別: 體重,咬人 逗主人開心,汪汪,你好帥
面向物件的特性:封裝,繼承,多型
封裝:就是包裝
一個值儲存在一個變數中–封裝
一坨重複程式碼放在一個函式中–封裝
一系列的屬性放在一個物件中–封裝
一些功能類似的函式(方法)放在一個物件中–封裝
好多相類似的物件放在一個js檔案中—封裝
多型:一個物件有不同的行為,或者是同一個行為針對不同的物件,產生不同的結果,要想有多型,就要先有繼承,js中可以模擬多型,但是不會去使用,也不會模擬,
2. javascript繼承的三種方法
建構函式的屬性繼承：借用建構函式
繼承的時候,不用改變原型的指向,直接呼叫父級的建構函式的方式來為屬性賦值就可以了
—— 借用建構函式:把要繼承的父級的建構函式拿過來,使用一下就可以啦。
借用建構函式:
建構函式名字.call(當前物件,屬性,屬性....);
優點：解決了屬性繼承,並且值不重複的PDcSANb問題
缺陷:父級類別中的方法不能繼承
function Person (name,age) {
this.type = 'human'
this.name = name
this.age = age
}
function Student (name,age) {
// 借用建構函式繼承屬性成員
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,weight,score) {
//借用建構函式
Person.call(this,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>
建構函式的原型方法繼承：拷貝繼承（for-in）
拷貝繼承；把一個物件中的屬性或者方法直接複製到另一個物件中
function Person (name,age) {
this.type = 'human'
this.name = name
this.age = age
}
Person.prototype.sayName = function () {
console.log('hello ' + this.nPDcSANbame)
}
function Student (name,age) {
Person.call(this,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>
//拷貝繼承；把一個物件中的屬性或者方法直接複製到另一個物件中
function Person() {
}
Person.prototype.age=10;
Person.prototype.sex="男";
Person.prototype.height=100;
Person.prototype.play=function () {
console.log("玩的好開心");
};
var obj2={};
//Person的構造中有原型prototype,prototype就是一個物件,那麼裡面,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)
}
// 利用原型的特性實現繼承
Student.prototype = new Person()
var s1 = Student('張三',18)
console.log(s1.type) // => human
s1.sayName() // => hello 張三
組合繼承：原型+借用建構函式繼承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//原型實現繼承
//借用建構函式實現繼承
//組合繼承:原型繼承+借用建構函式繼承
function Person(name,sex) {
this.namehttp://www.cppcns.com=name;
this.age=age;
this.sex=sex;
}
Person.prototype.sayHi=function () {
console.log("薩瓦迪卡");
};
function Student(name,score) {
//借用建構函式:屬性值重複的問題
Person.call(this,sex);
this.score=score;
}
//改變原型指向----繼承
Student.prototype=new Person();//不傳值
Student.prototype.eat=functPDcSANbion () {
console.log("吃東西");
};
var stu=new Student("小黑","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.score);
stu2.sayHi();
stu2.eat();
//屬性和方法都被繼承了
</script>
</head>
<body>
</body>
</html>
繼承小總結
原型繼承:改變原型的指向
借用建構函式繼承:主要解決屬性的問題
組合繼承:原型繼承+借用建構函式繼承
既能解決屬性問題,又能解決方法問題
拷貝繼承:就是把物件中需要共享的屬性或者犯法,直接遍歷的方式複製到另一個物件中
總結
到此這篇關於javaScript繼承的三種方法的文章就介紹到這了,更多相關JavaScript繼承方法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！