JavaScript教程-JavaScript封装

JavaScript封装是将数据（即变量）与作用于该数据的函数绑定在一起的过程。它允许我们控制数据并对其进行验证。要在JavaScript中实现封装，可以遵循以下几个步骤：

• 使用var关键字将数据成员声明为私有。
• 使用setter方法设置数据，使用getter方法获取数据。

封装允许我们使用以下属性来处理对象：

读/写 - 在这种情况下，我们使用setter方法来写入数据，使用getter方法来读取数据。

只读 - 在这种情况下，我们只使用getter方法。

只写 - 在这种情况下，我们只使用setter方法。

JavaScript封装示例

让我们看一个包含两个数据成员及其setter和getter方法的封装的简单示例。

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());

输出：

John 80

JavaScript封装示例：验证

在这个示例中，我们验证了学生的分数。

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); // 弹出警告
document.writeln(stud.getName() + " " + stud.getMarks());

输出：

John undefined

JavaScript封装示例：基于原型的方法

在这个示例中，我们使用基于原型的方法进行封装。

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);

输出：

John 80