この記事では、JS オブジェクト指向プログラミングの詳細な手順を主に紹介し、JS オブジェクト指向をより詳しく学習するのに役立ちます。興味のある友人はそれを参照してください
序文
JavaScript の大きな世界で議論してください。オブジェクト指向については、次の 2 つの点に言及する必要があります。 1. JavaScript はプロトタイプに基づくオブジェクト指向言語です。 2. クラス言語をシミュレートするオブジェクト指向のアプローチ。クラス言語のオブジェクト指向の性質をシミュレートする必要がある理由について、私は個人的に次のように考えています: 場合によっては、プロトタイプ パターン は特定の利便性を提供できますが、複雑なアプリケーションでは、プロトタイプ ベースのオブジェクト指向システムは満足のいくものではありません。抽象化と継承の用語。 JavaScript は主要なブラウザでサポートされている唯一のスクリプト言語であるため、あらゆる分野の専門家が言語の利便性を向上させるためにさまざまな方法を使用する必要があり、最適化の結果、作成するコードはますますオブジェクト指向に近くなります。クラス言語のメソッドであるため、JavaScript プロトタイプ システムの本質も隠蔽されます。
プロトタイプに基づくオブジェクト指向言語
プロトタイプ パターンは、クラス パターンと同様、プログラミングのジェネリック、つまりプログラミング方法論です。また、最近人気の関数プログラミングもプログラミングジェネリックスの一種です。 JavaScript の父であるブレンダン・アイヒは、JavaScript を設計したとき、最初からクラスの概念を追加するつもりはなく、他の 2 つのプロトタイプベースの言語、Self と Smalltalk を利用しました。
どちらもオブジェクト指向言語であるため、オブジェクトを作成するメソッドが必要です。クラス言語では、まず、現実世界の抽象化としてオブジェクトが定義され、プロトタイプ言語では、オブジェクトが別のオブジェクトの複製によって作成されます。クローン化された親はプロトタイプ オブジェクトと呼ばれます。
クローン作成の鍵は、言語自体がネイティブのクローン作成方法を提供するかどうかです。 ECMAScript5 では、Object.create を使用してオブジェクトのクローンを作成できます。
var person = {
name: "tree",
age: 25,
say: function(){
console.log("I'm tree.")
}
};
var cloneTree = Object.create(person);
console.log(cloneTree);プロトタイプパターンの目的は、正確なオブジェクトを取得することではなく、オブジェクトを作成する便利な方法を提供することです（「JavaScriptデザインパターンと開発実践」より）。ただし、言語設計の問題により、JavaScript のプロトタイプには多くの矛盾があり、その複雑な構文の一部はクラスベース言語の構文に似ています (「JavaScript 言語の本質」より)。例:
function Person(name, age){
this.name = name;
this.age = age;
}
var p = new Person('tree', 25)実際、関数オブジェクトが作成されると、Function コンストラクターによって生成された関数オブジェクトは次のようなコードを実行します:
this.prototype = {constructor: this} 新しい関数オブジェクトには、prototype 属性が割り当てられます 、その値はコンストラクター プロパティを含むオブジェクトであり、プロパティ値は新しい関数です。関数で newoperator を使用する場合、関数のプロトタイプ属性の値が、新しいオブジェクトを複製するためのプロトタイプ オブジェクトとして使用されます。 new 演算子がメソッドの場合、その実行プロセスは次のとおりです:
Function.prorotype.new = function() {
//以prototype属性值作为原型对象来克隆出一个新对象
var that = Object.create(this.prorotype);
//改变函数中this关键指向这个新克隆的对象
var other = this.apply(that, arguments);
//如果返回值不是一个对象，则返回这个新克隆对象
return (other && typeof other === 'object') ? other : that;
}上記からわかるように、new 演算子を使用して関数を呼び出すのは、テンプレートのインスタンス化を使用してオブジェクトを作成するのと同じように見えますが、または、プロトタイプ オブジェクトを使用して新しいオブジェクトを複製します。
新しくクローンされたオブジェクトは、新しい演算子の特性と合わせて、プロトタイプ オブジェクトのすべてのメソッドとプロパティにアクセスできるため、これがプロトタイプを使用してクラス言語をシミュレートする基礎となっています。
プロトタイプを使用してクラス言語をシミュレートする
抽象
プロトタイプパターンを使用して、まず抽象的な方法でクラスをシミュレートします。 JavaScript言語の特性上、通常クラス(実際には疑似クラス)はコンストラクターにフィールドを配置することが多いです(実際にはnew演算子によって呼び出される関数であり、JavaScript自体にはコンストラクターという概念はありません)代わりに、関数のプロトタイプ属性にメソッドを配置します。
継承
继承是OO语言中的一个最为人津津乐道的概念。许多OO语言都支持两种继承方式：接口继承和实现继承。接口继承之继承方法签名，而实现继承则继承实际的方法。但是ECMAScript中无法实现接口继承，只支持实现继承，而且其实现继承主要是依靠原型链来实现的。（出自《JavaScript高级程序设计》 6.3节——继承）在高三中作者探索了各种关于继承的模拟，如：组合继承、原型继承、寄生继承、寄生组合继承，最终寄生组合式成为所有模拟类式继承的基础。
function Person(name, age) {
this.name = name;
this.age = age;
};
Person.prototype.say = function(){
console.log("Hello, I'm " + this.name);
};
function Employee(name, age, major) {
Person.apply(this, arguments);
this.major = major;
};
Employee.prototype = Object.create(Person.prototype);
Employee.prorotype.constructor = Employee;
Employee.prorotype.sayMajor = function(){
console.log(this.major);
}高三中只给出了单继承的解决方案，关于多继承的模拟我们还得自己想办法。由于多继承有其本身的困难：面向对象语言如果支持了多继承的话，都会遇到著名的菱形问题（Diamond Problem）。假设存在一个如左图所示的继承关系，O中有一个方法foo，被A类和B类覆写，但是没有被C类覆写。那么C在调用foo方法的时候，究竟是调用A中的foo，还是调用B中的foo？
所以大多数语言并不支持多继承，如Java支持单继承+接口的形式。JavaScript并不支持接口，要在一个不支持接口的语言上去模拟接口怎么办？答案是著名的鸭式辨型。放到实际代码中就是混入（mixin）。原理很简单：
function mixin(t, s) {
for (var p in s) {
t[p] = s[p];
}
}值得一提的是dojo利用MRO（方法解析顺序（Method Resolution Order），即查找被调用的方法所在类时的搜索顺序）方式解决了多继承的问题。
到此，我们已经清楚了模拟类语言的基本原理。作为一个爱折腾的程序员，我希望拥有自己的方式来简化类的创建：
最终，在借鉴各位大牛的知识总结，我编写了自己的类创建工具O.js:
(function(global) {
var define = global.define;
if (define && define.amd) {
define([], function(){
return O;
});
} else {
global.O = O;
}
function O(){};
O.derive = function(sub) {
debugger;
var parent = this;
sub = sub ? sub : {};
var o = create(parent);
var ctor = sub.constructor || function(){};//如何调用父类的构造函数？
var statics = sub.statics || {};
var ms = sub.mixins || [];
var attrs = sub.attributes || {};
delete sub.constructor;
delete sub.mixins;
delete sub.statics;
delete sub.attributes;
//处理继承关系
ctor.prototype = o;
ctor.prototype.constructor = ctor;
ctor.superClass = parent;
//利用DefineProperties方法处理Attributes
//for (var p in attrs) {
Object.defineProperties(ctor.prototype, attrs);
//}
//静态属性
mixin(ctor, statics);
//混入其他属性和方法，注意这里的属性是所有实例对象都能够访问并且修改的
mixin(ctor.prototype, sub);
//以mixin的方式模拟多继承
for (var i = 0, len = ms.length; i < len; i++) {
mixin(ctor.prototype, ms[i] || {});
}
ctor.derive = parent.derive;
//_super函数
ctor.prototype._super = function(f) {
debugger;
return parent.prototype[f].apply(this, Array.prototype.slice.call(arguments, 1));
}
return ctor;
}
function create(clazz) {
var F = function(){};
F.prototype = clazz.prototype;
//F.prototype.constructor = F; //不需要
return new F();
};
function mixin(t, s) {
for (var p in s) {
t[p] = s[p];
}
}
})(window);类创建方式如下：
var Person = O.derive({
constructor: function(name) {//构造函数
this.setInfo(name);
},
statics: {//静态变量
declaredClass: "Person"
},
attributes: {//模拟C#中的属性
Name: {
set: function(n) {
this.name = n;
console.log(this.name);
},
get: function() {
return this.name + "Attribute";
}
}
},
share: "asdsaf",//变量位于原型对象上，对所有对象共享
setInfo: function(name) {//方法
this.name = name;
}
});
var p = new Person('lzz');
console.log(p.Name);//lzzAttribute
console.log(Person);继承：
var Employee = Person.derive({//子类有父类派生
constructor: function(name, age) {
this.setInfo(name, age);
},
statics: {
declaredClass: "Employee"
},
setInfo: function(name, age) {
this._super('setInfo', name);//调用父类同名方法
this.age = age;
}
});
var e = new Employee('lll', 25);
console.log(e.Name);//lllAttribute
console.log(Employee);以上就是本文的全部内容，希望对大家的学习有所帮助。
以上がJSオブジェクト指向プログラミングの詳しい解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
