1. 程式人生 > 程式設計 >JavaScript建構函式原理及實現流程解析

JavaScript建構函式原理及實現流程解析

在學習建構函式之前我們需要知道我們學習建構函式需要學習什麼:

1.什麼是建構函式

2.建構函式用來做什麼

3.建構函式的執行過程

4.建構函式的返回值

1.所以首先我們需要知道什麼是建構函式:

在我看來,建構函式具有兩個特點可以判斷是否為建構函式:

1.當函式名為首字母大寫時,這個是一個可以大概判斷建構函式與普通函式的一個特點,但是不是絕對正確,因為普通函式也可以是大寫字母開頭

2.當我們需要呼叫建構函式時我們需要new <建構函式>,也就是產生一個例項化物件。

function Student(name,age,sex,height){
      this.name=name;
      this.age=age;
      this.sex=sex;
      this.height=height;
    }
    //呼叫建構函式,也就是例項化一個物件。
    var p=new Student('luke',23,'nan',180)
    console.log(p);

控制檯輸出:

JavaScript建構函式原理及實現流程解析

可以看出輸出的是一個物件

2.建構函式是用來做什麼的:

1.當我們平時建立物件時可能會用如下建立物件的方式來建立,上程式碼:

//用建立物件方式來建立
     var stu1={name:'zs',age:20,sex:"male",height:186};
     var stu2={name:'ls',age:21,height:180}
     var stu3={name:'ww',age:22,sex:"female",height:156}
     var stu4={name:'jx',age:23,height:165}
     var stu5={name:'xf',age:24,height:180}

2.當我們用建構函式來建立這個物件時:

//用建構函式來建立物件
    function Student(name,height){
      this.name=name;
      this.age=age;
      this.sex=sex;
      this.height=height;
    }
     var stu1=new Student('zs',20,"male",186);
     var stu2=new Student('ls',21,180);
     var stu3=new Student('ww',22,"female",156);
     var stu4=new Student('jx',165);
     var stu5=new Student('xf',24,180);

這樣看起來是不是要簡潔的多呢,這裡因為只有五個人,要是五六十個就會看出明顯效果

3.建構函式的執行過程

在前面我們知道了建構函式是什麼,和其作用,也通過程式碼來看出了建構函式的作用。那我現在我們需要知道建構函式的執行過程,因為學習一個東西我們需要學習其原理,而不是其表面

所以接下來我就來講一講建構函式的執行過程:

在之前我們都知道,要呼叫建構函式我們需要在其前面加一個new關鍵字,所以主要就是new在其作用,在執行new關鍵字後,很明顯,他跟以往的函式呼叫就不同了,他會依次執行以下步驟:

1.new過後會產生一個空物件,作為一個返回的物件例項

2.將空物件的原型指向了建構函式的prototype屬性

3.將空物件的值賦值給建構函式裡面的this值

4.開始執行建構函式裡的程式碼

4.建構函式的返回值

知道了其執行過程,顯而易見,new關鍵字建立的例項物件為建構函式的返回值。

其實這是不對的,哈哈。

返回值需要分情況來定:

1.當函式中沒有return來返回值的時候,會返回this,也就是例項化物件。就像在說2.建構函式有什麼作用時說的一樣

2.當函式中return中返回一個複雜型別資料的時候,建構函式會返回這個複雜型別資料,上程式碼:

function Student(name,height){
      this.name=name;
      this.age=age;
      this.sex=sex;
      this.height=height;
      return {name:'fanhui',weight:60}
    }
     var Stu1=new Student('zs',186);
     console.log(Stu1);

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。