98彩票网-在JavaScript中为开发人员使用Getters和Setter的指南

作者:98彩票 时间:2019-04-22 12:13

字号

getter setter是用于98彩票获取设置变量值的函数或方法getter-setter概念计算机编程中常见:几乎所有高级编程语言都带有一组语法来实现getter和setter,包括JavaScipt。

在这篇文章中,我们将看到getter setters是什么,以及如何在JavaScript中创建和使用它们

Getters-setters和封装

getter和setter的想法总是封装一起提到封装可以通过两种方式理解

首先,它是设置data-getters-setters trio来访问和修改这些数据。在保存或查看数据之前必须对数据执行某些操作(例如验证)时,此定义很有用,并且setter为其提供完美的住所。

其次,有一个更严格的定义,根据哪个封装来隐藏数据,使其无法从其他代码访问,除非通过getter和setter这样我们就不会意外地用程序中的其他代码覆盖重要数据

创建getter和setter

1.用方法

由于getter和setter 基本上是获取/更改值的函数,因此创建和使用它们的方法不止一种第一种方式是:

1
2
3
4
6
7
8
9
10
11
12
13
14
15
16
17
var obj = {
  foo:    'this is the value of foo',
  getFoo: function() {
            return this.foo;
        },
  setFoo: function(val) {
            this.foo = val;
        }
}
 
console.log(obj.getFoo());
// "this is the value of foo"
 
obj.setFoo('hello');
 
console.log(obj.getFoo());
// "hello"

这是创建getter和setter 的最简单方法有一个属性foo,98彩票网有两种方法:getFoosetFoo返回,并赋值给该属性。

2.使用关键字

创建getter和setter的更“官方”和强大的方法是使用getset关键字

创建getter,请将get关键字放在将用作getter方法的函数声明之前,并以相同的方式使用该set关键字创建setter语法如下:

1
2
3
4
6
7
8
9
10
11
12
13
14
15
16
17
var obj = {
  fooVal: 'this is the value of foo',
  get foo() {
      return this.fooVal;
  },
  set foo(val) {
      this.fooVal = val;
  }
}
 
console.log(obj.foo);
// "this is the value of foo"
 
obj.foo = 'hello';
 
console.log(obj.foo);
// "hello"

请注意,数据只能存储在与getter-setter方法(名称不同的属性名称fooVal)下,因为持有getter-setter的属性也不能保存数据foo

哪种方式更好?

如果选择使用关键字创建getter和setter,则可以使用赋值运算符设置数据,使用点运算符来获取数据,就像访问/设置常规属性的值一样。

但是,如果选择第一种编码getter和setter的方法,则必须使用函数调用语法调用setter和getter方法因为它们是典型的函数(没有什么特别的,比如使用getset关键字创建的函数)。

此外,您有可能最终意外地将某些其他值分配给持有这些getter-setter方法的属性并完全丢失它们在后面的方法中您不必担心的事情。

所以,你可以看到为什么我说第二种技术更强大

覆盖预防

如果由于某种原因您更喜欢第一种技术,通过使用Object.defineProperties创建它们使保持getter-setter方法的属性为只读通过创建属性Object.definePropertiesObject.defineProperty自动配置这意味着只读Reflect.defineProperty writable: false

1
2
3
4
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* Overwrite prevention */
var obj = {
  foo: 'this is the value of foo'
};
 
Object.defineProperties(obj, {
  'getFoo': {
      value: function () {
          return this.foo;
      }
  },
  'setFoo': {
      value: function (val) {
          this.foo = val;
      }
  }
});
 
obj.getFoo = 66;
// getFoo is not going to be overwritten!
 
console.log(obj.getFoo());
// "this is the value of foo"

getter和setter中的操作

一旦引入了getter和setter,98彩票就可以在更改或返回数据之前继续对数据执行操作

在下面的代码中,在getter函数中,数据在返回之前与字符串连接,并且在setter函数中,在更新之前执行对值是否为数字的验证n

1
2
3
4
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var obj = {
  n: 67,
  get id() {
      return 'The ID is: ' + this.n;
  },
  set id(val) {
      if (typeof val === 'number')
          this.n = val;
  }
}
 
console.log(obj.id);
// "The ID is: 67"
 
obj.id = 893;
 
console.log(obj.id);
// "The ID is: 893"
 
