實例詳解JavaScript建構函數和原型

這篇文章為大家帶來了關於JavaScript的相關知識，其中主要介紹了關於構造函數和原型的相關問題，以及prototype相關內容，下面一起來看一下，希望對大家有幫助。

【相關推薦：JavaScript影片教學、web前端】

##1.建構子與原型

1.1使用prototype解決記憶體浪費的問題

缺點：存在記憶體浪費的問題，

如果有兩個物件或更多就會對一個複雜資料型別進行空間的多次開闢

建構函式原型

prototype原型物件主要解決了記憶體浪費的問題建構函式透過原型分配的函式是所有物件所 共享的。在JavaScript裡每一個建構函數都有一個 prototype屬性，指向另一個物件。這個prototype就是一個對象，prototype這個對象的所有屬性和方法，都會被建構函數所擁有。這時候就可以使用prototype把方法放到裡面供該物件所有的實例物件使用。

 

物件原型

_ proto_ 物件

物件都會有一個屬性

_ proto_ 指向建構子的prototype原型物件,之所以我們物件可以使用建構子prototype原型物件的屬性和方法,就是因為物件有_ proto_ 原型的存在。

 sy的_ proto_ 和sym的_ proto_ 是相同的方法的查找規則:首先先看sy，sym物件身上是否有sing 方法，如果有就執行這個物件上的sing ，因為存在_ _ proto _ _，就去構造函數原型物件Prototype的存在，就去構造函數原型物件Prototype身上去查找sing這個方法（

簡單來說就是，我自己有就使用，沒有就去原型物件裡找）函數和物件建立時會自動建立一個屬性他兩指向同一個空物件

 

1.2constructor建構子建構器建構子

物件原型(_

proto _) 與建構子( prototype )原型物件裡面都有一個屬性constructor屬性, constructor我們稱為建構子,因為它指回建構子本身。

 

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

#

2.原型鏈

2.1js中成員查找規則

當存取一個物件的屬性(包括方法)時,首先查找這個物件本身有沒有該屬性。如果沒有就查找它的原型(也就是._ proto _指向的prototype原型物件)。如果還沒就去找原型物件的原型( Object的原型物件)。依此類推一直找到Object為止( null )。

2.2原型物件this指向

1.在建構子中，裡面this指向的是物件實例shanyu

<script>
        function Person(uname, uage) {
            this.uname = uname;
            this.uage = uage;
        }
        // 声明一个变量然后验证this指向是不是和实例化对象相同
        var that;
        Person.prototype.skill = function () {
            console.log(&#39;我会吃饭&#39;);
            that = this;
        }
        var shanyu = new Person(&#39;山鱼&#39;, 30);
        shanyu.skill();
        console.log(that === shanyu);
    </script>

2.3擴充內建物件

可以透過原型物件,對原來的內建物件進行擴充自訂的方法.

 <script>
        //  自定义对象应用，给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>

陣列和字串內建物件不能給原型物件覆寫操作Array.prototype = {} 如果進行該操作就會使本來有的方法被覆寫,只能是Array.prototype.方法名= function(){} 的方式。

3.call作用

呼叫這個函數,並且修改函數運行時的this指向，有三個參數分別是thisArg  目前呼叫函數this的指向物件arg1 , arg2 傳遞的其他參數

    <script>
        function sing(x,y) {
            console.log("a~a~给我已被忘情水");
            console.log(this);
            console.log(x+y);
        }
        var fn = {
            name: &#39;山鱼&#39;
        }
        // call()可以改变这个函数的this指向此时这个函数的this就指向了o这个对象
        sing.call(fn,1,2)
    </script>

4.繼承

#透過我們打的可以看到this的指向為Son，也就是Son使用了父建構子裡面的，uname，uage

##4.1利用原型物件繼承

es6之前並沒有extends所以可以使用

建構子與模型物件結合的方式來進行繼承運算

 <script>
        function Father(uname, uage) {
            this.uname = uname;
            this.uage = uage;
        }
        Father.prototype.eat = function () {
            console.log("我爱吃鸡腿");
        }
        // 子构造函数
        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(&#39;我爱学习！！&#39;);
        }
        // 要向使用父亲原型对象里面的方法，可以实例化一下Father，然后
        // 这时候Son的this指向到了Father，所以我们要用constructor将this指回到Son
        var son = new Son(&#39;山鱼妹&#39;, 18, "游泳冠军！！！");
        // console.log(son.eat());
        console.log(son);
        console.log(Father.prototype);
    </script>

【相關推薦：

JavaScript影片教學、web前端】

以上是實例詳解JavaScript建構函數和原型的詳細內容。更多資訊請關注PHP中文網其他相關文章！