㈠ 一文讀懂js中的原型鏈以及new操作符
理解javaScript中的原型鏈以及new操作符是編程領域的一大挑戰,尤其對初學者來說,這一概念常常顯得晦澀難懂。然而,通過深入探討JavaScript設計原型鏈的初衷,我們可以更直觀地理解這一機制。
原型鏈的建立並非僅僅是為了實現對象的繼承,它更是一個關於資源管理與代碼復用的設計策略。在游戲開發領域,例如英雄聯盟LOL,我們可以通過JavaScript模擬英雄的屬性與技能。一個單一的英雄對象可能會有特定的生命值、技能和屬性,但若要創建多個相同的英雄,傳統的復制方法會導致內存空間的浪費。
因此,通過改進代碼設計,我們可以在每個英雄對象上共享公共屬性,而將專屬屬性(如生命值)獨立管理。這樣不僅節省了內存資源,而且保持了代碼的清晰與高效。這是原型鏈設計的核心理念。
而new操作符的存在,正是為了簡化這一過程,使得開發者無需詳細理解原型鏈的底層機制,也能輕松創建出擁有共享屬性的對象實例。new操作符實際上通過四個步驟,即構造函數的調用、原型鏈的鏈接、實例屬性的初始化以及返回新創建的對象,實現了對象的實例化。
原型鏈的概念可以形象地理解為一個「尋祖」過程,類似於孫悟空與六耳獼猴共享菩提老祖的技能。在JavaScript中,原型鏈連接了對象與它的構造函數,進而連接到構造函數的原型對象,直至最終的null。這不僅是一種內存優化的方法,也是JavaScript獨特的哲學思想體現,即在萬物之初的空無之中尋找聯系與繼承。
綜上所述,原型與原型鏈是JavaScript實現繼承的基石,它們不僅節省了內存資源,也是語言設計中一種深思熟慮的資源管理策略。掌握這一概念,對於理解JavaScript的繼承機制、優化代碼性能以及深入理解JavaScript的內核機制都具有重要意義。
㈡ 一文讀懂js中的原型鏈以及new操作符
JavaScript中的原型鏈旨在解決對象共享屬性與方法的問題以優化內存使用,而new操作符則簡化了對象創建、原型鏈接、this綁定及返回新對象的過程。
原型鏈: 設計目的:原型鏈的設計是為了讓多個對象可以共享相同的屬性和方法,從而減少內存消耗。這類似於在英雄聯盟LOL中,通過共享英雄定義來避免每個英雄實例都重復相同的代碼。 工作原理:當一個對象需要訪問某個屬性或方法時,如果它自身沒有這個屬性或方法,就會沿著原型鏈向上查找,直到找到為止。如果原型鏈的盡頭也沒有找到,則返回undefined。 盡頭設置:原型鏈的盡頭設置為null,這體現了JavaScript的哲學思想,類似於宇宙大爆炸前的混沌狀態,表示沒有更多的原型可以查找。
new操作符: 功能:new操作符用於創建一個用戶定義的對象類型的實例或具有構造函數的內置對象類型的實例。 執行步驟: 1. 創建新對象:首先創建一個空對象。 2. 鏈接原型:將這個空對象的原型鏈接到構造函數的prototype屬性所指向的對象。 3. 綁定this:執行構造函數中的代碼,此時的this指向新創建的對象。 4. 返回新對象:如果構造函數中沒有顯式返回對象,則默認返回新創建的對象。
總結:理解JavaScript中的原型鏈和new操作符,關鍵在於它們為優化內存使用和簡化對象創建流程而設計的原理與機制。原型鏈通過共享屬性和方法來減少內存消耗,而new操作符則通過四個步驟簡化了對象的創建過程。深入理解這些特性,有助於更好地掌握JavaScript語言的底層邏輯,並高效地使用這些特性。
㈢ JS中new()實現了哪些功能
這次給大家帶來JS中new()實現了哪些功能,使用JS中new()的注意事項有哪些,下面就是實戰案例,一起來看一下。
前言
和其他高級語言一樣 javascript 中也有 new 運算符,我們知道 new 運算符是用來實例化一個類,從而在內存中分配一個實例對象。 但在 javascript 中,萬物皆對象,為什麼還要通過 new 來產生對象? 本文將帶你一起來探索 javascript 中 new 的奧秘...
要創建 Person 的新實例,必須使用 new 操作符。
以這種方式調用構造函數實際上會經歷以下 4個步驟:
(1) 創建一個新對象;
(2) 將構造函數的作用域賦給新對象(因此 this 就指向了這個新對象) ;
(3) 執行構造函數中的代碼(為這個新對象添加屬性) ;
(4) 返回新對象。
new 操作符
在有上面的基礎概念的介紹之後,在加上new操作符,我們就能完成傳統面向對象的class + new的方式創建對象,在JavaScript中,我們將這類方式成為Pseudoclassical。
基於上面的例子,我們執行如下代碼
var obj = new Base();這樣代碼的結果是什麼,我們在Javascript引擎中看到的對象模型是:
new操作符具體幹了什麼呢?其實很簡單,就幹了三件事情。
var obj = {};
obj.proto = Base.prototype;
Base.call(obj);第一行,我們創建了一個空對象obj
第二行,我們將這個空對象的proto成員指向了Base函數對象prototype成員對象
第三行,我們將Base函數對象的this指針替換成obj,然後再調用Base函數,於是我們就給obj對象賦值了一個id成員變數,這個成員變數的值是」base」,關於call函數的用法。
如果我們給Base.prototype的對象添加一些函數會有什麼效果呢?
例如代碼如下:
Base.prototype.toString = function() {
return this.id;
}那麼當我們使用new創建一個新對象的時候,根據proto的特性,toString這個方法也可以做新對象的方法被訪問到。於是我們看到了:
構造子中,我們來設置『類'的成員變數(例如:例子中的id),構造子對象prototype中我們來設置『類'的公共方法。於是通過函數對象和Javascript特有的proto與prototype成員及new操作符,模擬出類和類實例化的效果。
相信看了本文案例你已經掌握了方法,更多精彩請關注Gxl網其它相關文章!
推薦閱讀:
vue父組件調用子組件有哪些方法
vue全局組件與局部組件使用案例分析詳解
㈣ js中new 一個對象發生了什麼
最近在面試的時候,都會被問到在js中,new 一個實例的過程,
比如 :
定義了一個函數Person,裡面有三個屬性:name,age,sex;當var lisi = new Person() 的時候發生了以下4件事:
1. var obj= {} ,創建了一個空對象 obj{}, 也就是開辟了一塊內存地址,新建了一個對象實例(我是這樣認為的,如果有不對的歡迎指出);
2. obj.__proto__ = Person.prototype ; 將 lisi 這個空對象的 __proto__ 指向 Person 的 prototype ,也就是設置原型鏈;
3. var result = Person.call(obj) ,改變this的指向,讓this指向 obj 對象 ;
4。判斷Person的返回值類型,如果是引用類型,則返回這個引用類型的對象,如果是普通值類型,就返回obj;
現在來看看列印出的內容:
可以看出lisi這個實例對象的構造函數是Person。