溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

javascript構造函數有什么用

發布時間:2020-12-08 10:28:28 來源:億速云 閱讀:627 作者:小新 欄目:web開發

小編給大家分享一下javascript構造函數有什么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

constructor是原型對象上的一個屬性,默認指向這個原型的構造函數

這個結論貌似對我們平時的工作中似乎并沒有什么用處,那構造函數,就真的沒什么用處嗎?

使用構造函數構造可以復用的對象

JS中的函數即可以是構造函數又可以當作普通函數來調用,當使用new來創建對象時,對應的函數就是構造函數,通過對象來調用時就是普通函數。

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

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

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

//創建了一個構造函數
function Person(name,address){
    this.name = name;
    this.address = address;
}
//為構造函數的原型對象添加一個方法sayHello
Person.prototype.sayHello = function(){
    console.log('Hi I am ' + this.name);
}
//通過構造函數Person實例化一個p1,并傳參
var p1 = new Person('postbird','earth');
//通過構造函數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

耐心品位上面的代碼,這樣的可擴展性就會更好,可以創N個實例,實現代碼復用

經典案例

關于js的constructor構造函數,有一個很經典的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是原型對象上的一個屬性,默認指向這個原型的構造函數?
我們把這一行打碼注釋掉

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

聰明如你,相信你已經發行了問題所在

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

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

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

前面我們說過new Person('Beijin')對象是沒有prototype的,prototype只有函數才有;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()當我們var one = new Father(25) 時 ,one.constructor = Father.prototype.constructor,所以one.constructor指向function Person(),所以,一定要進行修正,否則原型鏈會亂

以上是“javascript構造函數有什么用”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女