obj.id = 'hello';
 
console.log(obj.id);
// "The ID is: 893"

使用getter和setter保护数据

到目前为止,我们已经介绍了在封装的第一个上下文中使用getter和setter。让我们继续讨论第二个问题,即如何在getter和setter的帮助下隐藏外部代码中的数据

未受保护的数据

设置getter和setter并不意味着只能通过这些方法访问和更改数据。在下面的示例中,它直接更改而不触及getter和setter方法:

1
2
3
4
6
7
8
9
10
11
12
13
14
var obj = {
  fooVal: 'this is the value of foo',
  get foo() {
      return this.fooVal;
  },
  set foo(val) {
      this.fooVal = val;
  }
}
 
obj.fooVal = 'hello';
 
console.log(obj.foo);
// "hello"

我们没有使用setter但直接更改了data(fooVal我们最初在里面设置的数据obj现在已经消失了!为了防止这种情况发生(意外),您需要对数据进行一些保护您可以通过限制数据可用范围来添加它您可以通过块作用域函数作用域来实现

1.阻止范围界定

一种方法是使用块范围,在该范围内使用let关键字定义数据,该关键字将其范围限制为该块。

块范围可以通过将您的代码来创建的一对大括号内每当你创建一个块作用域时,一定要在它上面留下一个注释,要求将大括号单独留下,以便没有人错误地删除大括号,认为它们是代码中的一些额外冗余大括号或者为块作用域添加标签

1
2
3
4
6
7
8
9
10
11
12
13
14
15
16
17
18
/* BLOCK SCOPE, leave the braces alone! */
{
let fooVal = 'this is the value of foo';
var obj = {
    get foo() {
        return fooVal;
    },
    set foo(val) {
        fooVal = val
    }
  }
}
 
fooVal = 'hello';
// not going to affect the fooVal inside the block
 
console.log(obj.foo);
// "this is the value of foo"

fooVal在块外部更改/创建不会影响fooVal getter setter中引用。

2.功能范围

98彩票使用作用域保护数据的更常见方法是将数据保留在函数内并使用该函数中的getter和setter 返回一个对象

1
2
3
4
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function myobj(){
  var fooVal = 'this is the value of foo';
  return {
      get foo() {
          return fooVal;
      },
      set foo(val) {
          fooVal = val
      }
  }
}
 
fooVal = 'hello';
// not going to affect our original fooVal
 
var obj = myobj();
 
console.log(obj.foo);
// "this is the value of foo"

函数foo()返回的对象(其中包含getter-setter)保存在,然后用于调用getter和settermyobj()objobj

3.没有范围界定的数据保护

还有另一种方法可以保护您的数据不被覆盖而不限制其范围它背后的逻辑是这样的:如果你不知道什么叫做,你怎么能改变一条数据呢?

如果数据具有不那么容易重现的变量/属性名称,则很可能没有人(甚至我们自己)最终通过为该变量/属性名称赋值来覆盖它。

1
2
3
4
6
7
8
9
10
11
12
var obj = {
  s89274934764: 'this is the value of foo',
  get foo() {
    return this.s89274934764;
  },
  set foo(val) {
    this.s89274934764 = val;
  }
}
 
console.log(obj.foo);
// "this is the value of foo"

看,这是解决问题的一种方式。虽然我选择的名称不是很好,但您也可以使用随机值或符号来创建属性名称,因为Derick Bailey 在此博客文章中提出了这一点主要目标是使数据与其他代码保持隐藏,并让getter-setter对访问/更新它。

什么时候应该使用吸气剂和二传手?

现在出现了一个大问题:你现在开始为所有数据分配getter和setter 吗?

如果您隐藏数据,那么别无选择

但是,如果其他代码看到你的数据没问题,你是否仍然需要使用getter setter 将它与用它执行某些操作的代码捆绑在一起我会说是的代码很快就会出现使用自己的getter-setter创建单个数据的微单元,98彩票可以使您在处理所述数据时具有一定的独立性,而不会影响代码的其他部分。

责任编辑:admin新闻报料:400-888-8888   本站原创,未经授权不得转载
关键词 >> 98彩票
继续阅读
热新闻

APP下载

客户端下载
推荐
关于我们 诚聘精英 联系我们 版权声明 友情链接 报料