JavaScript中的構(gòu)造函數(shù)怎么使用

這篇文章主要介紹“JavaScript中的構(gòu)造函數(shù)怎么使用”，在日常操作中，相信很多人在JavaScript中的構(gòu)造函數(shù)怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”JavaScript中的構(gòu)造函數(shù)怎么使用”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),蘇仙企業(yè)網(wǎng)站建設(shè),蘇仙品牌網(wǎng)站建設(shè),網(wǎng)站定制,蘇仙網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,蘇仙網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

JavaScript中的構(gòu)造函數(shù)怎么使用

1、什么是構(gòu)造函數(shù)？

一個(gè)普通的函數(shù)被用于創(chuàng)建一個(gè)類對(duì)象時(shí)，它就被稱作構(gòu)造函數(shù)，或者構(gòu)造器。（為方便理解，你可以將JavaScript中構(gòu)造器的創(chuàng)建理解為其他語(yǔ)言中的類的創(chuàng)建，目的就是利用它通過new來實(shí)列一個(gè)對(duì)象）

function Person(){
//...
}
//當(dāng)做普通函數(shù)調(diào)用
var obj=Person();

//構(gòu)造函數(shù)調(diào)用
	 var obj=new Person();

構(gòu)造函數(shù)的特點(diǎn)：

  • 在書寫規(guī)范上，我們習(xí)慣將構(gòu)造函數(shù)名稱的首字母大寫。

  • 通過new來創(chuàng)建一個(gè)對(duì)象。

  • 無需在內(nèi)寫入return也會(huì)有返回值，而且返回的是一個(gè)對(duì)象。

利用構(gòu)造函數(shù)創(chuàng)建一個(gè)js對(duì)象

  • 構(gòu)造函數(shù)創(chuàng)建對(duì)象(方法寫在構(gòu)造函數(shù)里，缺點(diǎn):構(gòu)造函數(shù)每執(zhí)行一次， 就會(huì)創(chuàng)建一次方法。)

	  function Person(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
            // 方法寫在里面
            this.sayName=function(){
                 console.log(this.name);
             }      
          }
    
          function Dog(name,age){
              this.name=name;
              this.age=age;
          }
         
          var obj=new Person("張三",18,"男");
          var obj1=new Person("李四",16,"男");
          
          var dog=new Dog("樂樂",2);
          obj.sayName();
          obj1.sayName();
          
          console.log(obj);
          console.log(obj1);
          console.log(dog);

  • 構(gòu)造函數(shù)創(chuàng)建對(duì)象(方法寫在構(gòu)造函數(shù)外，缺點(diǎn): 方法為全局方法，污染全局。)

	   function Person(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
            this.sayName=fun;   //方法寫在外面
          }
    	 function fun(){
            console.log(this.name);
        }
          function Dog(name,age){
              this.name=name;
              this.age=age;
          }
          
          var obj=new Person("張三",18,"男");
          var obj1=new Person("李四",16,"男");
          
          var dog=new Dog("樂樂",2);
          obj.sayName();
          obj1.sayName();
          
          console.log(obj);
          console.log(obj1);
          console.log(dog);

  • 構(gòu)造函數(shù)創(chuàng)建對(duì)象改造(方法通過原型對(duì)象創(chuàng)建)

原型對(duì)象:prototype

我們所創(chuàng)建的每一個(gè)函數(shù)，解析器都會(huì)向函數(shù)中添加一個(gè)prototype屬性。

指向構(gòu)造函數(shù)的原型對(duì)象，我們可以通過__proto__來訪問該屬性。

構(gòu)造函數(shù).prototype.xxx ， xxx可以是變量，可以是方法。執(zhí)行過程中會(huì)先去對(duì)象中找方法或者變量， 找不到就會(huì)去原型里尋找。

	  function Person(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
          }
          function Dog(name,age){
              this.name=name;
              this.age=age;
          }
          
        /*為person添加統(tǒng)一的方法， 到原型對(duì)象中*/
        Person.prototype.sayName=function(){
            console.log(this.name);
        }
          var obj=new Person("張三",18,"男");
          var obj1=new Person("李四",16,"男");
          
          var dog=new Dog("樂樂",2);
          obj.sayName();
          obj1.sayName();
          
          console.log(obj);
          console.log(obj1);
          console.log(dog);

運(yùn)行結(jié)果：

JavaScript中的構(gòu)造函數(shù)怎么使用

2、為什么要使用構(gòu)造函數(shù)？

學(xué)習(xí)每一個(gè)概念，不僅要知道它是什么，還要知道為什么，以及解決什么樣的問題。

舉個(gè)例子，我們要錄入一年級(jí)一班中每一位同學(xué)的個(gè)人信息，那么我們可以創(chuàng)建一些對(duì)象，比如：

var p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
var p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
var p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
var p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };
// ...

像上面這樣，我們可以把每一位同學(xué)的信息當(dāng)做一個(gè)對(duì)象來處理。但是，我們會(huì)發(fā)現(xiàn)，我們重復(fù)地寫了很多無意義的代碼。比如 name、age、gender、hobby 。如果這個(gè)班上有60個(gè)學(xué)生，我們得重復(fù)寫60遍。

