(動手)攔截getter,setter

YuboonaZhang 發布于2019-08-23 12:01 / 3422人閱讀

前言

首先出道面試上機題簡化版(來自喜馬拉雅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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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