典型的面向?qū)ο缶幊陶Z(yǔ)言（比如C++和Java），存在“類(lèi)”（class）這個(gè)概念。所謂“類(lèi)”就是對(duì)象的模板，對(duì)象就是“類(lèi)”的實(shí)例。但是，在JavaScript語(yǔ)言的對(duì)象體系，不是基于“類(lèi)”的，而是基于構(gòu)造函數(shù)（constructor）和原型鏈（prototype）

‘面向?qū)ο缶幊?rsquo;的第一步，就是要生成對(duì)象。而js中面向?qū)ο缶幊淌腔跇?gòu)造函數(shù)（constructor）和原型鏈（prototype）的。

前面說(shuō)過(guò)，“對(duì)象”是單個(gè)實(shí)物的抽象。通常需要一個(gè)模板，表示某一類(lèi)實(shí)物的共同特征，然后“對(duì)象”根據(jù)這個(gè)模板生成。
js語(yǔ)言中使用構(gòu)造函數(shù)（constructor）作為對(duì)象的模板，所謂構(gòu)造函數(shù)，就是提供一個(gè)生成對(duì)象的模板，并描述對(duì)象的基本結(jié)構(gòu)的函數(shù)。一個(gè)構(gòu)造函數(shù)，可以生成多個(gè)對(duì)象，每個(gè)對(duì)象都有相同的結(jié)構(gòu)。

對(duì)于JS中的任何一個(gè)普通函數(shù)，當(dāng)用new關(guān)鍵字來(lái)調(diào)用時(shí)，它就是構(gòu)造函數(shù)?？梢?jiàn)與函數(shù)定義無(wú)關(guān)，與調(diào)用方法有關(guān)。在社區(qū)中，通常默契地將函數(shù)名首字母大寫(xiě)來(lái)表示該函數(shù)以后希望被作為構(gòu)造函數(shù)來(lái)使用

作用：構(gòu)造新對(duì)象，設(shè)置對(duì)象的屬性和方法

ECMAScript提供了多個(gè)內(nèi)置構(gòu)造函數(shù)，如 Object、Array、String、Boolean、Number、Date…等等。

var obj = new Object();
var arr = new Array();

ECMAScript也允許自定義構(gòu)造函數(shù)

構(gòu)造函數(shù)一般首字母會(huì)大寫(xiě)，為了和普通函數(shù)區(qū)分

一個(gè)構(gòu)造函數(shù)可以通過(guò)new創(chuàng)建多個(gè)實(shí)例對(duì)象

創(chuàng)建構(gòu)造函數(shù)時(shí)，里面的屬性和方法前必須加this，this就表示當(dāng)前運(yùn)行時(shí)的對(duì)象

    function Person(name, height) {
          this.name = name;
          this.height = height;
          this.bark = function(fs){
          return fs
         
      }
     }
  
      var boy = new Person('Keith', 180);
      console.log(boy);  //Person {name: 'Keith', height: 180, bark: ?}
      console.log(boy.constructor);  //f Person(){}  //整個(gè)構(gòu)造函數(shù)原型
      console.log(boy.bark(8));  //8
      console.log(boy.name); //'Keith'
      console.log(boy.height); //180

 function Cat1(name){           
 this.name = name;
 console.log(this)  //先打印 new的時(shí)候打印  Cat1 {name: 'kk'}  
     }
 var cat3 = new Cat1("kk");
 console.log(cat3);   //后打印  Cat1 {name: 'kk'} 指向原型鏈，再賦值

構(gòu)造函數(shù)的return

  function Dog(){
      this.name = "貝貝";
      this.bark = function(){
          console.log("汪汪汪");
      }
      // return 0;
      // return [];
  }
  var d1 = new Dog();
  console.log(d1);//Dog {name: '貝貝', bark: ?}
  //構(gòu)造函數(shù)不需要return 就可以返回結(jié)果

return一個(gè)基本數(shù)據(jù)類(lèi)型，結(jié)果不變，依舊返回一個(gè)對(duì)象

例：

return 0;
console.log(d1);//Dog {name: '貝貝', bark: ?}