這個(gè)時(shí)候，構(gòu)造函數(shù)的優(yōu)勢(shì)就體現(xiàn)出來了。我們發(fā)現(xiàn)，雖然每位同學(xué)都有 name、gender、hobby這些屬性， 但它們都是不同的，那我們就把這些屬性當(dāng)做構(gòu)造函數(shù)的參數(shù)傳遞進(jìn)去。而由于都是一年級(jí)的學(xué)生，age 基本都是6歲，所以我們就可以寫死，遇到特殊情況再單獨(dú)做處理即可。此時(shí)，我們就可以創(chuàng)建以下的函數(shù)：

function Person(name, gender, hobby) {
    this.name = name;
    this.gender = gender;
    this.hobby = hobby;
    this.age = 6;
}

當(dāng)創(chuàng)建上面的函數(shù)以后， 我們就可以通過 new 關(guān)鍵字調(diào)用，也就是通過構(gòu)造函數(shù)來創(chuàng)建對(duì)象了。

var p1 = new Person('zs', '男', 'basketball');
var p2 = new Person('ls', '女', 'dancing');
var p3 = new Person('ww', '女', 'singing');
var p4 = new Person('zl', '男', 'football');
// ...

此時(shí)你會(huì)發(fā)現(xiàn)，創(chuàng)建對(duì)象會(huì)變得非常方便。所以，雖然封裝構(gòu)造函數(shù)的過程會(huì)比較麻煩，但一旦封裝成功，我們?cè)賱?chuàng)建對(duì)象就會(huì)變得非常輕松，這也是我們?yōu)槭裁匆褂脴?gòu)造函數(shù)的原因。

在使用對(duì)象字面量創(chuàng)建一系列同一類型的對(duì)象時(shí)，這些對(duì)象可能具有一些相似的特征(屬性)和行為(方法)，此時(shí)會(huì)產(chǎn)生很多重復(fù)的代碼，而使用構(gòu)造函數(shù)就可以實(shí)現(xiàn)代碼復(fù)用。

3、構(gòu)造函數(shù)的執(zhí)行過程

先說一點(diǎn)基本概念。

function Animal(color) {
 this.color = color;
}

當(dāng)一個(gè)函數(shù)創(chuàng)建好以后，我們并不知道它是不是構(gòu)造函數(shù)，即使像上面的例子一樣，函數(shù)名為大寫，我們也不能確定。只有當(dāng)一個(gè)函數(shù)以 new 關(guān)鍵字來調(diào)用的時(shí)候，我們才能說它是一個(gè)構(gòu)造函數(shù)。就像下面這樣：

var dog = new Animal("black");

以下我們只討論構(gòu)造函數(shù)的執(zhí)行過程，也就是以 new 關(guān)鍵字來調(diào)用的情況。

我們還是以上面的 Person 為例。

function Person(name, gender, hobby) {
 this.name = name;
 this.gender = gender;
 this.hobby = hobby;
 this.age = 6;
}

var p1 = new Person('zs', '男', 'basketball');

此時(shí)，構(gòu)造函數(shù)會(huì)有以下幾個(gè)執(zhí)行過程：

1）當(dāng)以 new 關(guān)鍵字調(diào)用時(shí)，會(huì)創(chuàng)建一個(gè)新的內(nèi)存空間，標(biāo)記為 Animal 的實(shí)例。

2）函數(shù)體內(nèi)部的 this 指向該內(nèi)存

通過以上兩步，我們就可以得出這樣的結(jié)論。

var p2 = new Person('ls', '女', 'dancing');  // 創(chuàng)建一個(gè)新的內(nèi)存 #f2
var p3 = new Person('ww', '女', 'singing');  // 創(chuàng)建一個(gè)新的內(nèi)存 #f3

