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