目錄
構造函數
prototype
定義：
使用場景：
constructor
使用場景：
原型proto
原型鏈
定義
特點
instanceof 運算符
原型繼承的基本概念
在JavaScript中，構造函數和原型是面向對象編程的核心概念，它們共同構成了JavaScript對象的創建和繼承機制。
構造函數
構造函數是一種特殊的函數，用于創建和初始化對象。當你想要創建一個具有特定屬性和方法的對象時，你可以定義一個構造函數。構造函數通常以大寫字母開頭，以區分普通函數。
// 1. 構造函數實現封裝，封裝人的姓名、年齡和 sayHi方法function Person(name, age) {this.name = namethis.age = agethis.sayHi = function () {console.log('hi~')}}// 實例化const zs = new Person('張三', 18)const ls = new Person('李四', 19)console.log(zs)console.log(ls)console.log(zs === ls) // false // 2. 構造函數實現封裝有個小問題console.log(zs.sayHi === ls.sayHi) // false 兩個函數不一樣
prototype
定義：
構造函數通過原型分配的函數是所有對象所共享的。JavaScript 規定，每一個構造函數都有一個?prototype屬性，指向另一個對象。注意這個?prototype?就是一個對象，這個對象的所有屬性和方法，都會被構造函數所擁有。
使用場景：
可以解決：構造函數封裝時函數（方法）會多次創建，占用內存的問題
原型對象可以掛載函數，對象實例化不會多次創建原型對象里面的函數，節約內存
<body><script>// 1. 構造函數實現封裝，封裝人的姓名、年齡和 sayHi方法
?function Person(name, age) {this.name = namethis.age = age// this.sayHi = function () {// ? console.log('hi~')// }}Person.prototype.sayHi = function () {console.log('hi~')}console.log(Person.prototype) ?// 原型對象// 實例化const zs = new Person('張三', 18)const ls = new Person('李四', 19)zs.sayHi()ls.sayHi()// console.log(zs)// console.log(ls)
?// 構造函數實現封裝有個小問題console.log(zs.sayHi === ls.sayHi) ?// true
?
?</script>
</body>
構造函數和原型對象中的this 都指向實例化的對象
// 1. 構造函數this指向 實例對象function Person(name, age) {this.name = name}// 2. 原型對象this指向 實例對象Person.prototype.sayHi = function () {console.log('hi~')console.log(this) // 指向實例對象 zs}const zs = new Person('張三')zs.sayHi()
constructor
每個原型對象里面都有個constructor 屬性（constructor 構造函數）
作用：該屬性指向該原型對象的構造函數， 簡單理解，就是指向我的爸爸，我是有爸爸的孩子
使用場景：
如果有多個對象的方法，我們可以給原型對象采取對象形式賦值.
但是這樣就會覆蓋構造函數原型對象原來的內容，這樣修改后的原型對象 constructor 就不再指向當前構造函數了
此時，我們可以在修改后的原型對象中，添加一個 constructor 指向原來的構造函數。
<body><script>// constructor屬性function Person(name) {this.name = name}
?// 1. constructor屬性在原型對象里面// console.log(Person.prototype)
?// 2. constructor屬性 指向原型對象的構造函數console.log(Person.prototype.constructor === Person) ?// true
?// 3. 有什么使用場景呢？// Person.prototype.sing = function () {// ? console.log('我會唱歌')// }// Person.prototype.dance = function () {// ? console.log('我會跳舞')// }
?// console.log(Person.prototype)
?Person.prototype = {// 手動指定一個constructor 指回構造函數constructor: Person,sing() {console.log('我會唱歌')},dance() {console.log('我會跳舞')}}console.log(Person.prototype)
?</script>
</body>
原型proto
對象都會有一個屬性 proto 指向構造函數的prototype 原型對象
之所以我們對象可以使用構造函數 prototype 原型對象的方法，就是因為對象有 proto 原型的存在
<body><script>// 構造函數function Person(name) {this.name = name}
?// 1. 實例對象里面有 __proto__ 屬性const zs = new Person('張三')console.log(zs)
?// 2. __proto__ 指向原型對象 console.log(zs.__proto__ === Person.prototype) ?// true
?// 3. 注意事項// 3.1 prototype 原型對象 ? __proto__ 原型// 3.2 __proto__ 非標準屬性，在現代瀏覽器里面顯示的是 [[Prototype]] 但是他們是等價的// 3.3 __proto__ 盡量不要修改它，否則會影響性能
?</script>
</body>
原型鏈
定義
當你訪問一個對象的屬性時，JavaScript 引擎會首先在對象自身查找該屬性，如果沒有找到，它會沿著原型鏈向上查找，直到找到該屬性或者到達原型鏈的末端（通常是一個空對象）。這個機制允許對象繼承屬性。
特點
①當訪問一個對象成員(屬性/方法)時，首先查找這個對象自身有沒有該成員(屬性/方法)
②如果沒有就查找它的原型對象（也就是 proto指向的 prototype 原型對象）
③如果還沒有就查找原型對象的原型對象（Object的原型對象）
④依此類推一直找到 Object 為止（null）
⑤原型鏈就在于為對象成員查找機制提供一個方向，或者說一條路線
<body><script>// __proto__屬性鏈狀結構稱為原型鏈// Person構造函數function Person(name) {this.name = name}// 1. 實例對象const zs = new Person('張三')zs.sayHi = function () {console.log('實例對象的方法')}// zs.sayHi()// 2. Person 原型對象Person.prototype.sayHi = function () {console.log('Person原型對象的方法')}// zs.sayHi()// 3. Ojbect 原型對象Object.prototype.sayHi = function () {console.log('Object原型對象的方法')}// zs.sayHi()// 4. nullzs.sayHi()// console.log(zs.sayHi) // undefined</script>
</body>
instanceof 運算符
用來檢測構造函數.prototype 是否存在于實例對象的原型鏈上
<body><script>// instanceof 運算符 // 語法: 實例對象 instanceof 構造函數// 作用： 檢測構造函數的原型對象是否在實例對象的原型鏈上// Person構造函數function Person(name) {this.name = name}function Person1(name) {this.name = name}const zs = new Person('張三')console.log(zs instanceof Person) // trueconsole.log(zs instanceof Person1) // false// 數組 const arr = [1, 2, 3]console.log(arr instanceof Array) // trueconsole.log(arr instanceof Object) // true console.log(arr) // __proto__console.log(arr.__proto__ === Array.prototype) // trueconsole.log(Array.prototype.__proto__ === Object.prototype) // true</script>
原型繼承的基本概念
- 原型對象：每個函數在創建時都會自動創建一個prototype屬性，這個屬性是一個對象，包含了該函數的所有實例共享的屬性和方法。
- 原型鏈：對象的[[Prototype]]屬性指向其原型對象，而原型對象本身也可能有一個[[Prototype]]屬性，指向另一個對象。這樣，對象之間形成了一條鏈式結構，這就是原型鏈。
- 屬性查找：當訪問一個對象的屬性或方法時，JavaScript引擎首先在對象自身查找，如果找不到，就沿著原型鏈向上查找，直到找到屬性或方法，或者到達原型鏈的末端。
<body><script>// 1. 抽取封裝 公共的屬性和方法 Person構造函數// 父級function Person() {this.eyes = 2}Person.prototype.eat = function () {console.log('我會吃飯')}console.log(new Person())console.log(new Person() === new Person()) // false// 男人構造函數function Man() {}// 女人構造函數function Woman() {}// 2. 繼承-借助于原型對象Man.prototype = new Person()Man.prototype.constructor = Manconsole.log(Man.prototype)const zs = new Man()// console.log(zs)Woman.prototype = new Person()Woman.prototype.constructor = Womanconst xl = new Woman()// console.log(xl)Woman.prototype.baby = function () {console.log('我會生孩子')}console.log(xl)console.log(zs) // 張三沒有baby方法了</script>
</body>
![[線性RNN系列] Mamba: S4史詩級升級](http://pic.xiahunao.cn/[線性RNN系列] Mamba: S4史詩級升級)
