亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Javascript老生常談之面向?qū)ο?

TwIStOy / 670人閱讀

摘要：內(nèi)部維護(hù)一個(gè)叫的局部變量，數(shù)組類型，用于存儲(chǔ)購買的物品清單。分析看到這題的第一反應(yīng)就是用構(gòu)造函數(shù)來寫。二屬性外部只能訪問不能修改這個(gè)用閉包也能解決，但是這樣記不能通過構(gòu)造函數(shù)來實(shí)現(xiàn)了，背離了初衷，不行不過我后面還是會(huì)給出這種寫法。

背景

作為一個(gè)前端新人，免不了加各種群，和其他小伙伴們一起學(xué)習(xí)（chui bi），互相幫助（bi can）。前幾天一個(gè)小伙伴在群里發(fā)了道自己去面試的筆試題，我寫了一下，一時(shí)間沒能實(shí)現(xiàn)，今天又折騰了一下，雖然大致實(shí)現(xiàn)了，但不知道是否優(yōu)雅，分享自己解法的同時(shí)也想請大佬指點(diǎn)一二。

題目 編寫一個(gè)名字為Person的對象，要求

有一個(gè)name屬性，外部只能訪問不能修改，初始化時(shí)賦值。

內(nèi)部維護(hù)一個(gè)叫things的局部變量，數(shù)組類型，用于存儲(chǔ)購買的物品（something）清單。

有一個(gè)buy(something)方法，用于購買物品(something)

具有count屬性，用于指示一共買了多少物品。

分析

看到這題的第一反應(yīng)就是用構(gòu)造函數(shù)/class來寫。Person對象應(yīng)該就是一個(gè)Person類。
兩個(gè)屬性一個(gè)方法，嗯，沒什么問題。只有2個(gè)點(diǎn)需要考慮：

一、 這個(gè)things局部變量是個(gè)啥?是屬性嗎?

應(yīng)該不是，既然特意指出了，肯定有他的考慮，那么既然是局部變量，外部也是訪問不到的，這個(gè)應(yīng)該用閉包寫。

二、 name屬性外部只能訪問不能修改.

這個(gè)用閉包也能解決，但是這樣記不能通過構(gòu)造函數(shù)/class來實(shí)現(xiàn)了，背離了初衷，不行（不過我后面還是會(huì)給出這種寫法）。那么（以我的水平）就只能用Proxy或者class，這2個(gè)都能攔截對象屬性的讀/寫。2種我都試過，采用Proxy，原因下面會(huì)講。

代碼 
class Person {
    constructor(name,count=0) {
        this.name = name;
        this.count = count;
        this.init()
    }
    //初始化函數(shù)
    init() {
        var things = []; 
        Person.prototype.buy = (something) => { //為了形成閉包，顯式將buy方法寫到Person的原型上
            things.push(something);
            this.count = things.length;
        }
    }
}
//Proxy handler對象，定義行為
var handler = {
    set(target,prop,value,receiver) {//攔截set行為
        if(prop == "name") {
            throw Error("不可以哦") //這里自定義你的邏輯,也可以alert等。
        }
        Reflect.set(target,prop,value,receiver) //不要忘了對其余屬性"放行"
    }
}

var p1 = new Proxy(new Person("張三"),handler)
console.log(p1.name) //張三
p1.name = "李四" //Error:不可以哦
p1.buy("貓糧");
p1.buy("貓砂");
console.log(p1.count) //2
//如果需要從"內(nèi)部"修改p1的名字，則需要先對被代理對象進(jìn)行定義
var _p1 = new Person("張三");
var p1 = new Proxy(_p1,handler)
console.log(p1.name); //張三
_p1.name = "李四";
console.log(p1.name) //李四

以上我對這道題的理解。至于為什么不用class的setter，是因?yàn)檫@樣寫后，在new Person的時(shí)候不能傳name進(jìn)去，因?yàn)橐粋鬟M(jìn)去就會(huì)被攔截。所以只能先初始化對name賦值，再進(jìn)行proxy代理對name攔截。

另一種“野路子”寫法 
var Person = function(name,count=0) {
    var things = [],name = name
        result = {
            count = count;
        };
    result.__proto__ = {
        buy:function(something) {
            things.push(something);
            result.count = things.length;
        },
        getName:function() { // 通過getName函數(shù)來獲取名字
            return name;
        }
    }
    return result;
}

var p2 = Person("王五"); 
p2.getName() //王五
p2.name = 123;
p2.getName() //王五
p2.buy("妙鮮包");
console.log(p2.count) // 1

