(动手)拦截getter,setter

YuboonaZhang 发布于2019-08-23 12:01 / 3406人阅读

前言

首先出道面试上机题简化版(来自喜马拉雅Fm),侵删。

        ****
        你需要在这里完成People的构造函数
        ****
        //从而会按照期望执行下面的代码
        var man = new People("小明");
        var women = new People("小红")
        console.log(man.name)      // 期望为       小明
        man.name = "小刚"          // 期望为        warn:不允许通过赋值运算符
        console.log(man.name)     // 期望为       小明
        console.log(women.name)   // 期望为       小红
        women.setName("小黄")
        console.log(women.name)   // 期望为       小黄

我的方案 Object.defineProperty

 var People = function (name){
            this._name = name;
            Object.defineProperty(this,"name",{
                get:function(){
                    return this._name
                },
                set:function(name){
                    console.warn("不允许通过赋值运算符")
                }
            })
            this.setName = function(name){
                this._name = name;
            }
        }

Proxy

var createPeople = function(name){
            var obj = new Object();
            obj._name = name;
            obj.setName =  function(name){
                this._name = name;
            }
            return obj
        }
        var People = function (name){
            return new Proxy(createPeople(name), {
            get: function (target, key, receiver) {
                if(key === "name"){
                    return target["_name"]
                }
                return target[key];
            },
            set:function(target,key,value,receiver){
                if(key === "_name"){
                    target._name = value
                    return 
                }
                console.warn("不允许通过赋值运算符")
            }
        });
        }

Class

class People{
             constructor(name){
                 this._name = name;
             }
             get name(){
                 return this._name;
             }
             set name(name){
                console.warn("不允许通过赋值运算符")
             }
             setName(name){
                 this._name = name;
             }
        }

小结

我把自己的代码放出来，抛砖引玉，也希望大家可以 review我的代码，指出不足之处和可优化之处。

GPU云服务器云服务器 getter和setter方法 Getters getter Setters

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

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

动手写个数字输入框2：起手式——拦截非法字符

摘要：前言最近在用封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。因此我们要继续补充下面两步，并且由于事件触发时值还没被修改，于是我们需要将值和当前输入值做组合来做预判，进一步扩大非法字符集。前言最近在用Polymer封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历：《动手写个数字输入框1：input[...

microcosm1994 2019-08-21 15:52 评论0 收藏0
动手写个数字输入框2：起手式——拦截非法字符

摘要：前言最近在用封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。因此我们要继续补充下面两步，并且由于事件触发时值还没被修改，于是我们需要将值和当前输入值做组合来做预判，进一步扩大非法字符集。前言最近在用Polymer封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历：《动手写个数字输入框1：input[...

233jl 2019-08-01 16:56 评论0 收藏0
动手写个数字输入框3：痛点——输入法是个魔鬼

摘要：前言最近在用封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。因此我们能做的是通过事件作事后补救措施在中拦截输入法中输入的和按键事件，然后自行出发事件执行补救措施。前言最近在用Polymer封装纯数字的输入框，开发过程中发现不是坑，也有不少值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历： [《动手写个数字输入框1：input[type=number...

yy13818512006 2019-08-20 17:04 评论0 收藏0