Web前端------JS高階繼承的實現方式
原型實現繼承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
/*
*
* 物件導向程式設計思想:根據需求,分析物件,找到物件有什麼特徵和行為,通過程式碼的方式來實現需求,要想實現這個需求,就要建立物件,要想建立物件,就應該顯示有建構函式,然後通過建構函式來建立物件.,通過物件呼叫屬性和方法來實現相應的功能及需求,即可
* 首先JS不是一門物件導向的語言,JS是一門基於物件的語言,那麼為什麼學習js還要學習物件導向,因為物件導向的思想適合於人的想法,程式設計起來會更加的方便,及後期的維護....
* 物件導向的程式語言中有類(class)的概念(也是一種特殊的資料型別),但是JS不是物件導向的語言,所以,JS中沒有類(class),但是JS可以模擬物件導向的思想程式設計,JS中會通過建構函式來模擬類的概念(class)
*
*
*
*
* 小明,小紅，小麗，小白，小花 都是人
* 共同的特徵和行為
* 特徵--->屬性
* 行為---方法
*
* 物件導向的特性:封裝,繼承,多型
*
* 封裝:就是包裝
* 一個值儲存在一個變數中--封裝
* 一坨重複程式碼放在一個函式中--封裝
* 一系列的屬性放在一個物件中--封裝
* 一些功能類似的函式(方法)放在一個物件中--封裝
* 好多相類似的物件放在一個js檔案中---封裝
*
* 繼承: 首先繼承是一種關係,類(class)與類之間的關係,JS中沒有類,但是可以通過建構函式模擬類,然後通過原型來實現繼承
* 繼承也是為了資料共享,js中的繼承也是為了實現資料共享
*
* 原型作用之一:資料共享,節省記憶體空間
* 原型作用之二:為了實現繼承
*
* 繼承是一種關係:
*
* 父類級別與類級別的關係
*
* 例子:
*
* 小楊--->人, 姓名, 有錢, 帥, 有功夫--降龍十八掌
* 小楊子-->人,
* 繼承:
* 姓氏----繼承
* 外表----繼承
* 財產----繼承
* 功夫---繼承
*
*
* 人: 姓名, 性別, 年齡 ,吃飯, 睡覺
*
* 學生類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 學習行為
* 老師類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資,教學行為
* 程式設計師: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資, 敲程式碼
* 司機類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資 開車
*
*
* 動物類別: 體重， 顏色, 吃
* 狗類別: 體重,顏色, 吃, 咬人
* 二哈類別: 體重,顏色, 吃, 咬人 逗主人開心,汪汪,你好帥
*
*
*
*
*
*
* 多型:一個物件有不同的行為,或者是同一個行為針對不同的物件,產生不同的結果,要想有多型,就要先有繼承,js中可以模擬多型,但是不會去使用,也不會模擬,
*
*
*
*
*
* */
//例子:
//人,都有姓名,性別,年齡, 吃飯, 睡覺, 玩
//學生,都有姓名,性別,年齡, 成績, 吃飯, 睡覺, 玩 ,學習的行為
//js中通過原型來實現繼承
function Person(name,age,sex) {
this.name=name;
this.sex=sex;
this.age=age;
}
Person.prototype.eat=function () {
console.log("人可以吃東西");
};
Person.prototype.sleep=function () {
console.log("人在睡覺");
};
Person.prototype.play=function () {
console.log("生活就是不一樣的玩法而已");
};
function Student(score) {
this.score=score;
}
//改變學生的原型的指向即可==========>學生和人已經發生關係
Student.prototype=new Person("小明",10,"男");
Student.prototype.study=function () {
console.log("學習很累很累的哦.");
};
//相同的程式碼太多,造成了程式碼的冗餘(重複的程式碼)
var stu=new Student(100);
console.log(stu.name);
console.log(stu.age);
console.log(stu.sex);
stu.eat();
stu.play();
stu.sleep();
console.log("下面的是學生物件中自己有的");
console.log(stu.score);
stu.study();
</script>
</head>
<body>
</body>
</html>
借用建構函式實現繼承
<!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(score) {
// this.score=score;
// }
// //希望人的類別中的資料可以共享給學生---繼承
// Student.prototype=new Person("小明",10,"男","50kg");
//
// var stu1=new Student("100");
// console.log(stu1.name,stu1.age,stu1.sex,stu1.weight,stu1.score);
// stu1.sayHi();
//
// var stu2=new Student("120");
// stu2.name="張三";
// stu2.age=20;
// stu2.sex="女";
// console.log(stu2.name,stu2.age,stu2.sex,stu2.weight,stu2.score);
// stu2.sayHi();
// var stu3=new Student("130");
// console.log(stu3.name,stu3.age,stu3.sex,stu3.weight,stu3.score);
// stu3.sayHi();
//為了資料共享,改變原型指向,做到了繼承---通過改變原型指向實現的繼承
//缺陷:因為改變原型指向的同時實現繼承,直接初始化了屬性，繼承過來的屬性的值都是一樣的了,所以,這就是問題
//只能重新呼叫物件的屬性進行重新賦值,
//解決方案:繼承的時候,不用改變原型的指向,直接呼叫父級的建構函式的方式來為屬性賦值就可以了------借用建構函式:把要繼承的父級的建構函式拿過來,使用一下就可以了
//借用建構函式:建構函式名字.call(當前物件,屬性,屬性,屬性....);
//解決了屬性繼承,並且值不重複的問題
//缺陷:父級類別中的方法不能繼承
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>
組合繼承
<!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>
拷貝繼承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//拷貝繼承；把一個物件中的屬性或者方法直接複製到另一個物件中
// var obj1={
// name:"小糊塗",
// age:20,
// sleep:function () {
// console.log("睡覺了");
// }
// };
//
// //改變了地址的指向
// var obj2=obj1;
// console.log(obj2.name,obj2.age);
// obj2.sleep();
// var obj1={
// name:"小糊塗",
// age:20,
// sleep:function () {
// console.log("睡覺了");
// }
// };
//
//
// var obj2={};
// for(var key in obj1){
// obj2[key]=obj1[key];
// }
// console.log(obj2.name);
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>
繼承總結
//物件導向特性:封裝,繼承,多型
//繼承,類與類之間的關係,物件導向的語言的繼承是為了多型服務的,
//js不是物件導向的語言,但是可以模擬物件導向.模擬繼承.為了節省記憶體空間
//繼承:
/*
* 原型作用: 資料共享 ，目的是:為了節省記憶體空間,
* 原型作用: 繼承 目的是:為了節省記憶體空間
*
* 原型繼承:改變原型的指向
* 借用建構函式繼承:主要解決屬性的問題
* 組合繼承:原型繼承+借用建構函式繼承
* 既能解決屬性問題,又能解決方法問題
* 拷貝繼承:就是把物件中需要共享的屬性或者犯法,直接遍歷的方式複製到另一個物件中
* */
淺拷貝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永遠的24k純帥$</title>
<script>
//淺拷貝:就是把一個物件的地址拷貝到另一個物件中,指向相同,物件中的屬性或者方法都是一起拷貝過去的
//淺拷貝,把一物件A中的內容直接拷貝到物件中B中
var obj1={
name:"風斯托羅斯基",
age:20,
car:["賓士","寶馬","奧拓"]
};
var obj2={};
function extend(a,b) {
//把a物件中的東西,拷貝到b物件中
for(var key in a){
b[key]=a[key];
}
}
extend(obj1,obj2);
console.dir(obj1);
console.dir(obj2);
</script>
</head>
<body>
</body>
</html>
深拷貝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永遠的24k純帥$</title>
<script>
//深拷貝:把一個物件中的屬性,依次的,一個一個的複製到另一個物件中
var obj1={
name:"風斯托羅斯基",
age:20,
car:["賓士","寶馬","奧拓"],
dog:{
name:"哮天犬",
age:2,
color:"黑色"
}
};
var obj2={};
//把a中的拷貝到b中
function extend(a,b) {
//遍歷a這個物件中所有的屬性
for(var key in a){
var item=a[key];//獲取了a物件中的屬性
if(item instanceof Array){
b[key]=[];//在b物件中新增一個屬性,但是這個屬性的型別是陣列,
extend(item,b[key]);
}else if(item instanceof Object){
b[key]={};
extend(item,b[key]);
}else{
b[key]=item;
}
}
}
extend(obj1,obj2);
console.dir(obj2);
console.dir(obj1);
</script>
<script>
</script>
</head>
<body>
</body>
</html>
歡迎關注我的個人微信公眾號，免費送計算機各種最新視訊資源！你想象不到的精彩！
0.jpg
相關文章
- 好程式設計師web前端教程之JS繼承實現方式解析程式設計師Web前端JS繼承
- JS 繼承的 六 種實現方式JS繼承
- js實現繼承的三種方式JS繼承
- 繼承的實現方式繼承
- js繼承方式JS繼承
- JavaScript實現繼承的方式JavaScript繼承
- js實現繼承的幾種方式和對比JS繼承
- JS中繼承的實現JS中繼繼承
- js繼承方式講解JS繼承
- js--如何實現繼承？JS繼承
- JS進階系列 --- 繼承JS繼承
- JS中的多種繼承方式JS繼承
- js 原型鏈實現類的繼承JS原型繼承
- 原型鏈實現繼承的6種方式原型繼承
- JS中繼承方式總結JS中繼繼承
- [JS]繼承的這6種方式！（上）JS繼承
- [JS]繼承的這6種方式！（下）JS繼承
- 細說 js 的7種繼承方式JS繼承
- odoo 繼承（owl繼承、web繼承、view繼承）Odoo繼承WebView
- Javascript 五十問——實現的繼承多種方式JavaScript繼承
- 實現繼承的幾種方式及工作原理繼承
- js實現繼承的方法以及優缺點JS繼承
- python高階語法：繼承性Python繼承
- JS進階(3)：人人都能懂的繼承JS繼承
- Javascript 中實現物件原型繼承的三種方式JavaScript物件原型繼承
- 舉例說明js如何實現繼承？JS繼承
- C++高階教程之繼承得本質：單繼承（一)C++繼承
- JS中的多種繼承方式(第12天)JS繼承
- JS 總結之原型繼承的幾種方式JS原型繼承
- JAVA物件導向高階一：繼承Java物件繼承
- 從babel實現es6類的繼承來深入理解js的原型及繼承Babel繼承JS原型
- 前端進階（二）JS高階講解物件導向，原型，繼承，閉包，正規表示式，讓你徹底愛上前端前端JS物件原型繼承
- JS中的繼承JS繼承
- 實現JavaScript繼承JavaScript繼承
- prototype實現繼承繼承
- 記不住的繼承方式繼承
- 多執行緒：繼承方式和實現方式的聯絡與區別執行緒繼承
- js之繼承JS繼承