首頁 > 文章 > web前端 > JavaScript構造器是什麼

JavaScript構造器是什麼

WBOY原創: 2022-01-19 14:32:052150瀏覽

在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&#39;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構造器是什麼

相關文章