javascript
JavaScript原型对象---知识总结
目錄
一、什么是原型（原型的基本概念）
二、原型的作用
?三、面向對象的程序設計
四、繼承
????????（一）ES6中類的繼承
????????（二）ES5中的繼承（基于原型的繼承）
?五、原型鏈
?下面有個有趣的例子
十八、組件————溫開水的復習筆記_咕嚕一口溫開水的博客-CSDN博客
一、什么是原型（原型的基本概念）
籠統來說：
任何一個JavaScript對象（一般有對花括號）都有一個原型對象，這個原型對象是JavaScript語言內置的，JavaScript對象可以使用原型對象的屬性和方法。
也可以這樣理解：每一個JavaScript對象(null除外)在創建的時候就會與之關聯另一個對象，這個對象就是我們所說的原型，每一個對象都會從原型"繼承"屬性。
再來一通不怎么好理解的：
（1）前置知識
JS中對象大致可以分為兩類，即：普通對象Object?和?函數對象Function。一般而言，通過new Function產生的對象是函數對象，其他對象都是普通對象。兩個基本：①只要創建了對象（無論是函數對象還是普通對象），都自帶一個_proto_屬性（可稱為隱式原型），一個對象的隱式原型指向構造該對象的構造函數的原型，這也保證了實例能夠訪問在構造函數原型中定義的屬性和方法。②其中函數對象除了和其他對象一樣有上述_proto_屬性之外，還有自己特有的屬性——原型屬性（prototype），這個屬性是一個指針，指向的對象正是調用該構造函數而創建的實例的原型，這個對象的用途就是包含所有實例共享的屬性和方法（我們把這個對象叫做原型對象）。原型對象也有一個屬性，叫做constructor，這個屬性包含了一個指針，指回原構造函數。
（2）抽象闡述
每個javascript對象都有一個原型對象，這個對象在不同的解釋器下的實現不同。比如在firefox下，每個對象都有一個隱藏的__proto__屬性，這個屬性就是“原型對象”的引用。如果對象沒有顯式的聲明自己的”__proto__”屬性，這個值默認的設置為Object.prototype,而Object.prototype的”__proto__”屬性的值為”null”，標志著原型鏈的終結。
由于原型對象本身也是對象，根據上邊的定義，它也有自己的原型，而它自己的原型對象又可以有自己的原型，這樣就組成了一條鏈，這個就是原型鏈，JavaScritp引擎在訪問對象的屬性時，如果在對象本身中沒有找到，則會去原型鏈中查找，如果找到，直接返回值，如果整個鏈都遍歷且沒有找到屬性，則返回undefined.原型鏈一般實現為一個鏈表，這樣就可以按照一定的順序來查找。
下面代碼幫助理解
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>//什么是原型？//每一個對象都有它的原型對象，它可以使用自己原型對象上的所有屬性和方法let dog = {name:"狗勾"}dog.__proto__.eat = function (){//1、通過對象的__proto__獲取console.log("啃骨頭1");}dog.eat();//獲取原型的方法：//1、通過對象的__proto__獲取//2、通過構造函數的prototype屬性拿到原型function Dog(name, age){this.name = name;//面試題：構造函數中的this指向誰？ 答：指向new創建的對象this.age = age;}//構造函數let dogfn = new Dog("狗勾", 6); //使用new來創建對象(細品)Dog.prototype.eat = function (){console.log("啃骨頭2");}dogfn.eat();//調用函數</script> </body> </html>二、原型的作用
下面來簡單說說原型在實際項目中有什么用？
?注意一點：擴展對象
舉一個例子：我希望自己實現一個功能，輸出特定格式的日期字符串
先了解下面的知識點：
1）JavaScript語言中有內置變量類型為8種，為Number、String、Boolean、Null、undefined、object、symbol。
2）object包含了Data（時間相關）、function、Array等，這三種是常用的。
3）基本類型（單類型）：除Object外的?String、Number、boolean、null、undefined。
? ? ?引用類型：object，里面包含的 function、Array、Date等
代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>//原型對象有什么作用let date = new Date();Date.prototype.myFunction = function (){let year = this.getFullYear();let month = this.getMonth() + 1;let date = this.getDate();return `${year}年${month}月${date}日`;}console.log(date.myFunction());</script> </body> </html>?三、面向對象的程序設計
在ES5時我們是使用構造函數來創建對象，到了ES6時加入了新語法類來幫助我們創建對象，在類中加入屬性和方法
由于這個新特性，我們獲取原型的方法又多了一條
小總結
代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>//ES6類的語法class Dog{constructor(name, age) {this.name = name;this.age = age;}}Dog.prototype.eat = function(){console.log("啃骨頭");}let dog = new Dog("狗勾",6);console.log(dog);dog.eat();</script> </body> </html>四、繼承
繼承：子對象可以使用父對象上的所有屬性和方法
（一）ES6中類的繼承
我們來通過一個場景來幫組理解
場景：博客系統 博客用戶和管理員，兩者都可以登錄博客，但管理員可以刪除一個人代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>//場景：博客系統//博客用戶和管理員，兩者都可以登錄博客，但管理員可以刪除一個人class User{constructor(name, password) {this.name = name;this.password = password;}login(){console.log("登錄");}}class Admin extends User{deletePerson(){console.log("刪除一個人")}}let admin = new Admin("amin", "admin");admin.login();admin.deletePerson();console.log(admin);</script> </body> </html>?（二）ES5中的繼承（基于原型的繼承）
思路：
Admin對象可以使用原型上的所有屬性和方法（特性）。若將原型對象設置為User的實例，那么Admin就可以使用User的所有的屬性和方法。這就是一個基于原型的繼承。像一個鏈條串起來了。
?代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>//場景：博客系統//博客用戶和管理員，兩者都可以登錄博客，但管理員可以刪除一個人// class User{// constructor(name, password) {// this.name = name;// this.password = password;// }// login(){// console.log("登錄");// }// }//// class Admin extends User{// deletePerson(){// console.log("刪除一個人")// }// }//// let admin = new Admin("amin", "admin");// admin.login();// admin.deletePerson();// console.log(admin);function User(username, password){this.username = username;this.password = password;this.login = function(){console.log("登錄");}}function Admin(){this.deletePerson = function(){console.log("刪除");}}Admin.prototype = new User();//實現繼承const admin = new Admin("admin", "password");admin.login();admin.deletePerson();console.log(admin);</script> </body> </html>五、原型鏈
這種原型對象鏈式的繼承和調用我們稱之為原型鏈。
類中的extend可理解為相當于下面的 Admin.prototype = new User();//實現繼承?下面有個有趣的例子
1、首先，在Oject原型上設置一個login方法
function User(username, password){this.username = username;this.password = password;}function Admin(){this.deletePerson = function(){console.log("刪除");}}Admin.prototype = new User();//實現繼承Object.prototype.login = function(){console.log("Object原型上的登錄方法");}const admin = new Admin("admin", "password");admin.login();2、然后，聲明和初始化一個數組
function User(username, password){this.username = username;this.password = password;}function Admin(){this.deletePerson = function(){console.log("刪除");}}Admin.prototype = new User();//實現繼承Object.prototype.login = function(){console.log("Object原型上的登錄方法");}const admin = new Admin("admin", "password");admin.login();let a = [1,2,3];a.login();?object原型是底層的對象，任何一個對象（引用類型）都可以使用在object上創建的方法。
問題
1）object到底有啥？
2）對象和prototype對象是繼承關系嗎？
3）__proto__ 和 prototype區別，在普通對象、函數對象中表現為啥樣的？
詳解請看這些筆記
十八、組件————溫開水的復習筆記_咕嚕一口溫開水的博客-CSDN博客https://blog.csdn.net/qq_47286790/article/details/122893790
JavaScript原型和原型鏈，以及__proto__和prototype_咕嚕一口溫開水的博客-CSDN博客https://blog.csdn.net/qq_47286790/article/details/122716646?spm=1001.2014.3001.5502
總結
以上是生活随笔為你收集整理的JavaScript原型对象---知识总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在eNSP模拟器上通过Dot1q终结子接
- 下一篇： JavaScript原型的作用