javascript - Javascript 中 setter 和 getter 定义风格的区别

转载作者：塔克拉玛干更新时间：2023-11-02 21:32:47

25

4

我正在探索 JavaScript 中的 setter 和 getter:

代码1:

http://jsfiddle.net/imrukhan/7j8ZS/3/

引用:http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/

<html>
    <head>
        <script>
            var Person = function(name){
                this.name = name;
                defineGetter(this, "Name", function() {
                    console.log("inside getter method");
                    return this.name;
                }); 
                defineSetter(this, "Name", function(val) {
                    console.log("inside setter method");
                    this.name = val;
                }); 
            }
            function accessorDescriptor(field, fun) {
              var desc = { enumerable: true, configurable: true };
              desc[field] = fun;
              return desc;
            }

            function defineGetter(obj, prop, get) {

                if (Object.defineProperty)
                    return Object.defineProperty(obj, prop, accessorDescriptor("get", get));
                if (Object.prototype.__defineGetter__)
                    return obj.__defineGetter__(prop, get);

                throw new Error("browser does not support getters");
            }

            function defineSetter(obj, prop, set) {

                if (Object.defineProperty)
                    return Object.defineProperty(obj, prop, accessorDescriptor("set", set));
                if (Object.prototype.__defineSetter__)
                    return obj.__defineSetter__(prop, set);

                throw new Error("browser does not support setters");
            }

            function fun(){
                var per = new Person("ABC");
                console.log(per.Name);
                per.Name = "XYZ";
                console.log(per.Name);
            }

        </script>
    </head>
    <body>
        <input type="button" value="click" onclick="fun()"/>
    </body>
</html>

代码2:

http://jsfiddle.net/imrukhan/9H2U6/1/

引用:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers

<!DOCTYPE HTML>

<html>
    <head>
        <script>
            var Person = function(name) {
                this._name = name;
            };

            Object.defineProperty(Person.prototype, "name", {
                get: function() {
                    console.log("inside getter method");
                    return this._name;
                },
                set: function(val){
                    console.log("inside setter method");
                    this._name = val;
                }
            });

            function fun(){
                var per = new Person("ABC");
                console.log(per.name);
                per.name = "XYZ";
                console.log(per.name);
            }

        </script>
    </head>
    <body>
        <input type="button" value="click" onclick="fun()"/>
    </body>
</html>

我的查询:
1) CODE1 和 CODE2 除了样式外，在功能上有什么区别吗？
2) 在 JavaScipt 中定义 Setter 和 Getter 的最佳方法是什么(CODE1/CODE2/请提出其他建议)？

感谢您的帮助。

最佳答案

您应该在代码中考虑的一件事是:

在 CODE1 中，Person 的每个实例都有自己的 getter 和 setter 方法。这意味着如果你创建 10 个人，你将有 20 个 getter 和 setter 方法。

而在 CODE2 中，它将只创建一个 getter 和一个 setter 方法，这些方法将由 Person 的所有实例共享。

因此，如果您要使用可以创建大量实例的 Web/应用程序，那么您绝对应该选择 CODE2。

关于javascript - Javascript 中 setter 和 getter 定义风格的区别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23693887/

25

4

0

文章推荐： javascript - 带有动态命名 View 的 ui-router ng-repeat

文章推荐： javascript - 使用 promises 链接多个 ajax 请求

文章推荐： javascript - 使用 bootstrap 时关闭 $routeprovider

文章推荐： javascript - 如何从 grunt 任务运行 node_modules 中的脚本？

