ホームページ  >  記事  >  ウェブフロントエンド  >  Javascript の継承 (パート 1) - オブジェクト構築の概要_JavaScript

Javascript の継承 (パート 1) - オブジェクト構築の概要_JavaScript

WBOY
WBOYオリジナル
2016-05-16 17:48:361224ブラウズ

Javascriptに「クラス」は存在するのでしょうか?

すべてはオブジェクトです
基本データ (未定義、Null、ブール、数値、文字列) を除き、JavaScript のその他すべてはオブジェクトです。
実際、JavaScript のオブジェクトはデータと関数のコレクションです。たとえば、次のことがわかります:

コードをコピー コードは次のとおりです:

var foo = new Function("alert ('hello world!')");
foo();

foo が関数でありオブジェクトであることがわかります。別の例:
コードをコピー コードは次のとおりです。

function foo(){
//何かをします
}

foo.data = 123;
foo["data2"] = "hello";

alert(foo.data); 🎜>alert(foo.data2);

関数はオブジェクトのようなプロパティを追加することもできます。

オブジェクトの構築 通常、オブジェクトの構築にはコンストラクターを使用しますが、コンストラクターがない場合でも、必要なオブジェクトを構築する方法があります。

コードをコピーします コードは次のとおりです:
function creatperson(__name, __sex, __age){
return {
名前: __name,
性別: __性別,
年齢: __年齢,
get: function(__key){
alert(this[__key])
}
; >}

var Bob = creatperson("ボブ", "男性", 18);
Bob.get("名前"); // ボブ
Bob.get("性別"); ; //男性
Bob.get("age"); //18


しかし、これだけでは十分ではないので、メソッドを共有できることを願っています。たとえば、この関数を使用して Tom オブジェクトを作成すると、get 関数が再度作成され、明らかにメモリを無駄にします。

共有リソースのインポート
関数もオブジェクトであることがわかっているため、共有する必要があるメソッドまたはプロパティを関数に置くことができます:

function creatperson(__name, __sex, __age){
var common = argument.callee. common ;
return {
//独自の属性
name: __name,
sex: __sex,
age: __age,
// 独自のメソッド
sayhi: function ( ){alert("hi");},
//共有メソッド
get: common.get,
getType: common.getType,
//共有属性
type: common .type
};
}
creatperson.common = {
get:function(__key){
alert(this[__key]);
getType : function(){
alert(this.type);
},
type: "人"
}; , 18);
Bob.get("名前") //ボブ
Bob.get("性別"); //男性
Bob.getType(); 🎜>
そこで、くだらないメソッドを使用して、独自のプロパティ メソッドと共有プロパティ メソッドを備えたオブジェクトを正常に作成しました。しかし実際には、これが Javascript がオブジェクトを適切に作成しない理由です。
実際、この共有属性はまだ単なるコピーであるため、実際には実装されていません。これは私たちが本当に望んでいる共有財産ではありません。


new キーワード
上記の「オブジェクトの構築」と同様に、new の目的はオブジェクト独自のプロパティとメソッドを作成することです。例:



コードをコピー

コードは次のとおりです:}

var Bob = 新しい人 ("ボブ", "男性", 18);
Bob.get("名前");ボブ
Bob.get("性別"); //男性
Bob.get("年齢") //18



プロトタイプ (プロトタイプ)

JavaScript 作者は上記の「共有リソースのインポート」と同様の方法を使用しました。関数もオブジェクトであるため、共有する必要がある「もの」を彼に置きます:



コードをコピー
コードは次のとおりです。 :

関数 person(__name, __sex, __age){ this.name = __name; this.age = __age; > this.sayhi = function(__key){ alert("hi"); } person.prototype = { コンストラクター: person,
get: function ( __key){
alert(this[__key]);

var Bob = 新しい人 ("ボブ", "男性",
);ボブ .get("名前"); // ボブ
Bob.get("性別"); // 男性
alert(Bob.constructor);

オブジェクトを作成するための Javascript のモデルはシンプルで、new は独自の問題を処理し、プロトタイプは共有の問題を処理します。

Java のオブジェクト (インスタンス) 生成方法が、原材料を型 (クラス) に投入して製錬することである場合、JavaScript のオブジェクト生成方法は、ビルダー (コンストラクター) に材料を与えて図面をプレスさせることです。建てられました。

実際のプロセス

もちろん、実際のプロセスは次のようにはなりません。新しいオブジェクトを作成するときに最初に行うことは、次のような共有リソースの処理です。 🎜>
コードをコピー コードは次のとおりです:
function A(){
console。 dir(this); //A
}
var a = new A(); 🎜>


console.dir を介して出力すると、次のことがわかります:

コンストラクターはオブジェクトを作成した後、すぐにそのプロトタイプ参照を新しいオブジェクトの内部属性 __proto__ に割り当て、コンストラクター内で構築ステートメントを実行します。


type "A"
__proto__ A {type = "A"}
  type "A"
  constructor A()



コードをコピーします
コードは次のとおりです: function A( ){ this.type = "B" }
A.prototype.type = "A"

var a = new A(); (a.type); //B


a.type を取得する場合、エンジンはまず a オブジェクトに属性タイプがあるかどうかを確認し、存在する場合は返します。属性がない場合は、__proto_ を使用して _ に type 属性があるかどうかを調べ、存在する場合はその属性を返します。たとえば、

__proto__ は標準ではありませんが、IE には同様の内部プロパティがありますが、それを使用することはできません。

このため、a.type を削除しても a.type を返すことができます:




コードをコピー

コードは次のとおりです。 function A(){ this.type = "B" } A.prototype.type = "A";
var a = new A();
alert(a.type); //B
alert(a.type); >

クラスはありますか?


厳密に言えば、JavaScript にはクラスのようなものはありません。
しかし、オブジェクト指向プログラミングに Javascript を使用する場合、通信を容易にするために、コンストラクターによって作成されるオブジェクトの「型 (クラスではなく型) 名」としてコンストラクターの名前を使用することがあります。
名前はコードネームであり、わかりやすくするためのツールです。

参考資料

JavaScript 継承メカニズムの設計アイデア

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。