[学习es6]setter/getter探究

aboutU 发布于2019-08-21 14:42 / 1220人阅读

摘要：加一个成员方法执行结果为注意到结果并没有执行，因为我们直接访问了，而不是只有定义只读属性当一个属性只有没有的时候，我们是无法进行赋值操作的第一次初始化也不行，这一点也是相当地坑。例如只有执行结果为当没有和时，就可以正常读写属性

1. 背景

在es6中，我们可以用class关键字来定义类，语法如下

class Person {
    // 构造函数
    constructor (name) {
        // 属性初始化
        this.name = name;
    }

    // 成员方法
    sayName () {
        console.log(this.name);
    }
    
    // 静态方法
    static sayHi () {
        console.log("Hi~");
    }
}

其实本质还是基于javascript原型链机制开发的语法糖，其中，本人对setter/getter进行一番研究，发现了不少坑。

2. 深入setter/getter 2.1 setter/getter的调用执行时机

class Person {
    constructor (name, age) {
        this.name = name;
        this.age = age;
    }
    set name (name) {
        console.log("setter");
        this.name = name;
    }
    get name () {
        console.log("getter");
        return this.name;
    }
}

var p = new Person("zhang", 25);

很快，我们就会发现代码报错了

到这里就可以明白了，原来只要this.name中的属性名和set name/get name后面的name一致，对this.name就会调用setter/getter，也就是说setter/getter是hook函数，而真实的存储变量是_name，我们可以在代码中直接获取它。

class Person {
    constructor (name, age) {
        this.name = name;
        this.age = age;
    }
    set name (name) {
        console.log("setter");
        this._name = name;
    }
    get name () {
        console.log("getter");
        return this._name;
    }

    // 加一个成员方法
    sayName () {
        console.log(this.name);
    }
}

var p = new Person("zhang", 25); 
console.log(p._name); // "zhang"

执行结果为

注意到结果并没有执行getter，因为我们直接访问了p._name，而不是p.name

2.2 只有getter定义只读属性

当一个属性只有getter没有setter的时候，我们是无法进行赋值操作的（第一次初始化也不行），这一点也是相当地坑。例如

class Person {
    constructor (name) {
        this.name = name;
    }
    // 只有getter
    get name () {
        console.log("getter");
        return this.name;
    }
}

var p = new Person("zhang");

执行结果为

当没有getter和setter时，就可以正常读写属性

云服务器 GPU云服务器探究关于webrtc直播的探究 ES6 es6-系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88003.html

ES6 Proxy/Reflect 浅析

摘要：即必须有返回值其中可接受三个参数，为目标对象，为属性名，为实际接受的对象，默认为本例中新建的，如果单独指出一个对象，可使指出对象受到相同的方法作用。且中的必须有返回值，的不用，这也正是因为在他之后还会执行所以不需要。 ES6 Proxy/Reflect Proxy 拦截器 proxy是es6的新特性，简单来讲，即是对目标对象的属性读取、设置，亦或函数调用等操作进行拦截（处理）。 let...

Juven 2019-08-20 14:14 评论0 收藏0
javascript基础-Vue数据绑定前奏对象属性

摘要：关于有人说我用删除这个属性不就好了之后打印发现它还是一只哈士奇。如下的解释如下操作符会从某个对象上移除指定属性。 javascript-Object-Property ? javascript-对象的属性的延伸学习 showImg(https://segmentfault.com/img/bVNH2S?w=640&h=640); 前言在学习vue数据绑定的较底层原理时，被setter...

zebrayoung 2019-08-20 16:33 评论0 收藏0
深入浅出Vue响应式原理

摘要：总结最后我们依照下图参考深入浅出，再来回顾下整个过程在后，会调用函数进行初始化，也就是过程，在这个过程通过转换成了的形式，来对数据追踪变化，当被设置的对象被读取的时候会执行函数，而在当被赋值的时候会执行函数。前言 Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解...

yiliang 2019-08-23 18:34 评论0 收藏0
JavaScript对象详解

摘要：属性描述符升级打怪必备技能对象有自己的属性和方法，对于我们对象的属性来讲，属性还有自己的属性，又称为属性描述符。这个方法接受三个参数，第一个是指定的对象，第二个是指定的对象参数，第三个当然是要修改的属性描述符了。对象的声明有俩种：字面量通过new一个构造函数Object 两者唯一的区别就是，字面量形式，可以一次赋值多个，通过new Object就得一个一个赋值数据类型 ...

fancyLuo 2019-08-26 12:14 评论0 收藏0
第二十九章：基于SpringBoot平台使用Lombok来优雅的编码

摘要：还提供了全部参数的构造函数的自动生成，该注解的作用域也是只有在实体类上，因为只有实体类才会存在构造函数。当然除了全部参数的构造函数，还提供了没有参数的构造函数，使用方式与一致。 Lombok对于Java偷懒开发者来说应该是比较中意的，恰恰笔者就是一个喜欢在小细节上偷懒来提高开发效率的人。所以在技术框架的海洋里寻找了很久才在GitHub开源平台上找到，而在这之前国外很多程序猿一直使用该框...

fanux 2019-08-15 11:59 评论0 收藏0