ホームページ > 記事 > ウェブフロントエンド > JavaScript はオブジェクトの 3 つの主要な特性 (カプセル化、継承、ポリモーフィズム) に基づいています_JavaScript スキル
JavaScript はオブジェクトの 3 つの主要な特性 (カプセル化、継承、ポリモーフィズム) に基づいています_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:22:091615ブラウズ
JavaScript の 3 つの主要なオブジェクトベースの特性は、C++ および Java の 3 つの主要なオブジェクト指向特性 (カプセル化、継承、ポリモーフィズム) と同じです。実装方法が異なるだけで、基本的な考え方はほぼ同じです。実際、オブジェクト指向の 3 つの主要な特徴に加えて、抽象と呼ばれるもう 1 つの共通の特徴があり、書籍によってはオブジェクト指向の 4 つの主要な特徴を見かけることがあります。
1. カプセル化
カプセル化とは、抽象化されたデータとそのデータに対する操作を一緒にカプセル化することです。データは内部的に保護されており、プログラムの他の部分は承認された操作 (メンバー メソッド) を通じてのみデータを操作できます。
ケース:
<html>
<head>
<script type="text/javascript">
function Person(name, agei, sal){
// 公开
this.name = name;
// 私有
var age = agei;
var salary = sal;
}
var p1 = new Person('zs', 20, 10000);
window.alert(p1.name + p1.age);
</script>
</head>
<body>
</body>
</html>
追記: JS カプセル化には 2 つの状態しかなく、1 つはパブリック、もう 1 つはプライベートです。
コンストラクターを使用したメンバー メソッドの追加とプロトタイプ メソッドを使用したメンバー メソッドの追加の違い
1. プロトタイプメソッドで割り当てられた関数は、すべてのオブジェクトで共有されます。
2. プロトタイプメソッドで割り当てられた属性は独立しています (属性を変更しない場合は共有されます)
3. すべてのオブジェクトで同じ関数を使用する場合は、プロトタイプ メソッドを使用して関数を追加するのが最善であり、メモリを節約することができます。
function Person(){
this.name="zs";
var age=20;
this.abc=function(){
window.alert("abc");
}
function abc2(){
window.alert("abc");
}
}
Person.prototype.fun1=function(){
window.alert(this.name);//ok
//window.alert(age);//no ok
//abc2();//no ok
this.abc();//ok
}
var p1=new Person();
p1.fun1();
2. 継承
継承はコードの再利用を解決し、プログラミングを人間の思考に近づけることができます。複数のクラスが同じ属性 (変数) とメソッドを持つ場合、これらのクラスから親クラスを抽象化し、同じ属性とメソッドを親クラスで定義することができます。すべてのサブクラスはこれらの属性とメソッドを再定義する必要はありません。および親クラスのメソッド。
JS で継承を実装する方法
1. オブジェクトのなりすまし
ケース:
<html>
<head>
<script type="text/javascript">
function Stu(name, age){
this.name = name;
this.age = age;
this.show = function(){
window.alert(this.name + " " + this.age);
}
}
function MidStu(name, age) {
this.stu = Stu;
// 通过对象冒充来实现继承的
// 对象冒充的意思就是获取那个类的所有成员，因为js是谁调用那个成员就是谁的，这样MidStu就有了Stu的成员了
this.stu(name, age);
this.payFee = function(){
window.alert("缴费" + money * 0.8);
}
}
function Pupil(name, age) {
this.stu = Stu;
// 通过对象冒充来实现继承的
this.stu(name, age);
this.payFee = function(){
window.alert("缴费" + money * 0.5);
}
}
var midStu = new MidStu("zs", 13);
midStu.show();
var pupil = new Pupil("ls", 10);
pupil.show();
</script>
</head>
<body>
</body>
</html>
2. 電話または申し込みを通じて
ケース:
<html>
<head>
<script type="text/javascript">
//1. 把子类中共有的属性和方法抽取出，定义一个父类Stu
function Stu(name,age){
// window.alert("确实被调用.");
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+"年龄是="+this.age);
}
}
//2.通过对象冒充来继承父类的属性的方法
function MidStu(name,age){
//这里这样理解: 通过call修改了Stu构造函数的this指向,
//让它指向了调用者本身.
Stu.call(this,name,age);
//如果用apply实现，则可以
//Stu.apply(this,[name,age]); //说明传入的参数是 数组方式
//可以写MidStu自己的方法.
this.pay=function(fee){
window.alert("你的学费是"+fee*0.8);
}
}
function Pupil(name,age){
Stu.call(this,name,age);//当我们创建Pupil对象实例,Stu的构造函数会被执行,当执行后，我们Pupil对象就获取从 Stu封装的属性和方法
//可以写Pupil自己的方法.
this.pay=function(fee){
window.alert("你的学费是"+fee*0.5);
}
}
//测试
var midstu=new MidStu("zs",15);
var pupil=new Pupil("ls",12);
midstu.show();
midstu.pay(100);
pupil.show();
pupil.pay(100);
</script>
</html>
1. JS オブジェクトはオブジェクトを通じて偽装され、多重継承を実現できます
2. Object クラスはすべての Js クラスの基本クラスです
3. ポリモーフィズム
JS 関数のオーバーロード
これはポリモーフィズムの基礎です。前述の Javascript の紹介で述べたように、JS 関数はポリモーフィズムをサポートしません。しかし実際には、JS 関数はステートレスであり、任意の長さと型のパラメーター リストをサポートします。同じ名前の関数が同時に複数定義されている場合は、最後の関数が優先されます。
ケース:
<html>
<head>
<script type="text/javascript">
//*****************说明js不支持重载*****
/*function Person(){
this.test1=function (a,b){
window.alert('function (a,b)');
}
this.test1=function (a){
window.alert('function (a)');
}
}
var p1=new Person();
//js中不支持重载.
//但是这不会报错，js会默认是最后同名一个函数，可以看做是后面的把前面的覆盖了。
p1.test1("a","b");
p1.test1("a");*/
//js怎么实现重载.通过判断参数的个数来实现重载
function Person(){
this.test1=function (){
if(arguments.length==1){
this.show1(arguments[0]);
}else if(arguments.length==2){
this.show2(arguments[0],arguments[1]);
}else if(arguments.length==3){
this.show3(arguments[0],arguments[1],arguments[2]);
}
}
this.show1=function(a){
window.alert("show1()被调用"+a);
}
this.show2=function(a,b){
window.alert("show2()被调用"+"--"+a+"--"+b);
}
function show3(a,b,c){
window.alert("show3()被调用");
}
}
var p1=new Person();
//js中不支持重载.
p1.test1("a","b");
p1.test1("a");
</script>
</html>
ポリモーフィズムとは、さまざまな状況における参照 (型) の複数の状態を指します。これは、次のように理解することもできます。 ポリモーフィズムは、親クラスを指す参照を通じて、さまざまなサブクラスに実装されたメソッドを呼び出すことを指します。
ケース:
<script type="text/javascript">
// Master类
function Master(name){
this.nam=name;
//方法[给动物喂食物]
}
//原型法添加成员函数
Master.prototype.feed=function (animal,food){
window.alert("给"+animal.name+" 喂"+ food.name);
}
function Food(name){
this.name=name;
}
//鱼类
function Fish(name){
this.food=Food;
this.food(name);
}
//骨头
function Bone(name){
this.food=Food;
this.food(name);
}
function Peach(name){
this.food=Food;
this.food(name);
}
//动物类
function Animal(name){
this.name=name;
}
//猫猫
function Cat(name){
this.animal=Animal;
this.animal(name);
}
//狗狗
function Dog(name){
this.animal=Animal;
this.animal(name);
}
//猴子
function Monkey(name){
this.animal=Animal;
this.animal(name);
}
var cat=new Cat("猫");
var fish=new Fish("鱼");
var dog=new Dog("狗");
var bone=new Bone("骨头");
var monkey=new Monkey("猴");
var peach=new Peach("桃");
//创建一个主人
var master=new Master("zs");
master.feed(dog,bone);
master.feed(cat,fish);
master.feed(monkey,peach);
</script>
以上がオブジェクトに基づく Javascript の 3 つの主な特徴です。皆さんの学習に役立つことを願っています。