我們相約在今天，在今天討論javascript構(gòu)造函數(shù)，感謝你如約而至

我們昨天前幾天討論過構(gòu)造函數(shù)constructor，得出了結(jié)論

constructor是原型對象上的一個屬性，默認(rèn)指向這個原型的構(gòu)造函數(shù)

這個結(jié)論貌似對我們平時的工作中似乎并沒有什么用處，那構(gòu)造函數(shù)，就真的沒什么用處嗎？

使用構(gòu)造函數(shù)構(gòu)造可以復(fù)用的對象

JS中的函數(shù)即可以是構(gòu)造函數(shù)又可以當(dāng)作普通函數(shù)來調(diào)用，當(dāng)使用new來創(chuàng)建對象時，對應(yīng)的函數(shù)就是構(gòu)造函數(shù)，通過對象來調(diào)用時就是普通函數(shù)。

在我們平時工作中，經(jīng)常會需要我們創(chuàng)建一個對象，而我們更多的是使用對像直接量，直接創(chuàng)建，舉個栗子，代碼如下

var person = {
    name:'postbird',
    address:'earth',
    sayHello:function(){console.log('Hello,I am ' + this.name);}
};

如果只是一個單獨的對象，對象的屬性和方法基本不會變了，這么玩完全可以，但是如果你的對象有很多實例，或者涉及繼承或者構(gòu)造函數(shù)傳參,留意代碼注釋

//創(chuàng)建了一個構(gòu)造函數(shù)
function Person(name,address){
    this.name = name;
    this.address = address;
}
//為構(gòu)造函數(shù)的原型對象添加一個方法sayHello
Person.prototype.sayHello = function(){
    console.log('Hi I am ' + this.name);
}
//通過構(gòu)造函數(shù)Person實例化一個p1，并傳參
var p1 = new Person('postbird','earth');
//通過構(gòu)造函數(shù)Person實例化一個p2，并傳參
var p2 = new Person('ptbird','month');
console.log(p1);//{name: "postbird", address: "earth"}
console.log(p2);//{name: "ptbird", address: "month"}
// p1和p2 繼承了Person的sayHello方法
p1.sayHello()//Hi I am ptbird
p2.sayHello()//Hi I am postbird

耐心品位上面的代碼，這樣的可擴展性就會更好，可以創(chuàng)N個實例，實現(xiàn)代碼復(fù)用

經(jīng)典案例

關(guān)于js的constructor構(gòu)造函數(shù)，有一個很經(jīng)典的demo

function Person(area){
  this.type = 'person';
  this.area = area;
}
Person.prototype.sayArea = function(){
  console.log(this.area);
}
var Father = function(age){
  this.age = age;
} 
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor===Person) //true
console.log(Father.prototype.constructor===Person); //true
Father.prototype.constructor = Father;//修正
console.log(Father.prototype.constructor===Father); //true
var one = new father(25);
console.log(one.constructor===Father) // true

注意這一行代碼

Father.prototype.constructor = Father;//修正

為什么要修正？不是說constructor是原型對象上的一個屬性，默認(rèn)指向這個原型的構(gòu)造函數(shù)?
我們把這一行打碼注釋掉

function Person(area){
  this.type = 'person';
  this.area = area;
}
Person.prototype.sayArea = function(){
  console.log(this.area);
}
var Father = function(age){
  this.age = age;
} 
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor===Person) //true
console.log(Father.prototype.constructor===Person); //true
//Father.prototype.constructor = Father;//修正
console.log(Father.prototype.constructor===Father); //false
var one = new Father(25);
console.log(one.constructor===Person) // true

聰明如你，相信你已經(jīng)發(fā)行了問題所在

Father.prototype = new Person('Beijin');

這一步的時候，原型指向了一個新對象，這個新對象的constructor指向的是Person。

console.log((new Person('Beijin')).__proto__ === Person.prototype) //true

前面我們說過new Person('Beijin')對象是沒有prototype的，prototype只有函數(shù)才有；Father.prototype.constructor將會沿著new Person('Beijin')的原型鏈向下查找constructor，new Person('Beijin')沒有constructor就去它的__proto__找，因為(new Person('Beijin'))._proto_ === Person.prototype而Person.prototype.constructor == function Person()，所以 Father.prototype.constructor == Person.prototype.constructor //function Person()當(dāng)我們var one = new Father(25) 時 ,one.constructor = Father.prototype.constructor,所以one.constructor指向function Person()，所以，一定要進行修正，否則原型鏈會亂

以上就是javascript構(gòu)造函數(shù)的深入探討的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！