JavaScript 封装

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

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程