參考文獻
站在用戶的角度思考問題,與客戶深入溝通,找到常德網站設計與常德網站推廣的解決方案,憑借多年的經驗,讓設計與互聯(lián)網技術結合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:做網站、成都網站制作、企業(yè)官網、英文網站、手機端網站、網站推廣、空間域名、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋常德地區(qū)。
JavaScript原型與繼承的秘密
__proto__
除null和undefined,JS中的所有數據類型都有這個屬性; 它表示當我們訪問一個對象的某個屬性時,如果該對象自身不存在該屬性, 就從它的__proto__屬性上繼續(xù)查找,以此類推,直到找到,若找到最后還是沒有找到,則結果為undefined
我們把一個對象的__proto__屬性所指向的對象叫該對象的原型;我們可以修改一個對象的原型來讓這個對象擁有某種屬性或某個方法
// 修改一個Number類型的值的原型 const num = 1; num.__proto__.name = "My name is 1"; console.log(num.name); // My name is 1 // 修改一個對象的原型 const obj = {}; obj.__proto__.name = "dreamapple"; console.log(obj.name); // dreamapple
需注意的是,__proto__屬性雖多數瀏覽器支持,但其實它僅在ECMAScript 2015規(guī)范中才被準確定義, 目的是為了給這個傳統(tǒng)的功能定制一個標準,以確保瀏覽器間的兼容性。通過使用__proto__屬性來修改一個對象的原型非常慢且影響性能。 所以,若想獲取一個對象的原型,推薦用Object.getPrototypeOf 或Reflect.getPrototypeOf,設置一個對象的原型推薦用Object.setPrototypeOf或Reflect.setPrototypeOf
prototype
首先要記住的是,該屬性一般只存在于函數對象上; 只要是能作為構造器的函數,都包含這個屬性。即只要這個函數能通過new生成一個新對象, 那么這個函數肯定具有prototype屬性。因為我們自定義的函數都可通過new生成一個對象,所以我們自定義的函數都有prototype 這個屬性
// 函數字面量 console.log((function(){}).prototype); // {constructor: ƒ} // Date構造器 console.log(Date.prototype); // {constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, …} // Math.abs 不是構造器,不能通過new操作符生成一個新的對象,所以不含有prototype屬性 console.log(Math.abs.prototype); // undefined
prototype屬性有什么作用呢?作用就是:函數通過new生成的一個對象, 這個對象的原型(__proto__)指向該函數的prototype屬性:
// 其中F表示一個自定義的函數或者是含有prototype屬性的內置函數 new F().__proto__ === F.prototype // true // 通過函數字面量定義的函數的__proto__屬性都指向Function.prototype (function(){}).__proto__ === Function.prototype // true // 通過對象字面量定義的對象的__proto__屬性都是指向Object.prototype ({}).__proto__ === Object.prototype // true // Object函數的原型的__proto__屬性指向null Object.prototype.__proto__ === null // true // 因為Function本身也是一個函數,所以Function函數的__proto__屬性指向它自身的prototype Function.__proto__ === Function.prototype // true // 因為Function的prototype是一個對象,所以Function.prototype的__proto__屬性指向Object.prototype Function.prototype.__proto__ === Object.prototype // true
constructor
constructor表示一個對象的構造函數,除null和undefined,JS中的所有數據類型都有這個屬性; 我們可通過下面的代碼來驗證一下:
null.constructor // Uncaught TypeError: Cannot read property 'constructor' of null ... undefined.constructor // Uncaught TypeError: Cannot read property 'constructor' of undefined ... (true).constructor // ƒ Boolean() { [native code] } (1).constructor // ƒ Number() { [native code] } "hello".constructor // ƒ String() { [native code] }
一個對象的constructor屬性確切地說并不是存在這個對象上面的; 而是存在這個對象的原型上(如果是多級繼承需手動修改原型的constructor屬性),我們可用下面的代碼來解釋一下:
const F = function() {}; // 當我們定義一個函數的時候,這個函數的prototype屬性上面的constructor屬性指向自己本身 F.prototype.constructor === F; // true
對JS的原始類型(string, number, boolean, null, undefined, symbol (new in ECMAScript 2015)),它們的constructor屬性是只讀的,不可修改:
(1).constructor = "something"; console.log((1).constructor); // 輸出 ƒ Number() { [native code] }
如果真想改這些原始類型的constructor屬性,也不是不可以:
Number.prototype.constructor = "number constructor"; (1).constructor = 1; console.log((1).constructor); // 輸出 number constructor
當然上面的方式不推薦
以上所述是小編給大家介紹的JS原型和繼承詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網站的支持!