JavaScript封装
JavaScript封装是将数据(即变量)与作用于该数据的函数绑定在一起的过程。它使我们能够控制数据并进行验证。要在JavaScript中实现封装,请执行以下操作:-
使用var关键字将数据成员设为私有。
使用setter方法设置数据并使用getter方法获取数据。
通过封装,我们可以使用以下属性来处理对象:
读/写-在这里,我们使用setter方法写入数据并获取getter方法读取该数据。
只读-在这种情况下,我们仅使用getter方法。
仅写入-在在这种情况下,我们仅使用setter方法。
JavaScript封装示例
让我们看一个简单的封装示例,其中包含两个带有setter和getter方法的数据成员。
<script>
class Student
{
constructor()
{
var name;
var marks;
}
getName()
{
return this.name;
}
setName(name)
{
this.name=name;
}
getMarks()
{
return this.marks;
}
setMarks(marks)
{
this.marks=marks;
}
}
var stud=new Student();
stud.setName("John");
stud.setMarks(80);
document.writeln(stud.getName()+" "+stud.getMarks());
</script>
输出:
John 80
JavaScript封装示例:验证
在此示例中,我们验证学生的分数。
<script>
class Student
{
constructor()
{
var name;
var marks;
}
getName()
{
return this.name;
}
setName(name)
{
this.name=name;
}
getMarks()
{
return this.marks;
}
setMarks(marks)
{
if(marks<0||marks>100)
{
alert("Invalid Marks");
}
else
{
this.marks=marks;
}
}
}
var stud=new Student();
stud.setName("John");
stud.setMarks(110); //alert() invokes
document.writeln(stud.getName()+" "+stud.getMarks());
</script>
输出:
John undefined
JavaScript封装示例:基于原型的方法
在这里,我们执行基于原型的封装。
<script>
function Student(name,marks)
{
var s_name=name;
var s_marks=marks;
Object.defineProperty(this,"name",{
get:function()
{
return s_name;
},
set:function(s_name)
{
this.s_name=s_name;
}
});
Object.defineProperty(this,"marks",{
get:function()
{
return s_marks;
},
set:function(s_marks)
{
this.s_marks=s_marks;
}
});
}
var stud=new Student("John",80);
document.writeln(stud.name+" "+stud.marks);
</script>
输出:
John 80