每當(dāng)創(chuàng)建一個(gè)實(shí)例的時(shí)候，就會(huì)創(chuàng)建一個(gè)新的內(nèi)存空間(#f2, #f3)，創(chuàng)建 #f2 的時(shí)候，函數(shù)體內(nèi)部的 this 指向 #f2, 創(chuàng)建 #f3 的時(shí)候，函數(shù)體內(nèi)部的 this 指向 #f3。

3） 執(zhí)行函數(shù)體內(nèi)的代碼
通過上面的講解，你就可以知道，給 this 添加屬性，就相當(dāng)于給實(shí)例添加屬性。

4）默認(rèn)返回 this

由于函數(shù)體內(nèi)部的this指向新創(chuàng)建的內(nèi)存空間，默認(rèn)返回 this ，就相當(dāng)于默認(rèn)返回了該內(nèi)存空間，也就是上圖中的 #f1。此時(shí)，#f1的內(nèi)存空間被變量p1所接受。也就是說 p1 這個(gè)變量，保存的內(nèi)存地址就是 #f1，同時(shí)被標(biāo)記為 Person 的實(shí)例。

以上就是構(gòu)造函數(shù)的整個(gè)執(zhí)行過程。

4、構(gòu)造函數(shù)的返回值

構(gòu)造函數(shù)執(zhí)行過程的最后一步是默認(rèn)返回 this 。言外之意，構(gòu)造函數(shù)的返回值還有其它情況。下面我們就來聊聊關(guān)于構(gòu)造函數(shù)返回值的問題。

1）沒有手動(dòng)添加返回值，默認(rèn)返回 this

function Person1() {
 this.name = 'zhangsan';
}

var p1 = new Person1();

按照上面講的，我們復(fù)習(xí)一遍。首先，當(dāng)用 new 關(guān)鍵字調(diào)用時(shí)，產(chǎn)生一個(gè)新的內(nèi)存空間 #f11，并標(biāo)記為 Person1 的實(shí)例；接著，函數(shù)體內(nèi)部的 this 指向該內(nèi)存空間 #f11；執(zhí)行函數(shù)體內(nèi)部的代碼；由于函數(shù)體內(nèi)部的this 指向該內(nèi)存空間，而該內(nèi)存空間又被變量 p1 所接收，所以 p1 中就會(huì)有一個(gè) name 屬性，屬性值為 ‘zhangsan’。

p1: {
 name: 'zhangsan'
}

2）手動(dòng)添加一個(gè)基本數(shù)據(jù)類型的返回值，最終還是返回 this

function Person2() {
 this.age = 28;
 return 50;
}

var p2 = new Person2();
console.log(p2.age);   // 28
p2: {
 age: 28
}

如果上面是一個(gè)普通函數(shù)的調(diào)用，那么返回值就是 50。

3）手動(dòng)添加一個(gè)復(fù)雜數(shù)據(jù)類型(對(duì)象)的返回值，最終返回該對(duì)象

直接上例子

function Person3() {
 this.height = '180';
 return ['a', 'b', 'c'];
}

var p3 = new Person3();
console.log(p3.height);  // undefined
console.log(p3.length);  // 3
console.log(p3[0]);      // 'a'

再來一個(gè)例子

function Person4() {
  this.gender = '男';
  return { gender: '中性' };
}

var p4 = new Person4();
console.log(p4.gender);  // '中性'

5、構(gòu)造函數(shù)首字母必須大寫嗎？

大小寫都可以

6、不用new關(guān)鍵字，直接運(yùn)行構(gòu)造函數(shù)，是否會(huì)出錯(cuò)？

如果不會(huì)出錯(cuò)，那么，用new和不用new調(diào)用構(gòu)造函數(shù)，有什么區(qū)別？

1）使用new操作符調(diào)用函數(shù)

例子：

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = new Person('nicole');
person1.say(); // "I am nicole"

用new調(diào)用構(gòu)造函數(shù)，函數(shù)內(nèi)部會(huì)發(fā)生如下變化：

創(chuàng)建一個(gè)this變量，該變量指向一個(gè)空對(duì)象。并且該對(duì)象繼承函數(shù)的原型；
屬性和方法被加入到this引用的對(duì)象中；
隱式返回this對(duì)象（如果沒有顯性返回其他對(duì)象）
用偽程序來展示上述變化：

function Person(name){
  // 創(chuàng)建this變量，指向空對(duì)象
  var this = {}; 
  // 屬性和方法被加入到this引用的對(duì)象中
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  // 返回this對(duì)象
  return this;
}

可以看出，用new調(diào)用構(gòu)造函數(shù)，最大特點(diǎn)為，this對(duì)象指向構(gòu)造函數(shù)生成的對(duì)象，所以，person1.say()會(huì)返回字符串： “I am nicole”。

小貼士：如果指定了返回對(duì)象，那么，this對(duì)象可能被丟失。

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  var that = {};
  that.name = "It is that!";
  return that;
}

var person1 = new Person('nicole');
person1.name; // "It is that!"

2）直接調(diào)用函數(shù)

如果直接調(diào)用函數(shù)，那么，this對(duì)象指向window，并且，不會(huì)默認(rèn)返回任何對(duì)象（除非顯性聲明返回值）。

還是拿Person函數(shù)為例，直接調(diào)用Person函數(shù)：

var person1 = Person('nicole');
person1; // undefined
window.name; // nicole

可見，直接調(diào)用構(gòu)造函數(shù)的結(jié)果，并不是我們想要的。

3）小結(jié)

為了防止因?yàn)橥浭褂胣ew關(guān)鍵字而調(diào)用構(gòu)造函數(shù)，可以加一些判斷條件強(qiáng)行調(diào)用new關(guān)鍵字，代碼如下：

function Person(name){
  if (!(this instanceof Person)) {
    return new Person(name);
  }
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = Person('nicole');
console.log(person1.say()); // I am nicole
var person2 = new Person('lisa');
console.log(person2.say()); // I am lisa

到此，關(guān)于“JavaScript中的構(gòu)造函數(shù)怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

本文題目：JavaScript中的構(gòu)造函數(shù)怎么使用
URL網(wǎng)址：http://bm7419.com/article42/phoshc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、品牌網(wǎng)站制作、微信公眾號(hào)、電子商務(wù)、外貿(mào)建站、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)