1. 程式人生 > >javascript中的_proto_、constructor和prototype詳解

javascript中的_proto_、constructor和prototype詳解

首先,在JavaScript中,任何物件都有一個proto屬性;任何方法都有prototype屬性,指向一個物件,稱為原型物件,這個物件有一個proto屬性,另外還有一個constructor屬性。

<script>
       function myFunc() {
       }
        var a=new myFunc();
        console.log(a);//a是一個物件
        console.log(myFunc.prototype);
    </script>

這裡寫圖片描述
接下來,看prototype的作用,先來看程式碼及結果,再做解釋

//例項1
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true
//例項2
function a(){alert(1)}
a.prototype.constructor;//function a(){alert(1)}

var b={x:1}
a.prototype=b;//改變原型物件的值

var c=new a();

c.x;//1

從例項1中可以看出,利用函式的prototype屬性可以新增物件例項所需要的屬性資訊,也就是說,給這個函式的prototype指標所指向的原型物件新增的方法和屬性可以被這個函式的例項所繼承(注:之所以成為函式的例項,是因為在JavaScript中,函式就是一個物件,當他通過new操作符呼叫的時候,就是一個建構函式,可以用來建立一個物件。所以此處也可以理解為物件的例項);從例項2中可以看出,prototype指標的值可以修改。當定義了一個建構函式之後,其原型物件預設只會取得constructor屬性,其他的方法和屬性都是從Object中繼承而來。在例項2中,改變函式a的原型物件之後,a的例項c便可以訪問到屬性x,因為此時函式a的原型物件變為b,然後通過物件屬性查詢的過程,c在其建構函式的原型物件中找到屬性x。
進一步理解原型物件(如下圖片來自《JavaScript高階程式設計》以例項1為例)
這裡寫圖片描述


這幅圖展示了Person建構函式,Person的原型物件和Person的兩個例項之間的關係。Person.prototype 指向了原型物件,而 Person.prototype.constructor 又指回了 Person。
原型物件中除了包含 constructor 屬性之外,還包括後來新增的其他屬性。 Person 的每個例項person1 和 person2 都包含一個內部屬性,該屬性僅僅指向了 Person.prototype。也就是說它們
與建構函式沒有直接的關係。此外,要格外注意的是,雖然這兩個例項都不包含屬性和方法,但可以訪問name,age,job屬性和sayName方法,這就是通過查詢物件屬性的過程實現的。
雖然可以通過這一過程訪問儲存在原型中的屬性和方法,但是卻不能通過物件例項重寫原型物件中的屬性值。如果我們在例項中添加了一個屬性,而該屬性與例項原型中的一個屬性同名,那我們就在例項中建立該屬性,該屬性將會遮蔽原型中的那個屬性。這就是為什麼同一物件的不同例項之間互不干擾的原因。當然,可以通過delete ObjectName.protetyName 的方式刪除例項中的某個屬性,而使該例項能夠重新訪問其建構函式原型物件中的同名屬性。

接下來,我們再來看proto屬性是什麼?先來看個例子:
例項3:

    var obj1={};
    console.log(obj1.__proto__===Object.prototype);

從例項3中可以看出proto屬性實際指向該物件的建構函式。再看下js中建立物件的三種方法:
例項4:

//1
var obj=new Object();
//2
var obj1={};
var obj2= Object.create(obj1);
//3
var obj={};

實際上,以上三種方法建立的物件都是通過new+建構函式,順便解釋下new一個物件的原理:首選建立一個空物件給變數obj,將obj的proto屬性指向Object()方法的prototype物件,然後執行Object.call(obj)來構建物件obj。
總結一下:js中申明的方法實際上就是一個物件,其建構函式就是它自己,我們可以向它的prototype物件中設定各種屬性和方法(即物件),而這些物件可以它的所有例項繼承,所有的例項都有一個proto屬性指向該建構函式。
現在,我們還要繼續探討proto屬性,有這樣一個概念:proto屬性的作用主要是用來確定當前物件的繼承者,在當前物件找不到指定的屬性和物件時,會去proto屬性指定的物件中尋找,之後依次類推直到找完所有繼承或找到要找的屬性為止。要解釋這句話先來看這個例子。
例項5:

var Dog = function(){};
Dog.prototype.belongto = 'animal';
var wangwang= new Dog();
console.log(wangwang.belongto); //animal

在例項5中,當wangwang物件訪問屬性belogto時,找不到這個屬性,於是去他的proto屬性指向的prototype物件中找,之前說過wangwang.proto=Dog.prototype,所以能輸出animal。其實這也就是js中原型鏈的概念,因為在js中沒有父類和子類的概念,也就沒有子類對父類屬性和方法的繼承, 因而js中的整合是通過原型鏈來整合的,每個函式都有prototype屬性,可以作為記憶體塊共享,在每個例項中共享資料。

相關推薦

javascript_proto_constructorprototype

首先,在JavaScript中,任何物件都有一個proto屬性;任何方法都有prototype屬性,指向一個物件,稱為原型物件,這個物件有一個proto屬性,另外還有一個constructor屬性。 <script> function

MySQLtinytexttextmediumtextlongtext

空值 bin fcc val name 分辨 單選 objects 1.7 一、數字類型 類型 範圍 說明 Char(N) [ binary] N=1~255 個字元binary :分辨大小寫 固定長度 std_name cahr(32) not

touch事件的touchestargetToucheschangedTouches

