Javascript 进阶 7-4 Getter 与 Setter，赋值运算不使用函式

这篇文章主要来讲述如何利用 Getter 与 Setter 来进行物件属性的赋值

var wallet = {    total: 100};

假设钱包里面的总金额有100元，我们要修改里面的钱，通常会使用

wallet.total = 300;console.log(wallet.total);

印出来看以后呢~

这样子的作法，我们是直接把值覆盖过原本的值，但有时候我们会需要根据原本的值进行一些运算，这种状况就非常适合使用 Getter 与 Setter!

Getter: 取得特定值的方法

Setter: 存特定值的方法

首先我们先来设定 Setter 吧~利用上面的例子为基础，设定存 total 的属性!

Setter: 存特定值的方法

var wallet = {    total: 100,    set save (price) {        this.total += price / 2;    }};wallet.save = 300;console.log(wallet.total);

首先我们先在 wallet 的属性中新增了下面这段

set save (price) {    this.total += price / 2;}

可以看到利用 set 作为字首，接上自定义名称，再加上(){}，有点类似传统函式，但少了 function 的开头宣告。

之后也是将要进行运算的程式撰写在大括号内，就算定义完成。

实际上的呼叫和传统函式的呼叫不太一样，是透过

wallet.save = 300;

这样的方式，如果有参数的话，则利用 = 要带入的参数 传入，所以这边的写法如上面所示

而结果就可以看到是运算过后的250~

Getter: 取得特定值的方法

其实 Getter 跟 Setter 差不多，只是差别在于最后要 return 你取到的值，并且不会有传入的参数。

var wallet = {    total: 100,    set save (price) {        this.total += price / 2;    },    get save () {        return this.total;    }};

一样，逗号隔开之后，使用关键字 get get的名称 (){}。

那么执行的话，只需要使用表达式即可，wallet.save。

同时，名称是可以自订义的，也可以和 Setter 的名称一样!

var wallet = {    total: 100,    set save (price) {        this.total += price / 2;    },    get save () {        return this.total;    }};wallet.save = 300;console.log(wallet.total);console.log(wallet.save);

那么我们接着来看看 wallet 这个物件变成怎么样~

可以看到 total、getter、setter还有一个 save: (...) 这个是 getter，但还没有取值的状态，如果我们点下去之后，才会从点下去的当下去资料中取这个值~

稍微把程式码改动一下让大家比较能够了解~

var wallet = {    total: 100,    set save (price) {        this.total += price / 2;    },    get save () {        return this.total;    }};console.log(wallet.save, wallet);wallet.save = 300;// console.log(wallet.total);// console.log(wallet.save);

可以看到我故意把 console.log(wallet.save, wallet); 放在 setter 执行之前，这样取到的值一定是100，但是这时候物件里面的 save: (...) 我还没按，按了之后就呈现

所以也就是说，按下去的当下，js的程式码都全部跑完了，才去取得处理完的资料状态，也就是250。

利用 Object.defineProperty() 定义 Getter 以及 Setter

var wallet = {    total: 100};Object.defineProperty(wallet, 'save', {    set: function (price) {        this.total += price / 2;    },    get: function () {        return this.total;    }});console.log(wallet.save, wallet);wallet.save = 300;

如同之前的写法所示，功能一样可以照常运作，只是眼尖的人可能会发现 save: (...) 的属性颜色跟之前的不一样，变成淡紫色，如果孩队上一篇文章有印象的人就会知道，这代表 enumerable的状态是 false。

所以我们就来看看 Getter 以及 Setter 现在的状态:

console.log('Getter and Setter', Object.getOwnPropertyDescriptor(wallet, 'save'));

果然，configurable 以及 enumerable 都是false。

那么如果我们今天要把它改成 true 的话也很简单，只需要 Object.defineProperty 中进行调整就可以了~

Object.defineProperty(wallet, 'save', {    configurable:true,    enumerable: true,    set: function (price) {        this.total += price / 2;    },    get: function () {        return this.total;    }});console.log('Getter and Setter', Object.getOwnPropertyDescriptor(wallet, 'save'));

实战练习

Q: 需要取得阵列中的第一个值以及最后一个值

A:

var a = ['1', '2', '3'];Object.defineProperties(Array.prototype, {    getFirst: {        get: function () {            return this[0];        }    },    getLast: {        get: function () {            return this[this.length - 1];        }    }});console.log('getFirst', a.getFirst);console.log('getLast', a.getLast);

以上就是关于 Getter 与 Setter 的介绍，没有问题的话就继续往下吧!