当前位置:17727 > www.17727.com > Accessor实现说明_javascript技巧_脚本之家,JavaScri

Accessor实现说明_javascript技巧_脚本之家,JavaScri

文章作者:www.17727.com 上传时间:2019-12-26

首先种算是相比较普及了,通过闭包Store Value进而完结accessor,适用于具备浏览器. 复制代码 代码如下: function Sandy{ var value = val; this.getValue = function(卡塔尔(英语:State of Qatar){ return value; }; this.setValue = function{ value = val; }; } //usage var sandy = new Sandy; sandy.value // => undefined sandy.setValue sandy.getValue 下边是JavaScript权威指南开中学P152页使用闭包的一个例子. 复制代码 代码如下: function makeProperty { var value; //This is property value; //The setter method simply returns the value o['get' + name] = function() { return value;}; //The getter method stores the value or throws an exception if //the predicate rejects the value o['set' + name] = function { if (predicate && !predicate { throw 'set' + name + ': invalid value ' + v; } else { value = y; } } } //The following code demenstrates the makeProperty(卡塔尔(英语:State of Qatar) method var o = {}; // Here is an empty object //Add property accessor methods getName and setName //Ensure that only string values are allowed makeProperty(o, 'Name', function { return typeof x == 'string'; }卡塔尔; o.setName; //Set the property value; print; //Get the property value o.setName; //Try to set a value of the wrong type 第三种办法是运用__defineSetter__与__defineGetter__来落实accessor,看下划线就理解它们并非标准,适用于Firefox 2.0+, Safari 3.0+, 谷歌(Google卡塔尔(قطر‎ Chrome 1.0+ 和 Opera 9.5+ ,方法运用见MDN.复制代码 代码如下: function Sandy{ var value = val, _watch = function { console.log('val is Changed to : ' + newVal); } this.__defineGetter__{ return value; }); this.__defineSetter__("value", function{ value = val; _watch; } var sandy = new Sandy; sandy.value // => test sandy.value = "test2"; // => 'val is Changed to : test2' sandy.value // => "test2" 除了__defineG/Setter__外, 你仍然是能够行使'set'、'get'关键字在在原型对象上定义accessor,对于单个对象同样适用, 适用于Firefox 2.0+, Safari 3.0+, 谷歌 Chrome 1.0+ 和 Opera 9.5+. 复制代码 代码如下: function Sandy{ this.value = val; } Sandy.prototype = { get value(卡塔尔{ return this._value; }, set value{ this._value = val; } }; //Or var sandy = { '_value' : 'sandy', get value() { return this._value; }, set value { this._value = val; } } 最终生龙活虎种艺术,用到了Object的静态方法defineProperty,效用于单个对象,该方法应该归属ES5的范围了,近年来似乎独有Chrome 帮衬这种形式,其实Ie8也支撑,但操作对象只限于Dom节点,见IEBlog,该措施的选拔见MDN.复制代码 代码如下: var sandy = {}, rValue; Object.defineProperty(sandy, 'value' , { 'set' : function { rValue = val; }, 'get' : function(卡塔尔国 { return rValue; }, 'enumerable' : true, 'configurable' : true } 卡塔尔国 //Ie8+ Object.defineProperty(document.body, "description", { get : function (卡塔尔(英语:State of Qatar) { return this.desc; }, set : function { this.desc = val; } }卡塔尔国; document.body.description = "Content container"; // document.body.description will now return "Content container" ‘enumerable','configuralbe' 归于ES5正规中的Property Attributes,在这里处就不做探讨了,风野趣的Google或许直接去看ES5的文书档案. ^ ^

正式的Get和Set访问器的落到实处

复制代码 代码如下:

function Field(val){
this.value = val;
}
Field.prototype = {
get value(){
return this._value;
},
set value(val){
this._value = val;
}
};
var field = new Field("test");
field.value="test2";
//field.value will now return "test2"

在如下浏览器能符合规律职业:

www.17727.com 1

我们常用的兑现格局或许是如此的:

复制代码 代码如下:

function Field(val){
var value = val;

this.getValue = function(){
return value;
};

this.setValue = function(val){
value = val;
www.17727.com,};
}
var field = new Field("test");
field.setValue("test2")
field.getValue() // return "test2"

在DOM成分上Get和Set访谈器的落实

复制代码 代码如下:

HTMLElement.prototype.__defineGetter__("description", function () {
return this.desc;
});
HTMLElement.prototype.__defineSetter__("description", function (val) {
this.desc = val;
});
document.body.description = "Beautiful body";
// document.body.description will now return "Beautiful body";

在如下浏览器能健康办事:

www.17727.com 2

 

经过Object.defineProperty完结访谈器

  现在ECMAScript标准的增加对象的方法会通过Object.defineProperty来兑现,那也是干吗IE8正是通过这种措施来得以完成get和set访问器,看来微软如故很有崇论宏议的,缺憾的是近来独有IE8+和Chrome 5.0+帮助,此外的浏览器都不补助,何况IE8+也只扶助DOM成分,不过今后的本子将和Chrome同样帮忙普通的Javascript对象。
DOM成分上的Get和Set访谈器的得以完结

复制代码 代码如下:

Object.defineProperty(document.body, "description", {
get : function () {
return this.desc;
},
set : function (val) {
this.desc = val;
}
});
document.body.description = "Content container";
// document.body.description will now return "Content container"

在如下浏览器能健康办事:

www.17727.com 3

经常性对象的Get和Set访谈器的贯彻

复制代码 代码如下:

var lost = {
loc : "Island"
};
Object.defineProperty(lost, "location", {
get : function () {
return this.loc;
},
set : function (val) {
this.loc = val;
}
});
lost.location = "Another island";
// lost.location will now return "Another island"

在如下浏览器能平常职业:

www.17727.com 4

正文化总同盟结

  就算微软的IE只是支撑了Object.defineProperty,未有完备的得以达成Get和Set访问器,可是大家早已看见了IE有了一点都不小的提高,极其是刚揭橥的IE9使用的新的javascript引擎,援救HTML5和CSS3,帮助硬件加快等等,相信有一天各种浏览器都能一心拥抱标准,带来三个圆满的WEB世界。

参照他事他说加以侦察文献:

  1. Getters and setters with JavaScript
  2. JavaScript Getters and Setters

作者:梦想

复制代码 代码如下: function Field(val卡塔尔{ this.value = val; } Field.prototype = { get value(卡塔尔(英语:State of Qatar){ return this._value; }, set value(val){ this...

本文由17727发布于www.17727.com,转载请注明出处:Accessor实现说明_javascript技巧_脚本之家,JavaScri

关键词: