ホームページ > ウェブフロントエンド > フロントエンドQ&A > JavaScript コンストラクターとは

JavaScript コンストラクターとは

WBOY
リリース: 2022-01-19 14:32:05
オリジナル
2293 人が閲覧しました

JavaScript では、コンストラクターは、オブジェクトのメモリが割り当てられた後に新しく作成されたオブジェクトを初期化するために使用される特別な関数です。オブジェクト コンストラクターは、特別なタイプのオブジェクトを作成するために使用されます。オブジェクトが最初に割り当てられるとき作成すると、パラメータを受け取ることでメンバーのプロパティやメソッドに値を割り当てるために使用されます。

JavaScript コンストラクターとは

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript コンストラクターとは何ですか?

オブジェクト指向プログラミングでは、コンストラクターは、オブジェクト指向プログラミングの後に新しいオブジェクトを作成するために使用されるコンストラクターです。新しく作成されたオブジェクトのメモリが割り当てられ、このオブジェクトを初期化する特別な関数。 JavaScript ではすべてがオブジェクトです。オブジェクト コンストラクターは、特別な種類のオブジェクトを作成するために使用されます。まず、使用するオブジェクトを準備します。次に、オブジェクトが最初に作成されるときに、パラメーターを受け取り、メンバーのプロパティとメソッドに値を割り当てます。

オブジェクトの作成

オブジェクトを作成する 3 つの基本的な方法:

var newObject = {};
// or
var newObject = Object.create( null );
// or
var newObject = new Object();
ログイン後にコピー

オブジェクト コンストラクターが特定の値のオブジェクト ラッパーを作成する場合、または値が渡されない場合、空のオブジェクトを作成して返します。

キーと値のペアをオブジェクトに割り当てる 4 つの方法:

// 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() );
ログイン後にコピー

上記はコンストラクター パターンの単純なバージョンですが、2 つの問題があります:

継承が困難です

Car コンストラクターによって作成された各オブジェクトでは、toString() などの関数が再定義されます

これはあまり良いことではありません。理想的な状況は、すべての Car タイプのオブジェクトが同じ関数を参照することです

「プロトタイプ」コンストラクターを使用する##JavaScript では、関数にはプロトタイプ属性があります。 JavaScript コンストラクターを呼び出してオブジェクトを作成すると、コンストラクター プロトタイプのプロパティにアクセスし、作成されたオブジェクトに対して呼び出すことができます

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 学習チュートリアル

以上がJavaScript コンストラクターとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート