コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptの継承の詳しい解説(3)_jsオブジェクト指向

JavaScriptの継承の詳しい解説(3)_jsオブジェクト指向

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース： 2016-05-16 18:50:02
オリジナル
792 人が閲覧しました

注: この章の jClass の実装は、単純な JavaScript の継承 の実践を指します。

まず、第 1 章で紹介した例を確認してみましょう: 

 function Person(name) {<BR>
this.name = name;<BR>
}<BR>
Person.prototype = {<BR>
getName: function() {<BR>
return this.name;<BR>
}<BR>
}<br><br>
function Employee(name, employeeID) {<BR>
this.name = name;<BR>
this.employeeID = employeeID;<BR>
}<BR>
Employee.prototype = new Person();<BR>
Employee.prototype.getEmployeeID = function() {<BR>
return this.employeeID;<BR>
};<BR>
var zhang = new Employee("ZhangSan", "1234");<BR>
console.log(zhang.getName()); // "ZhangSan" <BR>
ログイン後にコピー

コンストラクターのポインティングエラーを修正

前の記事のコンストラクターの説明から、以下に示すように、Employee インスタンスのコンストラクターにはポインティング エラーがあることがわかります。

 var zhang = new Employee("ZhangSan", "1234");<BR>
console.log(zhang.constructor === Employee); // false<BR>
console.log(zhang.constructor === Object); // true <BR>
ログイン後にコピー
簡単な修正が必要です。
 function Employee(name, employeeID) {<BR>
this.name = name;<BR>
this.employeeID = employeeID;<BR>
}<BR>
Employee.prototype = new Person();<BR>
Employee.prototype.constructor = Employee;<BR>
Employee.prototype.getEmployeeID = function() {<BR>
return this.employeeID;<BR>
};<BR>
var zhang = new Employee("ZhangSan", "1234");<BR>
console.log(zhang.constructor === Employee); // true<BR>
console.log(zhang.constructor === Object); // false<BR>
ログイン後にコピー

Employee クラスの作成時に person をインスタンス化するのは不適切です

しかし一方で、継承を実装するにはこのメカニズムに依存する必要があります。 解決策は、コンストラクターでデータを初期化するのではなく、データを初期化するためのプロトタイプ メソッド (init など) を提供することです。 

 // 空的构造函数<BR>
function Person() {<BR>
}<BR>
Person.prototype = {<BR>
init: function(name) {<BR>
this.name = name;<BR>
},<BR>
getName: function() {<BR>
return this.name;<BR>
}<BR>
}<BR>
// 空的构造函数<BR>
function Employee() {<BR>
}<BR>
// 创建类的阶段不会初始化父类的数据，因为Person是一个空的构造函数<BR>
Employee.prototype = new Person();<BR>
Employee.prototype.constructor = Employee;<BR>
Employee.prototype.init = function(name, employeeID) {<BR>
this.name = name;<BR>
this.employeeID = employeeID;<BR>
};<BR>
Employee.prototype.getEmployeeID = function() {<BR>
return this.employeeID;<BR>
};<BR>
ログイン後にコピー
このメソッドでは、次のように、オブジェクトをインスタンス化した後に init 関数を手動で呼び出す必要があります。 
 var zhang = new Employee();<BR>
zhang.init("ZhangSan", "1234");<BR>
console.log(zhang.getName()); // "ZhangSan"<BR>
ログイン後にコピー

init 関数を自動的に呼び出すにはどうすればよいですか?

クラスの構築時に init 関数を呼び出さないことと、オブジェクトのインスタンス化時に init 関数を自動的に呼び出すという 2 つの効果を達成する必要があります。空のコンストラクターを呼び出すときにステータスインジケーターが必要なようです。

しかし、これにはグローバル変数の導入が必要であり、これは悪い兆候です。 
 // 创建一个全局的状态标示 - 当前是否处于类的构造阶段<BR>
var initializing = false;<BR>
function Person() {<BR>
if (!initializing) {<BR>
this.init.apply(this, arguments);<BR>
}<BR>
}<BR>
Person.prototype = {<BR>
init: function(name) {<BR>
this.name = name;<BR>
},<BR>
getName: function() {<BR>
return this.name;<BR>
}<BR>
}<BR>
function Employee() {<BR>
if (!initializing) {<BR>
this.init.apply(this, arguments);<BR>
}<BR>
}<BR>
// 标示当前进入类的创建阶段，不会调用init函数<BR>
initializing = true;<BR>
Employee.prototype = new Person();<BR>
Employee.prototype.constructor = Employee;<BR>
initializing = false;<BR>
Employee.prototype.init = function(name, employeeID) {<BR>
this.name = name;<BR>
this.employeeID = employeeID;<BR>
};<BR>
Employee.prototype.getEmployeeID = function() {<BR>
return this.employeeID;<BR>
};<br><br>
// 初始化类实例时，自动调用类的原型函数init，并向init中传递参数<BR>
var zhang = new Employee("ZhangSan", "1234");<BR>
console.log(zhang.getName()); // "ZhangSan"<BR>
ログイン後にコピー

グローバル変数の初期化を回避するにはどうすればよいですか?

グローバル変数の導入を避けるために内部の詳細をカプセル化しながら、クラス作成プロセスを簡素化するためにグローバル関数を導入する必要があります。

jClass 関数を使用してクラスを作成し、クラスを継承するメソッド: 
 // 当前是否处于创建类的阶段<BR>
var initializing = false;<BR>
function jClass(baseClass, prop) {<BR>
// 只接受一个参数的情况 - jClass(prop)<BR>
if (typeof (baseClass) === "object") {<BR>
prop = baseClass;<BR>
baseClass = null;<BR>
}<BR>
// 本次调用所创建的类（构造函数）<BR>
function F() {<BR>
// 如果当前处于实例化类的阶段，则调用init原型函数<BR>
if (!initializing) {<BR>
this.init.apply(this, arguments);<BR>
}<BR>
}<BR>
// 如果此类需要从其它类扩展<BR>
if (baseClass) {<BR>
initializing = true;<BR>
F.prototype = new baseClass();<BR>
F.prototype.constructor = F;<BR>
initializing = false;<BR>
}<BR>
// 覆盖父类的同名函数<BR>
for (var name in prop) {<BR>
if (prop.hasOwnProperty(name)) {<BR>
F.prototype[name] = prop[name];<BR>
}<BR>
}<BR>
return F;<BR>
};<BR>
ログイン後にコピー
OK、クラスを作成およびインスタンス化する方法がより洗練されました。 しかし、ここには明らかな欠陥がまだあります。Employee の初期化関数 init は、親クラスの同じ名前のメソッドを呼び出すことができません。 
 var Person = jClass({<BR>
init: function(name) {<BR>
this.name = name;<BR>
},<BR>
getName: function() {<BR>
return this.name;<BR>
}<BR>
});<BR>
var Employee = jClass(Person, {<BR>
init: function(name, employeeID) {<BR>
this.name = name;<BR>
this.employeeID = employeeID;<BR>
},<BR>
getEmployeeID: function() {<BR>
return this.employeeID;<BR>
}<BR>
});<br><br>
var zhang = new Employee("ZhangSan", "1234");<BR>
console.log(zhang.getName()); // "ZhangSan"<BR>
ログイン後にコピー

親クラスで同じ名前のメソッドを呼び出すにはどうすればよいですか?

次のように、インスタンス化されたオブジェクトの基本属性を指定することで、親クラス (コンストラクター) のプロトタイプを指定できます。

メソッドの呼び出し: 
 // 当前是否处于创建类的阶段<BR>
var initializing = false;<BR>
function jClass(baseClass, prop) {<BR>
// 只接受一个参数的情况 - jClass(prop)<BR>
if (typeof (baseClass) === "object") {<BR>
prop = baseClass;<BR>
baseClass = null;<BR>
}<BR>
// 本次调用所创建的类（构造函数）<BR>
function F() {<BR>
// 如果当前处于实例化类的阶段，则调用init原型函数<BR>
if (!initializing) {<BR>
// 如果父类存在，则实例对象的base指向父类的原型<BR>
// 这就提供了在实例对象中调用父类方法的途径<BR>
if (baseClass) {<BR>
this.base = baseClass.prototype;<BR>
}<BR>
this.init.apply(this, arguments);<BR>
}<BR>
}<BR>
// 如果此类需要从其它类扩展<BR>
if (baseClass) {<BR>
initializing = true;<BR>
F.prototype = new baseClass();<BR>
F.prototype.constructor = F;<BR>
initializing = false;<BR>
}<BR>
// 覆盖父类的同名函数<BR>
for (var name in prop) {<BR>
if (prop.hasOwnProperty(name)) {<BR>
F.prototype[name] = prop[name];<BR>
}<BR>
}<BR>
return F;<BR>
};<BR>
ログイン後にコピー
 var Person = jClass({<BR>
init: function(name) {<BR>
this.name = name;<BR>
},<BR>
getName: function() {<BR>
return this.name;<BR>
}<BR>
});<BR>
var Employee = jClass(Person, {<BR>
init: function(name, employeeID) {<BR>
// 调用父类的原型函数init，注意使用apply函数修改init的this指向<BR>
this.base.init.apply(this, [name]);<BR>
this.employeeID = employeeID;<BR>
},<BR>
getEmployeeID: function() {<BR>
return this.employeeID;<BR>
},<BR>
getName: function() {<BR>
// 调用父类的原型函数getName<BR>
return "Employee name: " + this.base.getName.apply(this);<BR>
}<BR>
});<br><br>
var zhang = new Employee("ZhangSan", "1234");<BR>
console.log(zhang.getName()); // "Employee name: ZhangSan"<BR>
ログイン後にコピー

