js面向?qū)ο?/h1>

1. 面向過程:

注重于流程順序
        1.分析解決問題都需要哪些步驟
        2.將這些步驟一步一步封裝成方法
        3.根據(jù)業(yè)務(wù)邏輯,將方法依次調(diào)用

2. 面向?qū)ο螅簅op

  Object Oriented Programming 
  對象   面向    編程
 核心思想:關(guān)注的是 以事務(wù)為中心 提取順序流程中的參與者(對象) 將各個流程順序進(jìn)行劃分鸠项。
編寫到各個參與者的方法里面婚被,各自按照約定好的順序,執(zhí)行各自的流程順序洗做,來共同完成一個業(yè)務(wù)邏輯

對象的范疇:萬物萬事皆對象
對象的特征: 屬性
對象的行為:方法
在程序上弓叛,對象是一組行為和特征的數(shù)據(jù)集和

常見對象:標(biāo)簽對象 BOM對象 系統(tǒng)內(nèi)置對象
window history localStorage 系統(tǒng)內(nèi)置對象函數(shù) 本身也是一個對象
人為定義的對象

 // 系統(tǒng)內(nèi)置 new Object()創(chuàng)建空對象 
        var obj = new Object();
        console.log(obj);
        // 字面量的形式創(chuàng)建對象
        var obj1 = {};
        console.log(obj1);
        console.log([obj1]);

        // 對象是屬性和方法的集合
        // 給對象動態(tài)添加方法
        obj.name = '文文' //添加屬性
        obj['say'] = function () { //添加方法
            console.log('hello world');
        }
        obj1['name'] = '劉';
        obj1['say'] = function () {
            console.log('000');
        }
        console.log(obj);
        // 系統(tǒng)對象
        var arr = new Array();
        var str = new String();
        var num = new Number();
        var bool = new Boolean();

3. 構(gòu)造方法創(chuàng)建對象


    // 通過構(gòu)造函數(shù)來寫一個人的類
    function Person(name, age) {
        this.name = name || '小';
        this.age = age || 0;
        this.say = function() {
                console.log(this.age);
                console.log('hello world');
            }
            // 如果構(gòu)造函數(shù)里面返回this,則這個this代表window對象
            // return this;
    }
    // 創(chuàng)建對象

    var p1 = new Person('小明', '3')
    console.log(p1);

4. js對象的產(chǎn)生

對象抽象成類诚纸,類實(shí)例化成對象
直觀上來說:通過new產(chǎn)生的 類的實(shí)例化
JS中所有的對象撰筷,都是由一個原型對象拷貝自己產(chǎn)生的
獲取當(dāng)前對象的原型對象:Object.getPrototype(要檢查的對象)

 // 原型的屬性和方法的訪問
    function Animal() {
        this.name = '小明';

    }
    // 實(shí)例化對象
    var a1 = new Animal();
    console.log(a1.name);
    console.log(a1);
    Animal.prototype.type = 'dog';
    Animal.prototype.name = '大明';
    var a2 = new Animal()
    console.log(a2);
    console.log(a2.type);
   a2.type = 'cat'
    console.log(a2);
    console.log(Animal.prototype.type);

    對象在訪問屬性和調(diào)用方法時,首先會在自己的屬性和方法上面查找
    如果能找到畦徘,直接調(diào)用毕籽,未找到抬闯,就去原型對象上找,找到后執(zhí)行

    對象對于原型對象的屬性和方法是只讀操作关筒,無法修改原型對象的屬性和方法
    如果給對象設(shè)置跟原型對象一樣的屬性名和方法
    相當(dāng)于給對象本身設(shè)置了一個新的屬性和方法溶握,并且與原型的屬性和方法重名
    之后訪問這個重名的屬性和方法,就只能訪問到自身蒸播,而不能直接訪問到原型

5. 多態(tài)

多態(tài):利用面向?qū)ο蠼鉀Qswitch case
執(zhí)行同一個方法睡榆,傳入的對象不一樣,輸出的結(jié)果不一樣

        分離的思想:
            將程序中變化的部分和不變的部分分離
            將變化的部分當(dāng)做參數(shù)傳入函數(shù)
            在函數(shù)內(nèi)部將相同部分的對象方法調(diào)用
            根據(jù)不同的對象自動輸出不同的結(jié)果
            盡可能的消除了分支語句袍榆,方便系統(tǒng)的擴(kuò)展
    function Dog() {
        this.say = function() {
            console.log('汪汪');
        }
    }

    function Cat() {
        this.say = function() {
            console.log('喵喵');
        }
    }
function Cattle() {
        this.say = function() {
            console.log('哞哞');
        }
    }

    function Sheep() {
        this.say = function() {
            console.log('咩咩');
        }
    }

    // 調(diào)用方法
    function makeSound(obj) {
        obj.say()
    }
    var d1 = new Dog();
    makeSound(d1)
    var d2 = new Cat();
    makeSound(d2)

6. 繼承

