一、構(gòu)造函數(shù)和原型

1、構(gòu)造函數(shù)

構(gòu)造函數(shù)是一種特殊的函數(shù)，主要用來(lái)初始化對(duì)象，即為對(duì)象成員變量賦初始值，它總與 new 一起使用。我們可以把對(duì)象中一些公共的屬性和方法抽取出來(lái)，然后封裝到這個(gè)函數(shù)里面。
在 JS 中，

使用構(gòu)造函數(shù)時(shí)要注意以下兩點(diǎn)：

• 構(gòu)造函數(shù)用于創(chuàng)建某一類對(duì)象，其首字母要大寫(xiě)。
• 構(gòu)造函數(shù)要和new 一起使用才有意義。

new 在執(zhí)行時(shí)會(huì)做四件事情：

• 在內(nèi)存中創(chuàng)建一個(gè)新的空對(duì)象。
• 讓 this 指向這個(gè)新的對(duì)象。
• 執(zhí)行構(gòu)造函數(shù)里面的代碼，給這個(gè)新對(duì)象添加屬性和方法。
• 返回這個(gè)新對(duì)象（所以構(gòu)造函數(shù)里面不需要 return ）。

JavaScript 的構(gòu)造函數(shù)中可以添加一些成員，可以在構(gòu)造函數(shù)本身上添加，也可以在構(gòu)造函數(shù)內(nèi)部的 this 上添加。通過(guò)這兩種方式添加的成員，就分別稱為靜態(tài)成員和實(shí)例成員。
實(shí)例成員：在構(gòu)造函數(shù)內(nèi)部創(chuàng)建的對(duì)象成員稱為實(shí)例成員，只能由實(shí)例化的對(duì)象來(lái)訪問(wèn)。
靜態(tài)成員：在構(gòu)造函數(shù)本上添加的成員稱為靜態(tài)成員，只能由構(gòu)造函數(shù)本身來(lái)訪問(wèn) 。

例如：

 function A(uname,age){
            this.uname = uname;
            this.age  = age;
            this.say = function() {
                console.log(this.uname+'你好');
            }
        }
        var wh = new A('王歡',18);
        var xl = new A('小熊',18);

在上述代碼中，構(gòu)造函數(shù)中通過(guò)this添加的name,age,say方法都是實(shí)例成員。只能由實(shí)例化的對(duì)象來(lái)訪問(wèn)。在構(gòu)造函數(shù)本身上添加的成員叫靜態(tài)成員，

如：創(chuàng)建一個(gè)靜態(tài)成員。

A.sex='女';

2、構(gòu)造函數(shù)的問(wèn)題

構(gòu)造函數(shù)方法很好用，但是存在浪費(fèi)內(nèi)存的問(wèn)題

如下所示：

function Student(age,name){
            this.age = age;
            this.name = name;
            this.score = function(){
            console.log('孩子們成績(jī)都很好！');
        }
        }
        console.dir(Student);
        var xl = new Student(18,'小熊');
        var wh = new Student(17,'王歡');
        xl.score();
        wh.score();
       

通過(guò)下述代碼判斷兩次調(diào)用的方法是否地址相同。

 console.log(xl.score === wh.score);

打印結(jié)果為：

可知兩次調(diào)用A內(nèi)部的say函數(shù)，地址并不相同，是因?yàn)殚_(kāi)辟兩個(gè)內(nèi)存空間，導(dǎo)致浪費(fèi)內(nèi)存。

3、構(gòu)造函數(shù)原型 prototype

構(gòu)造函數(shù)通過(guò)原型分配的函數(shù)是所有對(duì)象所共享的。JavaScript 規(guī)定，每一個(gè)構(gòu)造函數(shù)都有一個(gè) prototype屬性，指向另一個(gè)對(duì)象。注意這個(gè) prototype 就是一個(gè)對(duì)象，這個(gè)對(duì)象的所有屬性和方法，都會(huì)被構(gòu)造函數(shù)所擁有。

如下所示，創(chuàng)建一個(gè)構(gòu)造函數(shù)：

function Student(age,name){
            this.age = age;
            this.name = name;
            this.score = function(){
                console.log('孩子們成績(jī)都很好！');
            }
        }
        console.dir(Student);

打印該構(gòu)造函數(shù)里面所有的方法，可知：

可以找到 prototype 對(duì)象。
可以把那些不變的方法，直接定義在prototype對(duì)象上，這樣所有對(duì)象的實(shí)例就可以共享這些方法。

function Student(age,name){
            this.age = age;
            this.name = name;
        }
        Student.prototype.score = function(){
            console.log('孩子們成績(jī)都很好！');
        }
        console.dir(Student);
        var xl = new Student(18,'小熊');
        var wh = new Student(17,'王歡');
        xl.score();
        wh.score();
        console.log(xl.score === wh.score);

打印結(jié)果為：

并且兩次調(diào)用函數(shù)只開(kāi)辟了一個(gè)內(nèi)存空間，也減少了內(nèi)存的浪費(fèi)。

注意：一般情況下，公共屬性定義到構(gòu)造函數(shù)里面，公共方法定義到原型對(duì)象身上。

4、對(duì)象原型 __proto__

對(duì)象都會(huì)有一個(gè)屬性__proto__ 指向構(gòu)造函數(shù)的 prototype 原型對(duì)象，之所以我們對(duì)象可以使用構(gòu)造函數(shù)prototype原型對(duì)象的屬性和方法，就是因?yàn)閷?duì)象有 __proto__原型的存在。

如下所示：

function Student(age,name){
            this.age = age;
            this.name = name;
           
        }
 Student.prototype.score = function(){
     console.log('孩子們成績(jī)都很好！');
 }
// console.dir(Student);
 var xl = new Student(18,'小熊');
 var wh = new Student(17,'王歡');
 console.log(xl);

通過(guò)以下代碼名看其是否具有__proto__對(duì)象原型

console.log(xl);//對(duì)象身上系統(tǒng)自己添加一個(gè)__proto__屬性指向構(gòu)造函數(shù)的原型對(duì)象

輸出結(jié)果為：

可知存在。
在上述例子中輸入下述代碼判斷__proto__對(duì)象原型和原型對(duì)象prototype是否等價(jià)。

 console.log(xl.__proto__ === Student.prototype);

打印結(jié)果為：true
故： __proto__對(duì)象原型和原型對(duì)象prototype是等價(jià)的

通過(guò)實(shí)例對(duì)象調(diào)用score函數(shù)，如下所示：

xl.score();

輸出結(jié)果為：

可以調(diào)用，其方法查找規(guī)則是：首先看看xl對(duì)象身上是否有score方法，如果有，則執(zhí)行這個(gè)對(duì)象上的score，如果沒(méi)有該方法，因?yàn)橛?code>__prooto__屬性的存在，就去構(gòu)造函數(shù)原型對(duì)象 prototype身上去查找。

可用下圖描述：

__proto__對(duì)象原型的意義就在于為對(duì)象的查找機(jī)制提供一個(gè)方向，或者說(shuō)一條路線，但是它是一個(gè)非標(biāo)準(zhǔn)屬性，因此實(shí)際開(kāi)發(fā)中，不可以使用這個(gè)屬性，它只是內(nèi)部指向原型對(duì)象 prototype

5、constructor 構(gòu)造函數(shù)

根據(jù)前面的例子，分別打印實(shí)例對(duì)象（Student）的對(duì)象原型（ __proto__）和構(gòu)造函數(shù)(xl)（prototype）原型對(duì)象

console.log(Student.prototype);
console.log(xl.__proto__);

打印結(jié)果為：

 可知：對(duì)象原型（ __proto__）和構(gòu)造函數(shù)（prototype）原型對(duì)象里面都有一個(gè)屬性 constructor 屬性 ，constructor我們稱為構(gòu)造函數(shù)，因?yàn)樗富貥?gòu)造函數(shù)本身。

再分別打印對(duì)象原型和構(gòu)造函數(shù)原型的constroctor屬性。觀察其返回值。

 console.log(Student.prototype.constructor);
 console.log(xl.__proto__.constructor);

打印結(jié)果為：