これまでのところ、第 1 章の継承の手動実装の欠点を修正してきました。 カスタム jClass 関数を通じてクラスとサブクラスを作成し、プロトタイプ メソッド init を通じてデータを初期化し、インスタンス属性ベースを通じて親クラスのプロトタイプ関数を呼び出します。

唯一の欠点は、親クラスを呼び出すコードが長すぎて理解しにくいことです。

のように呼び出すことができれば良いのではないかと思います。 
 var Employee = jClass(Person, {<BR>
init: function(name, employeeID) {<BR>
// 如果能够这样调用，就再好不过了<BR>
this.base(name);<BR>
this.employeeID = employeeID;<BR>
}<BR>
});<BR>
ログイン後にコピー

jClass 関数の最適化

この時点で、クラスとサブクラスの作成とメソッドの呼び出しは非常にエレガントです。以下を参照してください。
 // 当前是否处于创建类的阶段<BR>
var initializing = false;<BR>
function jClass(baseClass, prop) {<BR>
// 只接受一个参数的情况 - jClass(prop)<BR>
if (typeof (baseClass) === "object") {<BR>
prop = baseClass;<BR>
baseClass = null;<BR>
}<BR>
// 本次调用所创建的类（构造函数）<BR>
function F() {<BR>
// 如果当前处于实例化类的阶段，则调用init原型函数<BR>
if (!initializing) {<BR>
// 如果父类存在，则实例对象的baseprototype指向父类的原型<BR>
// 这就提供了在实例对象中调用父类方法的途径<BR>
if (baseClass) {<BR>
this.baseprototype = baseClass.prototype;<BR>
}<BR>
this.init.apply(this, arguments);<BR>
}<BR>
}<BR>
// 如果此类需要从其它类扩展<BR>
if (baseClass) {<BR>
initializing = true;<BR>
F.prototype = new baseClass();<BR>
F.prototype.constructor = F;<BR>
initializing = false;<BR>
}<BR>
// 覆盖父类的同名函数<BR>
for (var name in prop) {<BR>
if (prop.hasOwnProperty(name)) {<BR>
// 如果此类继承自父类baseClass并且父类原型中存在同名函数name<BR>
if (baseClass &&<BR>
typeof (prop[name]) === "function" &&<BR>
typeof (F.prototype[name]) === "function") {<br><br>
// 重定义函数name - <BR>
// 首先在函数上下文设置this.base指向父类原型中的同名函数<BR>
// 然后调用函数prop[name]，返回函数结果<br><br>
// 注意：这里的自执行函数创建了一个上下文，这个上下文返回另一个函数，<BR>
// 此函数中可以应用此上下文中的变量，这就是闭包（Closure）。<BR>
// 这是JavaScript框架开发中常用的技巧。<BR>
F.prototype[name] = (function(name, fn) {<BR>
return function() {<BR>
this.base = baseClass.prototype[name];<BR>
return fn.apply(this, arguments);<BR>
};<BR>
})(name, prop[name]);<br><br>
} else {<BR>
F.prototype[name] = prop[name];<BR>
}<BR>
}<BR>
}<BR>
return F;<BR>
};<BR>
ログイン後にコピー
 var Person = jClass({<BR>
init: function(name) {<BR>
this.name = name;<BR>
},<BR>
getName: function() {<BR>
return this.name;<BR>
}<BR>
});<BR>
var Employee = jClass(Person, {<BR>
init: function(name, employeeID) {<BR>
this.base(name);<BR>
this.employeeID = employeeID;<BR>
},<BR>
getEmployeeID: function() {<BR>
return this.employeeID;<BR>
},<BR>
getName: function() {<BR>
return "Employee name: " + this.base();<BR>
}<BR>
});<br><br>
var zhang = new Employee("ZhangSan", "1234");<BR>
console.log(zhang.getName()); // "Employee name: ZhangSan"<BR>
ログイン後にコピー

これまでのところ、よりエレガントな方法で JavaScript でクラスと継承を実装するのに役立つ完全な関数 jClass を作成してきました。

次の章では、インターネット上で最も人気のある JavaScript クラスの実装と継承を続けて分析します。 ただし、すべては同じままであり、これらの実装は、よりエレガントな呼び出し方法を目的として、この章で説明した概念を揺るがす「誇大宣伝」にすぎません。

関連ラベル：
javascript 継承する
前の記事：カスタム スクロール バー 3.0_JavaScript のヒント 次の記事：プロトタイプ オブジェクト オブジェクト learning_prototype
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScriptのフック関数とは何ですか?
から 1970-01-01 08:00:00
0
0
0
JavaScriptで点と円の位置関係を実現する方法
から 1970-01-01 08:00:00
0
0
0
JavaScript ガベージ コレクションとは何ですか?
から 1970-01-01 08:00:00
0
0
0
javascript - console.log(["2","3"].push("1")) 結果が 3 になるのはなぜですか
から 1970-01-01 08:00:00
0
0
0
Javascript で乱数ジェネレーターをシードする
から 1970-01-01 08:00:00
0
0
0
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート