Javascript中定义setter和getter的样式之间的区别
[英]Difference between style of defining setter and getter in Javascript
问题描述
I was exploring setter and getter in JavaScript: 
我在JavaScript中探索setter和getter：
CODE1: CODE1：
http://jsfiddle.net/imrukhan/7j8ZS/3/ http://jsfiddle.net/imrukhan/7j8ZS/3/
ref : http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/ 参考： 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: CODE2：
http://jsfiddle.net/imrukhan/9H2U6/1/ http://jsfiddle.net/imrukhan/9H2U6/1/
ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers 参考： 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>
My Queries: 我的查询：
1) Is there any functional difference between CODE1 & CODE2 except style ? 1）除风格外，CODE1和CODE2之间是否存在功能差异？
2) What is the best way to define a Setter and Getter in JavaScipt (CODE1 /CODE2 /Please suggest any other)? 2）在JavaScipt中定义Setter和Getter的最佳方法是什么（CODE1 / CODE2 /请另外建议）？
Thanks for the help. 谢谢您的帮助。
2 个解决方案
解决方案1
1 2014-05-16 13:07:44
One thing you should consider in the code is: 您应该在代码中考虑的一件事是：
In CODE1 each instance of the Person will have own methods for getter and setter. 在CODE1中，Person的每个实例都有自己的getter和setter方法。 It means if you create 10 persons, you will have 20 methods for getters and setters. 这意味着如果你创建了10个人，那么你将拥有20种getter和setter的方法。
While in CODE2 it will create only one getter and one setter methods that will be shared by all instances of Person. 在CODE2中，它将只创建一个getter和一个setter方法，这些方法将由Person的所有实例共享。
So if you're going for Web/App that can create lots of instances, you should definitely go with the CODE2. 因此，如果您要使用可以创建大量实例的Web / App，那么您肯定应该使用CODE2。
解决方案2
0 2014-05-16 16:46:57
CODE1 uses the ECMA5 standard if available otherwise falls back to the non-standard. 如果可用，CODE1使用ECMA5标准，否则将退回到非标准。
CODE2 uses the ECMA5 standard only. CODE2仅使用ECMA5标准。
Best depends on the environment you are coding for, wider browser support or just ECMA5. 最好取决于您编写的环境，更广泛的浏览器支持或仅ECMA5。
I believe the following three links should give you all the information that you require. 我相信以下三个链接应该为您提供所需的所有信息。
Defining getters and setters 定义getter和setter
Sure there are many ways of writing your example codes in other manners, 2 examples. 当然，有很多方法可以用其他方式编写示例代码，例如2个。
Variation of CODE1, (feature detect once, assign to prototype ) 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;
});
Variation of CODE2 (without defineProperty ) 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;
}
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.