getter - 在类方法中使用 getter
如果您有一个具有一些普通 get/set 属性的类，是否有任何理由在类方法中使用 getter，或者您应该只使用私有(private)成员变量？我认为关于setter(验证逻辑？)可能会有更多争论，但
Java- setter/getter 的最佳实践，单个 setter/getter 或不同变量的多个 setter/getter ？
我是 Android 编程的新手(~ 2 个月)有必要为几十个不同的变量设置 getter 吗？例如—— //Yes I realise that this isn't 'dozens' publi
javascript - 当商店被拆分成模块时，在 VUEX 商店中出现错误 Uncaught Error : [vuex] getters should be function but "getters.getters" is {}.
我是VUEX新手，在学习VUEX的同时搭建了一个测试应用。我已将我的 VUEX 存储拆分为多个模块，每个模块都有自己的 getter.js 文件。 Getters、 Action 、突变被导入到每个模
Angular 5 : Service Getter Why Double Arrow if Referenced to Getter instead of Calling Getter Directly
我有一项服务正在加载我想在多个组件之间共享的基本系统信息。如果我在 getter 中创建一个 getter 方法 this 如果我不在服务中使用双箭头，则 getter 中的 this 成为组件的
javascript - 从参数化的 getter 访问 getter
tl;博士如何从参数化的 getter 访问其他 getter？通常可以使用this.myGetter ;但是参数化的 getter 被实现为箭头函数，其中 this未定义。在 Pinia 中处
java - 使用一个带参数的 getter，而不是使用多个不带参数的 getter
我第一次尝试做一些 OOP，这不是简单的练习，而是用 java 编写一个程序来存储有关人员的信息(如通讯录)。下面是我正在开发的名为 Person 的类的片段。 Person 将在将来的某个时间被其他
c#: setter/getter / setter/getter
我在某处看到类似下面的内容，想知道它是什么意思。我知道他们是getter和setter，但是想知道为什么字符串Type是这样定义的。谢谢你帮助我。 public string Type { get;
Java 语言约定； setter/getter / setter/getter
Public class Example { private int number; public Example(int number){ this.number =
java - 对象的 getter 与基元的 getter 有什么不同吗？
getter 应该只返回对象吗: public MyObject getMyObject() { return myObject; } 或者它应该复制它返回的对象并返回该副本？ public
java - 每个统计数据的 Enum-getter 与 Getter
我目前正在处理大量数据输入，包括很多值，我希望在 getter 中接收这些值以供以后使用。在编写了一些方法之后，我想知道仅使用一个 get 方法是否是一个更好的主意，并使用一个包含所有可能值的枚举类
javascript - 扩展类的属性，扩展类的 Getter。永远不会调用 Getter
我正在使用新的 Class Public Field Declarations可用 Chrome 72我遇到了这种真正奇怪的行为: class Extended { property = 5; }
c# - 将通用 getter 表达式转换为对象 getter 表达式
我有一个这样的表达式 setter/getter : var expression = () => SomeInstance.Nr; 它被传递到一个方法中: public void AddExpres
尽管删除了 getter，Javascript 还是不允许我设置只有 getter 的属性
我的一个类(class)中有以下 getter: get password(){ if(this._public) return null; var text = ""
javascript - 单元测试依赖于其他 getter 的 Vuex getter
我已经设法测试了与其他代码隔离的 Vuex getter。当 getter 依赖于其他 getter 时，我现在面临一些问题，请参见以下示例: getters.js export const gett
c++ - 在 getter 中对嵌套 getter 结果进行扁平化的最佳方法
有时我的任务是查找 getter 返回的值中的某些嵌套 getter 是否具有某些属性。经典的 C++ 会是这样的: for (const auto& label: labels) for (co
c# - 在覆盖属性的 Getter 中调用 "Base-Getter"
我有一个像这样的基类“Parent”: using System; using System.Collections.Generic; using System.Text; namespace Con
javascript - 傻瓜 setter/getter \ setter/getter
我一直在努力了解 getter 和 setter，但没有深入了解。我读过 JavaScript Getters and Setters和 Defining Getters and Setters只是没
vuejs2 - 在 Vuex 中如何从另一个 getter 调用一个 getter？
考虑一个简单的 Vue 博客: 我使用 Vuex 作为我的数据存储，我需要设置两个 getters :一个 getPost getter，用于通过 ID 检索 post，以及一个 listFeatur
javascript - 为什么我必须从一个模块传播 Vuex getter，而不是从另一个模块传播 Vuex getter？
我有一个 VueX 商店，有两个模块，user.js 和merchant.js，顶层是index.js。 user.js 中的 getter 是: 重构 const getters = { s
java - 有 getter 时没有 Getter Method Error
我正在尝试向 jsp 添加一个复选框以在进入站点之前接受条款和条件。尽管我有一个 getter 方法并且没有看到任何拼写错误，但我一直收到关于没有 getter 方法的相同错误。我不明白我错过了什么。

首页

博学

6Ren·AI

商城

javascript - Javascript 中 setter 和 getter 定义风格的区别

代码1:

代码2: