Javascript中定義setter和getter的樣式之間的區別

Question

我在JavaScript中探索setter和getter：

CODE1：

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>

CODE2：

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 /請另外建議）？

謝謝您的幫助。

Answer 1

您應該在代碼中考慮的一件事是：

在CODE1中，Person的每個實例都有自己的getter和setter方法。 這意味着如果你創建了10個人，那么你將擁有20種getter和setter的方法。

在CODE2中，它將只創建一個getter和一個setter方法，這些方法將由Person的所有實例共享。

因此，如果您要使用可以創建大量實例的Web / App，那么您肯定應該使用CODE2。

Answer 2

如果可用，CODE1使用ECMA5標准，否則將退回到非標准。

CODE2僅使用ECMA5標准。

最好取決於您編寫的環境，更廣泛的瀏覽器支持或僅ECMA5。

我相信以下三個鏈接應該為您提供所需的所有信息。

defineGetter

defineProperty

定義getter和setter

當然，有很多方法可以用其他方式編寫示例代碼，例如2個。

CODE1的變化，（特征檢測一次，分配給prototype ）

var defineGetter,
    defineSetter;

function accessorDescriptor(field, fun) {
    var desc = {
        enumerable: true,
        configurable: true
    };

    desc[field] = fun;
    return desc;
}

if (Object.defineProperty) {
    defineGetter = function defineGetter(obj, prop, get) {
        return Object.defineProperty(obj, prop, accessorDescriptor("get", get));
    };

    defineSetter = function (obj, prop, set) {
        return Object.defineProperty(obj, prop, accessorDescriptor("set", set));
    };
} else {
    if (Object.prototype.__defineGetter__) {
        defineGetter = function (obj, prop, get) {
            return obj.__defineGetter__(prop, get);
        };
    } else {
        throw new Error("browser does not support getters");
    }

    if (Object.prototype.__defineSetter__) {
        defineSetter = function (obj, prop, set) {
            return obj.__defineSetter__(prop, set);
        };
    } else {
        throw new Error("browser does not support setters");
    }
}

function Person(name) {
    this.name = name;
};

defineGetter(Person.prototype, "Name", function () {
    console.log("inside getter method");
    return this.name;
});

defineSetter(Person.prototype, "Name", function (val) {
    console.log("inside setter method");
    this.name = val;
});

CODE2的變化（沒有defineProperty ）

var Person = function (name) {
    this.name = name;
};

Person.prototype.name = {
    get: function () {
        console.log("inside getter method");
        return this.name;
    },

    set: function (val) {
        console.log("inside setter method");
        this.name = val;
    }
};

Javascript中定義setter和getter的樣式之間的區別

問題描述

CODE1：

CODE2：

2 個解決方案

解決方案1
1 2014-05-16 13:07:44

解決方案2
0 2014-05-16 16:46:57

Javascript中定義setter和getter的樣式之間的區別

問題描述

CODE1：

CODE2：

2 個解決方案

解決方案1 1 2014-05-16 13:07:44

解決方案2 0 2014-05-16 16:46:57

解決方案1
1 2014-05-16 13:07:44

解決方案2
0 2014-05-16 16:46:57