溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關JavaScript中有哪些繼承的方法，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
繼承: 首先繼承是一種關系，類(class)與類之間的關系，JS中沒有類,但是可以通過構造函數模擬類，然后通過原型來實現繼承。
繼承也是為了數據共享,js中的繼承也是為了實現數據共享
我們可以聯想到原型，他的兩個作用是：
原型作用之一:數據共享,節省內存空間
原型作用之二:為了實現繼承
繼承是一種關系：父類級別與類級別的關系
例子:
人類別: 姓名, 性別, 年齡 ,吃飯, 睡覺
學生類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 學習行為
老師類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資,教學行為
程序員: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資, 敲代碼
司機類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資 開車
動物類別: 體重， 顏色, 吃
狗類別: 體重,顏色, 吃, 咬人
二哈類別: 體重,顏色, 吃, 咬人 逗主人開心,汪汪,你好帥
面向對象的特性:封裝,繼承,多態
封裝:就是包裝
一個值存儲在一個變量中–封裝
一坨重復代碼放在一個函數中–封裝
一系列的屬性放在一個對象中–封裝
一些功能類似的函數(方法)放在一個對象中–封裝
好多相類似的對象放在一個js文件中—封裝
多態:一個對象有不同的行為,或者是同一個行為針對不同的對象,產生不同的結果,要想有多態,就要先有繼承,js中可以模擬多態,但是不會去使用,也不會模擬,
構造函數的屬性繼承：借用構造函數
繼承的時候,不用改變原型的指向,直接調用父級的構造函數的方式來為屬性賦值就可以了
—— 借用構造函數:把要繼承的父級的構造函數拿過來,使用一下就可以啦。
借用構造函數:
構造函數名字.call(當前對象,屬性,屬性,屬性....);
優點：解決了屬性繼承,并且值不重復的問題
缺陷:父級類別中的方法不能繼承
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,age,sex,weight,score) {
//借用構造函數
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>構造函數的原型方法繼承：拷貝繼承（for-in）
拷貝繼承；把一個對象中的屬性或者方法直接復制到另一個對象中
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>
//拷貝繼承；把一個對象中的屬性或者方法直接復制到另一個對象中
function Person() {
}
Person.prototype.age=10;
Person.prototype.sex="男";
Person.prototype.height=100;
Person.prototype.play=function () {
console.log("玩的好開心");
};
var obj2={};
//Person的構造中有原型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)
}
// 利用原型的特性實現繼承
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,age,sex) {
this.name=name;
this.age=age;
this.sex=sex;
}
Person.prototype.sayHi=function () {
console.log("薩瓦迪卡");
};
function Student(name,age,sex,score) {
//借用構造函數:屬性值重復的問題
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>原型繼承:改變原型的指向
借用構造函數繼承:主要解決屬性的問題
組合繼承:原型繼承+借用構造函數繼承
既能解決屬性問題,又能解決方法問題
拷貝繼承:就是把對象中需要共享的屬性或者犯法,直接遍歷的方式復制到另一個對象中
javascript是一種動態類型、弱類型的語言，基于對象和事件驅動并具有相對安全性并廣泛用于客戶端網頁開發的腳本語言，同時也是一種廣泛用于客戶端Web開發的腳本語言。它主要用來給HTML網頁添加動態功能，現在JavaScript也可被用于網絡服務器，如Node.js。
關于JavaScript中有哪些繼承的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