可知他們均指向Student構(gòu)造函數(shù)。
即constructor 主要用于記錄該對(duì)象引用于哪個(gè)構(gòu)造函數(shù)，它可以讓原型對(duì)象重新指向原來(lái)的構(gòu)造函數(shù)。

  一般情況下，對(duì)象的方法都在構(gòu)造函數(shù)的原型對(duì)象中設(shè)置。當(dāng)給構(gòu)造函數(shù)添加多個(gè)方法時(shí)，可以采用對(duì)象的方式，

如下所示：

 Student.prototype = {
            score: function(){
            console.log('孩子們成績(jī)都很好！')},
            study: function(){
            console.log('好好學(xué)習(xí)！');  
        }

當(dāng)打印修改后的原型對(duì)象的consructor屬性時(shí)：

        發(fā)現(xiàn)原型對(duì)象的指向發(fā)生變化，這是因?yàn)榻o原型對(duì)象采取對(duì)象形式賦值，這樣就會(huì)覆蓋構(gòu)造函數(shù)原型對(duì)象原來(lái)的內(nèi)容，這樣修改后的原型對(duì)象constructor 就不再指向當(dāng)前構(gòu)造函數(shù)了。
此時(shí)，我們可以在修改后的原型對(duì)象中，添加一個(gè) constructor指向原來(lái)的構(gòu)造函數(shù)。

如下：

Student.prototype = {
            constructor:Student,
            score: function(){
            console.log('孩子們成績(jī)都很好！')},
            study: function(){
            console.log('好好學(xué)習(xí)！');  
        }

最后，打印的結(jié)果為：

成功指回原構(gòu)造函數(shù)。

6、構(gòu)造函數(shù)、實(shí)例、原型對(duì)象三者之間的關(guān)系

根據(jù)上例：構(gòu)造函數(shù)、實(shí)例、原型對(duì)象三者之間的關(guān)系可用下圖描述：

7、JavaScript 的成員查找機(jī)制(規(guī)則)

• 當(dāng)訪問(wèn)一個(gè)對(duì)象的屬性（包括方法）時(shí)，首先查找這個(gè)對(duì)象自身有沒(méi)有該屬性。
• 如果沒(méi)有就查找它的原型（也就是 __proto__指向的 prototype原型對(duì)象）。
• 如果還沒(méi)有就查找原型對(duì)象的原型（Object的原型對(duì)象）。

依此類推一直找到 Object 為止（null）。
__proto__對(duì)象原型的意義就在于為對(duì)象成員查找機(jī)制提供一個(gè)方向，或者說(shuō)一條路線。

8、 擴(kuò)展內(nèi)置對(duì)象

可以通過(guò)原型對(duì)象，對(duì)原來(lái)的內(nèi)置對(duì)象進(jìn)行擴(kuò)展自定義的方法。
首先打印數(shù)組的原型對(duì)象，查看有哪些內(nèi)置對(duì)象。

 console.log(Array.prototype);

打印結(jié)果為：

例如現(xiàn)在給數(shù)組增加自定義求偶數(shù)和的功能。

 Array.prototype.sum = function(){
            var sum = 0;
            for(var i=0;i<this.length;i++){
                sum += this[i];
            }
            return sum;
        }

檢查內(nèi)置對(duì)象是否擴(kuò)展成功，再次輸入：

console.log(Array.prototype);

構(gòu)建成功，在給一個(gè)具體的實(shí)例對(duì)象，判斷是否可以正常使用：

var arr = [1,2,3];
        console.log(arr.sum());

打印結(jié)果為：

二、類的本質(zhì)

• class本質(zhì)還是function.
• 類的所有方法都定義在類的prototype屬性上
• 類創(chuàng)建的實(shí)例,里面也有__proto__ 指向類的prototype原型對(duì)象
• ES6的類它的絕大部分功能，ES5都可以做到，新的class寫(xiě)法只是讓對(duì)象原型的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已。

到此這篇關(guān)于JavaScript構(gòu)造函數(shù)與原型的文章就介紹到這了,更多相關(guān)JavaScript構(gòu)造函數(shù)、原型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論