當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript原型对象---知识总结

發布時間：2024/3/26 javascript 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 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方法

2、然后，聲明和初始化一個數組

?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终结子接
下一篇： gradle idea java ssm