move htm nal 手指 tde hang 參數 eve function touches:當前屏幕上所有觸摸點的列表; targetTouches:當前對象上所有觸摸點的列表; changedTouches:涉及當前(引發)事件的觸摸點的列表: 可通過一個例子來區分

JavascriptNaNnullundefinded的區別

得出 ber 引用 blog log 數據類型 pre 定義 false var a1; var a2 = true; var a3 = 1; var a4 = "Hello"; var a5 = new Object(); var a6 = null; var a7 =

javascriptapplycallbind的區別

在JS中,這三者都是用來改變函式的this物件的指向的,他們有什麼樣的區別呢。在說區別之前還是先總結一下三者的相似之處: 都是用來改變函式的this物件的指向的。 第一個引數都是this要指向的物件。 都可以利用後續引數傳參。 區別在哪裡的,先看一個例子 var xw

JavaScriptbreakcontinuereturn區別例項

在 JavaScript中break,continue和return 這三個關鍵字, 都有停止迴圈的功能,return 還有另外一個功能,就是函式返回語句,但是返回的同時也將函式停止。 下面介紹3個關鍵字在停止for迴圈中的區別: 1、break的用法 得到的結果是: 2、continue的用法

Javascript nullNaNundefined的區別總結

js中的資料型別有undefined,boolean,number,string,object等5種,前4種為原始型別,第5種為引用型別,接下來與大家分享下它們之間的區別 1.型別分析:  js中的資料型別有undefined,boolean,number,strin

Javascriptcallapplybind的區別以及原始碼解析

我們知道在javascript中call和apply以及bind都可以改變this指向,那麼它們是怎麼實現的呢?彼此之間有什麼區別呢?首先我們先來分別解析一下它們: (一)call 首先我們先來看一下如何使用call: var valu

javascript密封凍結防止物件擴充套件

在現代的JavaScript中,物件是不可分割的,對物件周圍的主題有很強的理解是編寫更好的JavaScript所必需的。您可以用JavaScript以四種方式建立物件。 一旦知道如何建立物件,您可能希望瞭解物件屬性描述符。綜上所述,假設您有一個物件——cat: var cat = {

JavaScriptconstvarlet區別淺析

在JavaScript中有三種宣告變數的方式:var、let、const。下文給大家介紹js中三種定義變數的方式const, var, let的區別。 1.const定義的變數不可以修改,而且必須初始化。 ? 1 2 3 4 5 const

Opencv RotatedRect類的pointsanglewidthheight

在Opencv中的影象處理中,經常要用到minAreaRect()函式求最小外接矩形, 該函式的返回值就是一個RotatedRect類物件。 RotatedRect類定義如下: class CV_EXPORTS RotatedRect { public: //! various

javascript技術難點(三)之thisnewapplycall

4)    this、new、call和apply的相關問題   講解this指標的原理是個很複雜的問題,如果我們從javascript裡this的實現機制來說明this,很多朋友可能會越來越糊塗,因此本篇打算換一個思路從應用的角度來講解this指標,從這個角度理解this

淺析JavaScriptbreakcontinuereturn的區別

轉載自:https://www.jb51.net/article/98636.htm這篇文章主要介紹了JavaScript中break、continue和return的區別,非常不錯,具有參考借鑑價值,需要的朋友可以參考下breakfunction myBreak() {fo

面試官:能解釋一下javascriptbindapplycall這三個函式的用法嗎

一.前言     不知道大家還記不記得前一篇文章:《面試官:能解釋一下javascript中的this嗎》   那今天這篇文章雖然是介紹javascript中bind、apply和call函式,但是多少也和this有點關聯。   假如在前面那場面試末尾,面試官不依不饒繼續問你javascr

Redis系列--7RedisTemplate Serializer

redistemplate serializer詳解<bean id="redisTemplate" class="org.springframework.data.redis.core.StringRedisTemplate"> <property name="connectionF

JavaScriptSetInterval與setTimeout的用法

sta 對象 show thead ansi out 計時 顯示 設計 在寫H5遊戲時經常需要使用定時刷新頁面實現動畫效果,比較常用即setTimeout()以及setInterval(),但是大家對SetInterval與setTimeout的用法了解嗎,下面通過

JavaList,SetMap及其區別

內部 特殊 set contain 快速查找 簡單 rar dset 維護 Java中的集合包括三大類,它們是Set(集)、List(列表)和Map(映射),它們都處於java.util包中,Set、List和Map都是接口,它們有各自的實現類。Set的實現類主要有Hash

UARTSPII2C

運算 引入 下拉 初始 故障 服務 布線 發的 理由 做單片機開發時UART,SPI和I2C都是我們最經常使用到的硬件接口,我收集了相關的具體材料對這三種接口進行了詳細的解釋。 UART UART是一種通用串行數據總線,用於異步通信。該總線雙向通信,可以實現全雙工傳輸和接收

Android 自定義view(1) --- AttrStyleTheme

轉載:https://www.jianshu.com/p/dd79220b47dd 概念說明:       Attr:屬性,風格樣式的最小單元;      Style:風格,它是一系列Attr的集合用以定義一個View

本地儲存(一)—— CookieSessionStorageLocalStorage

目錄 1. Cookie 2. Web Storage 2.1 Session Storage 2.2 Local Storage 2.3 Web Storage 的瀏覽器支援情況 3. Cookie、SessionStorage和LocalStorage的對比