JavaScript構造器怎么創建

本文小編為大家詳細介紹“JavaScript構造器怎么創建”，內容詳細，步驟清晰，細節處理妥當，希望這篇“JavaScript構造器怎么創建”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

在JavaScript中，構造器是一個當新建對象的內存被分配后，用來初始化該對象的一個特殊函數，對象構造器是被用來創建特殊類型的對象，在對象初次被創建時，通過接收參數，用來對成員的屬性和方法進行賦值。

本教程操作環境：windows10系統、javascript1.8.5版、Dell G3電腦。

JavaScript構造器是什么

在面向對象編程中，構造器是一個當新建對象的內存被分配后，用來初始化該對象的一個特殊函數。在 JavaScript 中一切皆對象。 對象構造器是被用來創建特殊類型的對象，首先它要準備使用的對象，其次在對象初次被創建時，通過接收參數，用來對成員的屬性和方法進行賦值。

對象創建

創建對象的三種基本方式:

var newObject = {};
// or
var newObject = Object.create( null );
// or
var newObject = new Object();

在 Object 構造器為特定的值創建對象封裝，或者沒有傳遞值時，它將創建一個空對象并返回它。

將一個鍵值對賦給一個對象的四種方式:

// ECMAScript 3 兼容形式
// 1. “點號”法
// 設置屬性
newObject.someKey = "Hello World";
// 獲取屬性
var key = newObject.someKey;
// 2. “方括號”法
// 設置屬性
newObject["someKey"] = "Hello World";
// 獲取屬性
var key = newObject["someKey"];
// ECMAScript 5 僅兼容性形式
// For more information see: http://kangax.github.com/es5-compat-table/
// 3. Object.defineProperty方式
// 設置屬性
Object.defineProperty( newObject, "someKey", {
    value: "for more control of the property's behavior",
    writable: true,
    enumerable: true,
    configurable: true
});
// 如果上面的方式你感到難以閱讀，可以簡短的寫成下面這樣：
var defineProp = function ( obj, key, value ){
    var config = {
        value
    }
  Object.defineProperty( obj, key, config );
};
// 為了使用它，我們要創建一個“person”對象
var person = Object.create( null );
// 用屬性構造對象
defineProp( person, "car",  "Delorean" );
defineProp( person, "dateOfBirth", "1981" );
defineProp( person, "hasBeard", false );
// 還可以創建一個繼承于Person的賽車司機
var driver = Object.create( person );
// 設置司機的屬性
defineProp(driver, "topSpeed", "100mph");
// 獲取繼承的屬性 (1981)
console.log( driver.dateOfBirth );
// 獲取我們設置的屬性 (100mph)
console.log( driver.topSpeed );
// 4. Object.defineProperties方式
// 設置屬性
Object.defineProperties( newObject, {
  "someKey": { 
    value: "Hello World", 
    writable: true 
  },
  "anotherKey": { 
    value: "Foo bar", 
    writable: false 
  } 
});
// 3和4中的讀取屬行可用1和2中的任意一種

基礎構造器

正如我們先前所看到的，JavaScript 不支持類的概念，但它有一種與對象一起工作的構造器函數。使用 new 關鍵字來調用該函數，我們可以告訴 JavaScript 把這個函數當做一個構造器來用，它可以用自己所定義的成員來初始化一個對象。

在這個構造器內部，關鍵字 this 引用到剛被創建的對象。回到對象創建，一個基本的構造函數看起來像這樣:

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}
// 使用:
// 我們可以實例化一個Car
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
// 打開瀏覽器控制臺查看這些對象toString()方法的輸出值
console.log( civic.toString() );
console.log( mondeo.toString() );

上述是個簡單版本的構造器模式，但它有兩個問題：

難以繼承

每個 Car 構造函數創建的對象中，toString() 之類的函數都被重新定義

這不是非常好，理想的情況是所有 Car 類型的對象都應該引用同一個函數

使用“原型( prototype )”的構造器

在 JavaScript 中函數有一個 prototype 的屬性。當我們調用 JavaScript 的構造器創建一個對象時，構造函數 prototype 上的屬性對于所創建的對象來說都能被訪問和調用

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}
// 注意這里我們使用 Object.prototype.newMethod 而不是 Object.prototype ，以避免我們重新定義原型對象
Car.prototype.toString = function () {
  return this.model + " has done " + this.miles + " miles";
};
// 使用:
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
console.log( civic.toString() );
console.log( mondeo.toString() );

通過上面代碼，單個 toString() 實例被所有的 Car 對象所共享了。

讀到這里，這篇“JavaScript構造器怎么創建”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。