JavaScript構(gòu)造函數(shù)和原型使用實例分析

本文小編為大家詳細(xì)介紹“JavaScript構(gòu)造函數(shù)和原型使用實例分析”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JavaScript構(gòu)造函數(shù)和原型使用實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

1.構(gòu)造函數(shù)和原型

1.1使用prototype解決內(nèi)存浪費的問題

缺點：存在內(nèi)存浪費的問題，

如果有倆對象或者更多就會對一個復(fù)雜數(shù)據(jù)類型進行空間的多次開辟

構(gòu)造函數(shù)原型prototype原型對象主要解決了內(nèi)存浪費的問題構(gòu)造函數(shù)通過原型分配的函數(shù)是所有對象所共享的。在JavaScript里每一個構(gòu)造函數(shù)都有一個 prototype屬性，指向另一個對象。這個prototype就是一個對象，prototype這個對象的所有屬性和方法，都會被構(gòu)造函數(shù)所擁有。這時候就可以使用prototype把方法放到里面供該對象所有的實例對象使用。

對象原型_ proto_ 對象

對象都會有一個屬性_ proto_ 指向構(gòu)造函數(shù)的 prototype原型對象,之所以我們對象可以使用構(gòu)造函數(shù)prototype原型對象的屬性和方法,就是因為對象有_ proto_ 原型的存在。

sy的 _ proto_ 和sym的 _ proto_ 是一樣的方法的查找規(guī)則:首先先看sy，sym對象身上是否有sing 方法，如果有就執(zhí)行這個對象上的sing ，因為存在_ _ proto _ _，就去構(gòu)造函數(shù)原型對象Prototype的存在，就去構(gòu)造函數(shù)原型對象Prototype身上去查找sing這個方法（簡單來說就是，我自己有就使用，沒有就去原型對象里找）函數(shù) 和 對象創(chuàng)建時 會自動創(chuàng)建一個屬性 他兩指向同一個空對象

1.2constructor構(gòu)造函數(shù)構(gòu)造器構(gòu)造函數(shù)

對象原型(_ proto _) 和構(gòu)造函數(shù)( prototype )原型對象里面都有一個屬性constructor屬性, constructor我們稱為構(gòu)造函數(shù),因為它指回構(gòu)造函數(shù)本身。

他們倆里面都有constructor如果prototype里面以對象的形式添加，那么就是prototype指向變了，指向了一個新的原型對象，這個新對象里沒有指向construor，需要自己手動指向一下

2.原型鏈

2.1js中成員查找規(guī)則

當(dāng)訪問一個對象的屬性(包括方法)時,首先查找這個對象自身有沒有該屬性。 如果沒有就查找它的原型(也就是._ proto _指向的prototype原型對象)。 如果還沒有就查找原型對象的原型( Object的原型對象)。 依此類推一直找到Object為止( null )。

2.2原型對象this指向

1.在構(gòu)造函數(shù)中，里面this指向的是對象實例shanyu

<script>
        function Person(uname, uage) {
            this.uname = uname;
            this.uage = uage;
        }
        // 聲明一個變量然后驗證this指向是不是和實例化對象相同
        var that;
        Person.prototype.skill = function () {
            console.log('我會吃飯');
            that = this;
        }
        var shanyu = new Person('山魚', 30);
        shanyu.skill();
        console.log(that === shanyu);
    </script>

2.3擴展內(nèi)置對象

可以通過原型對象,對原來的內(nèi)置對象進行擴展自定義的方法.

 <script>
        //  自定義對象應(yīng)用，給Array添加一個自定義方法
        Array.prototype.sum = function () {
            var sum = 0;
            for (var i = 0; i < this.length; i++) {
                sum += this[i];
            }
            return sum;
        }
        var arr = [1, 2, 3, 4];
        console.log(arr.sum());
    </script>

數(shù)組和字符串內(nèi)置對象不能給原型對象覆蓋操作Array.prototype = {} 如果進行該操作就會使本來有的方法被覆蓋掉,只能是Array.prototype.方法名= function(){} 的方式。


3.call作用

調(diào)用這個函數(shù),并且修改函數(shù)運行時的this指向，有三個參數(shù)分別是thisArg  當(dāng)前調(diào)用函數(shù)this的指向?qū)ο?strong>arg1 , arg2 傳遞的其他參數(shù)

    <script>
        function sing(x,y) {
            console.log("a~a~給我已被忘情水");
            console.log(this);
            console.log(x+y);
        }
        var fn = {
            name: '山魚'
        }
        // call()可以改變這個函數(shù)的this指向此時這個函數(shù)的this就指向了o這個對象
        sing.call(fn,1,2)
    </script>

4.繼承

通過我們打的可以看到this的指向為Son，也就是Son使用了父構(gòu)造函數(shù)里面的，uname，uage

4.1利用原型對象繼承

es6之前并沒有extends所以可以使用構(gòu)造函數(shù)和模型對象結(jié)合的方式來進行繼承操作

 <script>
        function Father(uname, uage) {
            this.uname = uname;
            this.uage = uage;
        }
        Father.prototype.eat = function () {
            console.log("我愛吃雞腿");
        }
        // 子構(gòu)造函數(shù)
        Son.prototype = new Father();
        Son.prototype.constructor = Son;
        function Son(uname, uage, swing) {
            Father.call(this, uname, uage);
            this.swing = swing;
        }
        Son.prototype.student = function () {
            console.log('我愛學(xué)習(xí)??！');
        }
        // 要向使用父親原型對象里面的方法，可以實例化一下Father，然后
        // 這時候Son的this指向到了Father，所以我們要用constructor將this指回到Son
        var son = new Son('山魚妹', 18, "游泳冠軍?。?！");
        // console.log(son.eat());
        console.log(son);
        console.log(Father.prototype);
    </script>

讀到這里，這篇“JavaScript構(gòu)造函數(shù)和原型使用實例分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。