ECMAScript 2017 是 JavaScript 的一个版本,它包含了许多重要的技术改进,其中包括 getter 和 setter。getter 和 setter 是一种对象属性访问的方式,可以帮助开发人员更好地控制他们的对象属性。在这篇文章中,我们将向您介绍 ECMAScript 2017 中的 getter 和 setter,内容详细且有深度和学习以及指导意义,并包含示例代码。
对象属性的默认访问方式
在 JavaScript 中,我们可以使用点号语法或方括号语法访问对象的属性。例如:
var person = { name: 'John', age: 30 }; console.log(person.name); // 输出 'John'
在上面的代码中,我们使用了点号语法来访问 person
对象的 name
属性。这是访问对象属性的默认方式。
使用 getter 和 setter 控制对象属性的访问
getter 和 setter 允许我们更好地控制对象属性的访问。getter 是一个用于获取属性值的函数,而 setter 是一个用于设置属性值的函数。使用 getter 和 setter,我们可以在对象属性访问前和访问后执行自定义的代码。
getter 和 setter 需要使用 get
和 set
关键字定义。例如:
-- -------------------- ---- ------- --- ------ - - ------ ------- --- ------ - -------------------- ------- ------ ----------- -- --- ----------- - -------------------- ---- -- ---- ------- ---------- - ------ - --
在上面的代码中,我们定义了一个 person
对象,它有一个 _name
属性和一个 name
访问器。name
访问器定义了一个 getter 和一个 setter,用于获取和设置 _name
属性的值。
现在,我们可以使用 person.name
访问器来访问 person
对象的 name
属性。例如:
console.log(person.name); // 输出 'Getting name' 和 'John' person.name = 'Mike'; // 输出 'Setting name to Mike' console.log(person.name); // 输出 'Getting name' 和 'Mike'
在上面的代码中,我们使用 person.name
访问器访问了 person
对象的 name
属性,并执行了 getter 函数。然后,我们使用 person.name
访问器设置了 person
对象的 name
属性,并执行了 setter 函数。最后,我们再次使用 person.name
访问器访问了 person
对象的 name
属性,并再次执行了 getter 函数。在执行这些操作时,getter 和 setter 函数分别输出它们的日志。
示例代码
下面是一个使用 getter 和 setter 的完整示例代码:
-- -------------------- ---- ------- ----- ------ - ----------------- - ---------- - ----- - --- ------ - -------------------- ------- ------ ------------------------- - --- ----------- - -------------------- ---- -- ---- ------- ---------- - -------------------- - -- --- ------ - --- --------------- ------------------------- -- -- -------- ----- - ------ ----------- - ------- -- -- -------- ---- -- ----- ------------------------- -- -- -------- ----- - ------
在上面的代码中,我们定义了一个 Person
类,它有一个 _name
属性和一个 name
访问器。name
访问器定义了一个 getter 和一个 setter,用于获取和设置 _name
属性的值。在定义 name
访问器时,我们在 getter 函数中使用了 toUpperCase()
方法将 _name
属性的值转换为大写字母,在 setter 函数中使用了 toLowerCase()
方法将传递的值转换为小写字母。
然后,我们创建了一个 person
对象,将其名称设置为 John
。我们使用 person.name
访问器访问了 person
对象的 name
属性,并执行了 getter 函数。然后,我们使用 person.name
访问器设置了 person
对象的 name
属性,并执行了 setter 函数。最后,我们再次使用 person.name
访问器访问了 person
对象的 name
属性,并再次执行了 getter 函数。在执行这些操作时,getter 和 setter 函数分别输出它们的日志。
总结
使用 getter 和 setter,可以更好地控制对象属性的访问。getter 是一个用于获取属性值的函数,而 setter 是一个用于设置属性值的函数。getter 和 setter 需要使用 get
和 set
关键字定义。当访问属性时,将自动调用 setter 或 getter。
在您的代码中使用 getter 和 setter 可以使代码更加清晰和易于维护。如果您需要对对象属性进行更多的控制,建议尝试使用 getter 和 setter。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64f70e0ff6b2d6eab3f9cc6c