// 繼承
    function Person() {
        this.type = '人';
        this.name = '123';
        this.age = 18;
        this.say = function() {
            console.log('hi');
        }
    }

    function Man() {
        this.sex = 1;
    }
    // 相當(dāng)于Person實(shí)例化一個對象胀屿,覆蓋掉Man的原型對象
    // 未覆蓋前,Man的原型對象構(gòu)造函數(shù)指向Man
    // 覆蓋后包雀,Man.prototype.constructor指向Person
    // 所以需要將其改寫回來碉纳,重新指向Man
    Man.prototype = new Person(); //指向person
    Man.prototype.constructor = Man //改寫回來指向自己
    var m1 = new Man()
    console.log(m1);
    console.log(Man.prototype.constructor);
    console.log(m1.name); //可使用person的屬性

    function Kids() {
        this.age = 3;
    }
    Kids.prototype = new Man()
    Kids.prototype.constructor = Kids
    var k1 = new Kids()
    console.log(k1.type); //可使用person、man的屬性
    console.log(k1.age);
   // 構(gòu)造函數(shù)式繼承
    function Person(name, age) {
        this.name = name;
        this.age = age;
        console.log('111');
    }
    // 使用apply和call功能幾乎一樣馏艾,區(qū)別參數(shù)的形式不同
    // call可以有多個參數(shù)劳曹,第一個參數(shù)是指向的對象,其余參數(shù)為實(shí)參
    // apply只有兩個參數(shù)琅摩,第一個參數(shù)是指向的對象铁孵,第二個參數(shù)是實(shí)參數(shù)組
    function Man(name, age) {
        // Person.call(this, name, age)
        Person.apply(this, [name, age]) //改變this指向person
        this.sex = 1;
    }
    var m1 = new Man(2, 3)
    console.log(m1);
    m1.age = 0
    console.log(m1.age);

7. 封裝

面向?qū)ο蠓庋b的特性
js面向?qū)ο?封裝方法是通過構(gòu)造函數(shù)來實(shí)現(xiàn)的

    封裝優(yōu)點(diǎn):1.數(shù)據(jù)隱藏 可以將代碼中敏感的算法、變量房资、常量蜕劝,隱藏在對象的私有變量中,僅供內(nèi)部使用
            2.安全性 強(qiáng)制通過自定義的方法 來實(shí)現(xiàn)內(nèi)部和外部的數(shù)據(jù)交互 達(dá)到數(shù)據(jù)過濾的效果
                一般來說轰异,設(shè)置通常用  ...+setter+...來命名方法
                         獲取通常用  ...+getter+...來命名方法
// 定義一個構(gòu)造函數(shù)
    function Home() {
        // 私有屬性
        var money;
  // 公共屬性
        this.name = 'qwqq'
            // 公共方法
        this.Asetter = function() {
            var num = rand(500, 5000)
            money = num;
        }
        this.Agetter = function() {
                return money - 500;
            }
            // 私有方法
        function rand(min, max) {
            return Math.round(Math.random() * (max - min) + min)
        }

        // 數(shù)據(jù)隱藏
        this.age = 0;
        this.ageChange = function(n) {
            this.age = n;
        }
    }
    var h1 = new Home()
    h1.Asetter();
    console.log(h1.Agetter());
    console.log(h1.money);

    // 數(shù)據(jù)隱藏
    console.log(h1.ageChange(20));

    // 封裝初始化傳參
    function Person(options) {
        options = options || {}
        this.name = options.name
        this.age = options.age
        this.say = options.say
    }
    var p1 = new Person({
        name: '123',
        age: 4,
        say: function() {
            console.log('hi');
        }
    })
    console.log(p1);
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

  • 序言:七十年代末岖沛,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子搭独,更是在濱河造成了極大的恐慌婴削,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件牙肝,死亡現(xiàn)場離奇詭異唉俗,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)配椭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門虫溜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人股缸,你說我怎么就攤上這事衡楞。” “怎么了敦姻?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵瘾境,是天一觀的道長坎背。 經(jīng)常有香客問我,道長寄雀,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任陨献,我火速辦了婚禮盒犹,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘眨业。我一直安慰自己急膀,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布龄捡。 她就那樣靜靜地躺著卓嫂,像睡著了一般。 火紅的嫁衣襯著肌膚如雪聘殖。 梳的紋絲不亂的頭發(fā)上晨雳,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機(jī)與錄音奸腺,去河邊找鬼餐禁。 笑死,一個胖子當(dāng)著我的面吹牛突照,可吹牛的內(nèi)容都是我干的帮非。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼讹蘑,長吁一口氣:“原來是場噩夢啊……” “哼末盔!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起座慰,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤陨舱,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后版仔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體隅忿,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年邦尊,在試婚紗的時候發(fā)現(xiàn)自己被綠了背桐。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡蝉揍,死狀恐怖链峭,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情又沾,我是刑警寧澤弊仪,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布熙卡,位于F島的核電站,受9級特大地震影響励饵,放射性物質(zhì)發(fā)生泄漏驳癌。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一役听、第九天 我趴在偏房一處隱蔽的房頂上張望颓鲜。 院中可真熱鬧,春花似錦典予、人聲如沸甜滨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽衣摩。三九已至,卻和暖如春捂敌,著一層夾襖步出監(jiān)牢的瞬間艾扮,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工占婉, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留栏渺,地道東北人。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓锐涯,卻偏偏與公主長得像磕诊,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子纹腌,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容