学习es6 setter/getter研究

摘自 :学习es6 setter/getter研究 - 星辰之夜 - 博客园 (cnblogs.com)


1.背景

   在ES6中,我们对类的定义如下

复制代码

 1 class Person {
 2     // 构造函数
 3     constructor (name) {
 4         // 属性初始化
 5         this.name = name;
 6     }
 7 
 8     // 成员方法
 9     sayName () {
10         console.log(this.name);
11     }
12     
13     // 静态方法
14     static sayHi () {
15         console.log("Hi~");
16     }
17 }

复制代码

  其实本质还是基于javascript原型链机制开发的语法糖

2. 深入setter/getter

 

2.1 setter/getter的调用执行时机

复制代码

 1 class Person {
 2     constructor(name,age) {
 3         this.name = name;
 4         this.age = age;
 5     }
 6                 
 7     set name(name) {
 8         console.log("setter");
 9         this.name = name;
10     }
11                 
12     get name() {
13         console.log("getter");
14         return this.name;
15     }
16 }    

复制代码

 发现上面的代码报错

学习es6 setter/getter研究_第1张图片

/**
*   这是因为,在构造函数中执行this.name=name的时候,就会去调用set name,
*   在set name方法中,我们又执行this.name = name,进行无限递归,
*   最后导致栈溢出(RangeError)。
* */

我们稍作修改,让这个代码可以正常执行,达到我们想要的效果。

复制代码

 1 // 针对上面的情况,稍作修改
 2 class Person {
 3     constructor(name,age) {
 4         this.name = name;// 执行这里 --- 1
 5         this.age = age;
 6     }
 7                 
 8     set name(name) { // 进入到这里进行设置  -- 2
 9         console.log("setter");
10         this._name = name;
11     }
12                 
13     get name() { // 在这里将对应的值返回 --- 3
14         console.log("getter");
15         return this._name;
16     }
17                 
18     sayName() { // 这里的调用,又从 1-2-3
19         console.log(this.name);
20     }
21 }
22 let p2 = new Person("lisi",22);
23 console.log(p2);// 真实的属性是 age  _name   而不是name
24 p2.sayName();
25 console.log(p2._name);// 如果你访问的是 p2.name  最后会执行 1-3 这两个步骤,会打印出getter    

复制代码

控制台结果如下: 

学习es6 setter/getter研究_第2张图片

/**
* 总结
*    只要this.+属性名 和get 属性名/ set 属性名 中,属性名一致,
*    this.name 会去调用getter 和 setter ,也就是说 getter和setter是hock函数
*    而真实存储的属性是 _name 我们可以在实例化后,直接获取
* */

2.2 只有getter定义只读属性

复制代码

 1 // 只有getter定义只读属性
 2 class foo {
 3     constructor(name) {
 4         this.name = name;
 5     }
 6                  
 7     get name() {
 8         console.log(`getter函数`);
 9         return this.name;
10     }
11 }
12 //Cannot set property name of # which has only a getter
13  let p3 = new foo("李四");

复制代码

/**
* 总结:
*   当一个属性只有getter没有setter的时候,我们是无法进行赋值操作的(第一次初始化也不行),这一点需要注意
*   当没有getter和setter时,就可以正常读写属性
* */

 

你可能感兴趣的:(学习es6 setter/getter研究)