了解組件與Vue的內置關系前,我們需要回顧js原型鏈基礎知識:
1、構造函數
構造函數是一種特殊的方法,用于創建和初始化一個新的對象。它們是使用 new 關鍵字和函數調用來創建對象的。構造函數實際上只是一個普通的函數,通常以大寫字母開頭,用來和普通函數作區分。
構造函數的作用:
js面向對象可以通過構造函數實現封裝,把公共的屬性和方法抽取封裝到構造函數里面來從而實現數據的共享,這樣被構造函數new出來的實例對象就可以使用這些屬性和方法。
構造函數固然好用但是也存在一定的問題:
1、浪費內存。
2、構造函數中的函數多次創建,占用內存。
構造函數的顯示原型和隱式原型
在JavaScript中,顯示原型和隱式原型是理解原型鏈的關鍵概念。顯示原型是指構造函數的prototype屬性,而隱式原型是指對象的__proto__屬性。
顯示原型(prototype):每個函數都有一個prototype屬性,這個屬性指向一個對象,這個對象稱為原型對象。原型對象上有一個constructor屬性,指向構造函數本身。例如:
function Person(name) {
this.name = name;
}
console.log(Person.prototype); // 輸出:Person {}
console.log(Person.prototype.constructor === Person); // 輸出:true
在這個例子中,Person函數的prototype屬性指向一個空對象,這個對象的constructor屬性指向Person函數。
隱式原型(proto):每個對象都有一個__proto__屬性,這個屬性指向創建該對象的構造函數的prototype屬性。例如:
var person1 = new Person('Tom');
console.log(person1.__proto__); // 輸出:Person {}
console.log(person1.__proto__ === Person.prototype); // 輸出:true
在這個例子中,person1對象的__proto__屬性指向Person函數的prototype屬性。
顯示原型和隱式原型的關系
顯示原型和隱式原型之間的關系可以通過以下代碼示例來理解:
function Person(name) {
this.name = name;
}
var person1 = new Person('Tom');
console.log(person1.__proto__ === Person.prototype); // 輸出:true
console.log(Person.prototype.__proto__ === Object.prototype); // 輸出:true
console.log(Object.prototype.__proto__ === null); // 輸出:true
在這個例子中,person1對象的__proto__屬性指向Person函數的prototype屬性,而Person函數的prototype屬性的__proto__屬性指向Object函數的prototype屬性。
原型對象
什么是原型對象:JavaScript規定,每一個構造函數都有一個prototype屬性,指向另一個對象,所以我們也稱為原型對象
作用:原型對象可以掛載函數,對象實例化不會多次創建原型對象里面的函數,節約內存。
原型鏈
當訪問一個對象的某個屬性或者方法時,會現在這個對象本身屬性上找,如果沒有找到,那么這個對象的__proto__屬性就會去構造函數的 原型對象(prototype)上找,如果還沒有找到就會再在構造函數的原型對象上找,這樣一層一層的向上找,就會形成一個鏈式結構,也稱為原型鏈。
小結:
①當訪問一個對象成員(屬性/方法)時,首先查找這個對象自身有沒有該成員(屬性/方法)
②如果沒有就查找它的原型對象(也就是_proto_指向的prototype原型對象)
③如果還沒有就查找原型對象的原型對象(Object的原型對象)
④依此類推一直找到Object為止( null )
⑤原型鏈就在于為對象成員查找機制提供一個方向,或者說一條路線。
以上部分內容節選自原文鏈接:https://blog.csdn.net/qq_52902590/article/details/132078639
組件與Vue的內置關系
1.VueComponent.prototype.____proto__ === Vue.prototype
2.為什么要有這個關系:讓組件實例對象(vc)可以訪問到Vue原型上的屬性、方法。