構造函數

1:基本概念

提起構造函數,咱們須要從JS的建立對象開始,JS的建立對象有兩種方式,一種是對象字面量法(把一個對象的屬性和方法一一羅列出來),對象字面量法有一個明顯的不足在於它不適合批量的或者是構建大量的相似或者重複的對象,因爲這個限制也就有了另外一種建立方式,構造函數。函數

對象字面量this

const person = {
        name: 'Eric',
        age: 28,
        school: '俠課島',
        getName: function() {
            return this.name;
        },
        getAge: function() {
            return this.age;
        },
    };

構造函數prototype

function Person(name, age) {
        this.name = name || '';
        this.age = age || 0;
        school: '俠課島',
        this.getName = function() {
            return this.name;
        }
        this.getAge = function() {
            return this.age
        }
    }
    const Eric = new Person('Eric', 26);

什麼是構造函數? 構造函數是一個構建對象的函數,在建立對象時就初始化對象,爲對象成員變量賦予一個初始值,好比上面的person函數裏面若是沒有傳name和age進去,那麼默認的name的初始值就是空,age就是0。它老是與new運算符一塊兒使用在建立對象語句中,構造函數最主要的特色在於它方便建立多個對象的實例。設計

2:構造函數的特色

  • 首字母必須大寫(區分於普通函數)
  • 它的this是指向生成的實例對象
  • 構造函數須要使用new關鍵字來生成實例對象,若是不是要new關鍵字那麼構造函數就和普通函數沒有區別了

3:構造函數與普通函數的區別

  • 構造函數能夠當作普通函數使用,儘量避免把構造函數當成一個普通函數來使用,由於它不符合軟件設計的原則。
  • 構造函數內部會建立實例,使用new關鍵字和構造函數結合的時候,會返回一個對象。普通函數不會建立實例,僅僅返回的是return的值。
  • 構造函數內部的this指向實例自己,普通函數指向調用者(不包括箭頭函數)。普通函數好比一個函數調用另外一個函數,那麼在被調用函數內部它的this是指向調用者,若是直接去執行這個函數,那麼默認的這個調用者就是window。
    /* 構造函數 */
       function Person() {
           console.log('this', this);
       }
       const A = new Person();
       /* 普通函數 */
       function person() {
           console.log('this', this);
       }
       const B = person();

4:構造函數返回值(分三種狀況)

  • 無return(void),返回this(這個this指向的就是這個構造函數實例化的對象自己)
    function Student(name){
            this.name = name || '';
        }
  • return 基本數據類型,返回this
    function Teacher(name){
           this.name = name || '';
       }
       const Davy = new Teacher('Davy');
       concole.log(Davy);
  • return 對象,返回對象
    function Driver(name){
            this.name = name;
            return {
                name: 'xxx';
            };
        }
        const Micheal = new Driver('Micheal');
        console.log(Micheal);

5:構造函數的構建過程(總共分爲四步)

  • 建立一個空對象
    var obj = {};
  • 將空對象的proto指向構造函數對象的prototype,爲了方便對象的校驗和對象的繼承
    obj.__proto__ = constructorFunction.prototype;
  • 將構造函數的做用域賦給新對象自己
    var result = constructorFunction.call(obj);
  • 返回新對象,處理返回值,首先要判斷constructorFunction的執行結果是不是一個object,若是是,就會返回return(構造函數內部返回的值),若是不是,則直接返回新建立的值。
    typeof result === 'object' ? result : obj; 
       var obj  = {};  
       obj.__proto__ = constructorFunction.prototype;  
       constructorFunction.call(obj);  
       return obj;
相關文章
相關標籤/搜索