Getters \ setters for dummiesJavaScript 中的 Getters 和 Setters

2022-08-30 04:04:27

我一直试图让我的头脑围绕着拦网和二传手,它不会沉沦。我已经阅读了JavaScript Getters和Setters以及Defination Getters和Setters,只是没有得到它。

有人可以清楚地说明:

  1. 一个击球手和二传手应该做什么,以及
  2. 举一些非常简单的例子?

答案 1

除了@millimoose的答案之外,setter还可用于更新其他值。

function Name(first, last) {
    this.first = first;
    this.last = last;
}

Name.prototype = {
    get fullName() {
        return this.first + " " + this.last;
    },

    set fullName(name) {
        var names = name.split(" ");
        this.first = names[0];
        this.last = names[1];
    }
};

现在,您可以设置 和 和 将更新,反之亦然。fullNamefirstlast

n = new Name('Claude', 'Monet')
n.first # "Claude"
n.last # "Monet"
n.fullName # "Claude Monet"
n.fullName = "Gustav Klimt"
n.first # "Gustav"
n.last # "Klimt"

答案 2

JavaScript 中的 Getters 和 Setters

概述

JavaScript 中的 Getter 和 setter 用于定义计算属性访问器。计算属性是使用函数获取或设置对象值的属性。基本理论是做这样的事情:

var user = { /* ... object with getters and setters ... */ };
user.phone = '+1 (123) 456-7890'; // updates a database
console.log( user.areaCode ); // displays '123'
console.log( user.area ); // displays 'Anytown, USA'

这对于在访问属性时在后台自动执行操作非常有用,例如将数字保持在范围内、重新设置字符串格式、触发值已更改事件、更新关系数据、提供对私有属性的访问等。

下面的示例显示了基本语法,尽管它们只是获取和设置内部对象值,而无需执行任何特殊操作。在实际情况下,您可以修改输入和/或输出值以满足您的需求,如上所述。

获取/设置关键字

ECMAScript 5 支持和关键字来定义计算属性。它们适用于除IE 8及更低版本之外的所有现代浏览器。getset

var foo = {
    bar : 123,
    get bar(){ return bar; },
    set bar( value ){ this.bar = value; }
};
foo.bar = 456;
var gaz = foo.bar;

自定义 Getters 和 Setters

get并且不是保留字,因此可以重载它们以创建您自己的自定义跨浏览器计算属性函数。这将适用于任何浏览器。set

var foo = {
    _bar : 123,
    get : function( name ){ return this[ '_' + name ]; },
    set : function( name, value ){ this[ '_' + name ] = value; }
};
foo.set( 'bar', 456 );
var gaz = foo.get( 'bar' );

或者对于更紧凑的方法,可以使用单个函数。

var foo = {
    _bar : 123,
    value : function( name /*, value */ ){
        if( arguments.length < 2 ){ return this[ '_' + name ]; }
        this[ '_' + name ] = value;
    }
};
foo.value( 'bar', 456 );
var gaz = foo.value( 'bar' );

避免做这样的事情,这可能会导致代码膨胀。

var foo = {
    _a : 123, _b : 456, _c : 789,
    getA : function(){ return this._a; },
    getB : ..., getC : ..., setA : ..., setB : ..., setC : ...
};

对于上面的示例,内部属性名称是用下划线抽象的,以阻止用户简单地执行 vs。 并获得“未煮熟”的值。可以使用条件代码根据要访问的属性的名称(通过参数)执行不同的操作。foo.barfoo.get( 'bar' )name

Object.defineProperty()

Using 是添加 getter 和 setter 的另一种方法,可以在定义对象后在对象上使用。它还可用于设置可配置和可枚举的行为。此语法也适用于 IE 8,但遗憾的是仅适用于 DOM 对象。Object.defineProperty()

var foo = { _bar : 123 };
Object.defineProperty( foo, 'bar', {
    get : function(){ return this._bar; },
    set : function( value ){ this._bar = value; }
} );
foo.bar = 456;
var gaz = foo.bar;

__defineGetter__()

最后,是另一种选择。它已被弃用,但仍然在网络上广泛使用,因此不太可能很快消失。它适用于除IE 10及更低版本之外的所有浏览器。虽然其他选项在非IE上也运行良好,因此这个选项并不那么有用。__defineGetter__()

var foo = { _bar : 123; }
foo.__defineGetter__( 'bar', function(){ return this._bar; } );
foo.__defineSetter__( 'bar', function( value ){ this._bar = value; } );

同样值得注意的是,在后面的示例中,内部名称必须与访问器名称不同,以避免递归(即调用调用调用...)。foo.barfoo.get(bar)foo.barfoo.get(bar)

另请参见

MDN getsetObject.defineProperty()__defineGetter__()__defineSetter__()
MSDN IE8 Getter Support