兩種方法見仁見智，第二種野路子不用Proxy代理，返回的是Object對象，而第一種正規(guī)軍則返回Person對象，更符合題意。

結(jié)語

寫到這不知道大家發(fā)現(xiàn)了沒。 其實(shí)第一種方法也可以不需要proxy代理，再init函數(shù)中定義name = this.name，再在Person原型上寫一個(gè)getName函數(shù)，這樣2種方法的優(yōu)點(diǎn)就結(jié)合到一起了Σ(っ °Д °;)っ
這2小時(shí)沒有白花，這文章沒有白寫，又賺到了^ ^。
希望能給大家?guī)硪稽c(diǎn)點(diǎn)收獲，如果有不同的看法可以留言一起探討()。

Thanks for reading

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/84226.html

相關(guān)文章

  • JS組件開發(fā)之面向對象及物理模型編程

    摘要：內(nèi)容簡介，關(guān)于面向?qū)ο?，關(guān)于面向物理模型，示例，總結(jié)，關(guān)于面向?qū)ο笾械拿嫦驅(qū)ο笫且粋€(gè)老生常談的問題，可能有人問你的話你也能霹靂啪啦的說一通，比如最常見的，對象的三要素對象的名字對象的屬性對象的方法例子對象名示例對象屬性對象方法或者稍微高級一 內(nèi)容簡介： 1，關(guān)于面向?qū)ο? 2，關(guān)于面向物理模型 3，示例 4，總結(jié) 1，關(guān)于面向?qū)ο?javascript中的面向?qū)ο笫且粋€(gè)老生常談的問...

    cnTomato 評論0 收藏0

  • 深入JavaScript（一）this & Prototype

    摘要：然而事實(shí)上并不是。函數(shù)本身也是一個(gè)對象，但是給這個(gè)對象添加屬性并不能影響。一圖勝千言作者給出的解決方案，沒有麻煩的，沒有虛偽的，沒有混淆視線的，原型鏈連接不再赤裸裸。所以是這樣的一個(gè)函數(shù)以為構(gòu)造函數(shù)，為原型。 注意：本文章是個(gè)人《You Don’t Know JS》的讀書筆記。在看backbone源碼的時(shí)候看到這么一小段，看上去很小，其實(shí)忽略了也沒有太大理解的問題。但是不知道為什么，我...

    The question 評論0 收藏0

  • 老生常談javascript之call，apply的區(qū)別

    摘要：開始看到的函數(shù)和時(shí)，非常的模糊，不知所云，然后看書，網(wǎng)上查詢多少知道點(diǎn)了眉目，下面是我做的筆記，希望和大家分享，有不對之處希望各位多多指正，共同進(jìn)步。。。 開始看到j(luò)avascript的函數(shù)apply和call時(shí)，非常的模糊，不知所云，然后看書，網(wǎng)上查詢多少知道點(diǎn)了眉目，下面是我做的筆記，希望和大家分享，有不對之處希望各位多多指正，共同進(jìn)步。。。本文將從三個(gè)方面介紹apply，call...

    高勝山 評論0 收藏0

  • 老生常談javascript之call，apply的區(qū)別

    摘要：剛開始看到的函數(shù)和時(shí)，非常的模糊，不知所云，然后看書，網(wǎng)上查詢多少知道點(diǎn)了眉目，下面是我做的筆記，希望和大家分享，有不對之處希望各位多多指正，共同進(jìn)步。。。 剛開始看到j(luò)avascript的函數(shù)apply和call時(shí)，非常的模糊，不知所云，然后看書，網(wǎng)上查詢多少知道點(diǎn)了眉目，下面是我做的筆記，希望和大家分享，有不對之處希望各位多多指正，共同進(jìn)步。。。本文將從三個(gè)方面介紹apply，ca...

    rollback 評論0 收藏0

  • 老生常談之閉包(你不可不知的若干知識(shí)點(diǎn))

    摘要：閉包是什么這是一個(gè)在面試的過程中出現(xiàn)的概率為以上的問題，也是我們張口就來的問題。文章推薦我們面試中在被問到閉包這個(gè)問題是要注意的幾點(diǎn)閉包的延伸，讓面試變得 閉包是什么？這是一個(gè)在面試的過程中出現(xiàn)的概率為60%以上的問題，也是我們張口就來的問題。但是我們往往發(fā)現(xiàn)，在面試的過程中我們的回答并不那么讓面試官滿意，我們雖然能張口說出一些但是卻不能系統(tǒng)的對這個(gè)問題進(jìn)行回答。面試官希望加入自己團(tuán)隊(duì)...

    daydream 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<