return一個(gè)復(fù)雜數(shù)據(jù)類(lèi)型，返回一個(gè)復(fù)雜數(shù)據(jù)類(lèi)型

例：

return [];
console.log(d1);//[]

構(gòu)造函數(shù)構(gòu)造出的對(duì)象帶有類(lèi)型標(biāo)識(shí)

console.log(p1)  
Person {
  name: 'zs',
  age: 12,
  eating: [Function: eating],
}  //打印結(jié)果有類(lèi)型標(biāo)識(shí)  //Person 就是類(lèi)型標(biāo)識(shí)


console.log(p1)
{name: 'zs', age: 12, eating:[Function: eating]} //無(wú)類(lèi)型標(biāo)識(shí)的

構(gòu)造函數(shù)的原理（new之后發(fā)生了什么）

構(gòu)造函數(shù)之所以能構(gòu)造出對(duì)象，其實(shí)JS幫助我們做了很多騷操作。你以為new之后直接執(zhí)行函數(shù)體代碼，其實(shí)并不是，事實(shí)比我們看到了多了四步

1 自從用new調(diào)用函數(shù)后，JS引擎就會(huì)在內(nèi)存中創(chuàng)建一個(gè)空對(duì)象{}

const newObj = {};

2 新對(duì)象的__proto__屬性指向構(gòu)造函數(shù)的原型對(duì)象

（通俗理解就是新對(duì)象隱式原型__proto__鏈接到構(gòu)造函數(shù)顯式原型prototype上。）

newObj.__proto__ = functionName.prototype

3 構(gòu)造函數(shù)內(nèi)部的this會(huì)指向這個(gè)新對(duì)象（即將構(gòu)造函數(shù)的作用域指向新對(duì)象）

this = newObj

4 從上到下執(zhí)行函數(shù)體（只有這步是我們能直觀看到代碼的）

5 返回創(chuàng)造出來(lái)的對(duì)象（如果構(gòu)造函數(shù)沒(méi)有返回對(duì)象，則默認(rèn)返回this。在函數(shù)體內(nèi)部的this指向新創(chuàng)建的內(nèi)存空間，默認(rèn)返回 this 就相當(dāng)于默認(rèn)返回了該內(nèi)存空間）

例子：

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.eating = function() {
		console.log(this.name + ' is eating');
	}
}

const p1 = new Person('zs', 12);

//----------------------------------------------------------------------------
/*實(shí)際JS引擎幫助我們實(shí)現(xiàn)的操作*/
const newObj = {};
newObj.__proto__ = Person.prototype;
this = newObj;

this.name = name;
this.age = age;
this.eating = function() {
  console.log(this.name + ' is eating');
}

return newObj;

在構(gòu)造函數(shù)原型上綁定方法節(jié)省空間

采用構(gòu)造函數(shù)的確可以批量創(chuàng)建對(duì)象，且對(duì)象還都有該構(gòu)造函數(shù)的logo，那么構(gòu)造函數(shù)有什么缺點(diǎn)嗎？有的。由于每次函數(shù)調(diào)用都會(huì)創(chuàng)建新的對(duì)象，對(duì)象中的函數(shù)（比如eating）也會(huì)創(chuàng)建多份，對(duì)于函數(shù)而言創(chuàng)建多份沒(méi)有必要，能不能共用一個(gè)函數(shù)呢？

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

const p1 = new Person('zs', 12);

// 在函數(shù)原型上添加方法
Person.prototype.eating = function() {
	console.log(this.name + ' is eating'); // zs is eating
    return 5
}
console.log(p1.eating());  //5

將方法轉(zhuǎn)移到構(gòu)造函數(shù)原型上來(lái)定義后，對(duì)于實(shí)例對(duì)象p1，依然可以調(diào)用eating方法。調(diào)用p1的eating方法時(shí)，如果p1對(duì)象沒(méi)有該方法，會(huì)去p1對(duì)象的原型對(duì)象p1.__proto_找，因?yàn)樵跇?gòu)造p1時(shí)，綁定的原型：p1.__proto__ = Person.prototype，所以可以找到p1.__proto__.eating

總結(jié)

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

最新評(píng)論