高級1-面向?qū)ο?/h2>

1: OOP 指什么?有哪些特性
面向?qū)ο蟪绦蛟O計(英語:Object-oriented programming,縮寫OOP)是種具有對象概念的程序編程范型,同時也是一種程序開發(fā)的抽象方針。它可能包含數(shù)據(jù)、屬性、代碼方法。對象則指的是的實例。它將對象作為程序的基本單元,將程序和數(shù)據(jù)封裝其中,以提高軟件的重用性、靈活性和擴展性,對象里的程序可以訪問及經(jīng)常修改對象相關連的數(shù)據(jù)。在面向?qū)ο蟪绦蚓幊汤?,計算機程序會被設計成彼此相關的對象

面向?qū)ο蟪绦蛟O計可以看作一種在程序中包含各種獨立而又互相調(diào)用的對象的思想,這與傳統(tǒng)的思想剛好相反:傳統(tǒng)的程序設計主張將程序看作一系列函數(shù)的集合,或者直接就是一系列對電腦下達的指令。面向?qū)ο蟪绦蛟O計中的每一個對象都應該能夠接受數(shù)據(jù)、處理數(shù)據(jù)并將數(shù)據(jù)傳達給其它對象,因此它們都可以被看作一個小型的“機器”,即對象。

特征
支持面向?qū)ο缶幊陶Z言通常利用繼承其他類達到代碼重用和可擴展性的特性。而類有兩個主要的概念:
(Class):定義了一件事物的抽象特點。類的定義包含了數(shù)據(jù)的形式以及對數(shù)據(jù)的操作。
對象:是類的實例。
示例(偽代碼):

//抽象的類,描述了一樣事物的特征
類 狗
開始
    公有成員:
        吠叫():
    私有成員:
        毛皮顏色:
        孕育:
結束

<------------------------------------------>
//對象,該類事物的具體化
定義萊絲是狗
萊絲.毛皮顏色:棕白色
萊絲.吠叫()

封裝性:封裝是通過限制只有特定類的對象可以訪問這一特定類的成員,而它們通常利用接口實現(xiàn)消息的傳入傳出。

/* 一個面向過程的程序會這樣寫: */
定義萊絲
萊絲.設置音調(diào)(5)
萊絲.吸氣()
萊絲.吐氣()

/* 而當狗的吠叫被封裝到類中,任何人都可以簡單地使用: */
定義萊絲是狗
萊絲.吠叫()

繼承:繼承性(Inheritance)是指,在某種情況下,一個類會有“子類”。子類比原本的類(稱為父類)要更加具體化。

類牧羊犬:繼承狗

定義萊絲是牧羊犬
萊絲.吠叫()    /* 注意這里調(diào)用的是狗的子類牧羊犬的吠叫方法。*/

多態(tài):多態(tài)(Polymorphism)是指由繼承而產(chǎn)生的相關的不同的類,其對象對同一消息會做出不同的響應

/* 
 * 狗和雞都有“叫()”這一方法
 * 但是調(diào)用狗的“叫()”,狗會吠叫
 * 調(diào)用雞的“叫()”,雞則會啼叫
 */

類狗
開始
   公有成員:
       叫()
       開始
          吠叫()
       結束
結束

類雞
開始
   公有成員:
       叫()
       開始
          啼叫()
       結束
結束

定義萊絲是狗
定義魯斯特是雞
萊絲.叫()
魯斯特.叫()

2: 如何通過構造函數(shù)的方式創(chuàng)建一個擁有屬性和方法的對象?

var F = function(properties){
  this.properties = properties;
  methods: function(){
    //methods...  
  }
};
var foo = new F();

3: prototype 是什么?有什么特性
對象的原型,利用constructor和prototype解決了繼承和代碼重復調(diào)用,減少了不必要的內(nèi)存損耗,如下:

  • 我們在使用new構造函數(shù)的過程當中

  • 每個函數(shù)都自動添加一個名稱為prototype屬性,這是一個對象

  • 每個對象都有一個內(nèi)部屬性 proto(規(guī)范中沒有指定這個名稱,但是瀏覽器都這么實現(xiàn)的) 指向其類型的prototype屬性,類的實例也是對象,其proto屬性指向“類”的prototype

這里,我們可以知道

  • 所有實例都會通過原型鏈引用到類型的prototype

  • prototype相當于特定類型所有實例都可以訪問到的一個公共容器

  • 重復的東西移動到公共容器里放一份就可以了
    示例:

function Person(nick, age){
    this.nick = nick;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.nick);
}
var p1 = new Person();
p1.sayName();
Paste_Image.png

4:畫出如下代碼的原型圖

function People (name){
  this.name = name;
  this.sayName = function(){
    console.log('my name is:' + this.name);
  }
}

People.prototype.walk = function(){
  console.log(this.name + ' is walking');  
}

var p1 = new People('饑人谷');
var p2 = new People('前端');
Paste_Image.png

5: 創(chuàng)建一個 Car 對象,擁有屬性name、color、status;擁有方法run,stop,getStatus

function Car (name, color, status){
  this.name = name;
  this.color = color;
  this.status = status;
}
Car.prototype.run = function(){
  console.log(this.name + 'is running')
}
Car.prototype.stop = function(){
  console.log(this.name + 'stoped')
}
Car.prototype.getStatus = function(){
  console.log('status:' + this.status)
}
var car = new Car('fff', 'black', '0')
car.run()
car.stop()
car.getStatus()

6: 創(chuàng)建一個 GoTop 對象,當 new 一個 GotTop 對象則會在頁面上創(chuàng)建一個回到頂部的元素,點擊頁面滾動到頂部。擁有以下屬性和方法

gif008.gif

核心代碼:

var GotTop = function($container, $element) {
  this.ct = $container;
  this.element = $element;
}
GotTop.prototype.bindEvent = function(){
    var _this = this
    $(window).scroll(function(){
        var scrollTop = _this.ct.scrollTop()
        if(scrollTop > 100){
            _this.element.show('slow')
        }else{
            _this.element.hide('slow')
        }
    })
    _this.element.on('click', function(){
      _this.ct.animate({
        scrollTop: 0
      }, 600)
    })
}
 GotTop.prototype.createNode = function(){
    this.ct.append(this.element)
  }
var goTop = new GotTop($('body'), $('<div class="go-top">頂部</div>'))

goTop.bindEvent()
goTop.createNode()

完整代碼
JSBin

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 國家電網(wǎng)公司企業(yè)標準(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 12,428評論 6 13
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,569評論 19 139
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內(nèi)部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 34,728評論 18 399
  • 燙心 我拉開車門 鉆進車里 坐定后回望你 你站在雨里撐著傘 臃腫的棉衣包裹著你瘦弱的身體 我搖下車窗讓你回去 你用...
    姬二水閱讀 220評論 0 2
  • 發(fā)黃的相片古老的信以及褪色的圣誕卡年輕時為你寫的歌恐怕你早已忘了吧過去的誓言就象那課本里繽紛的書簽刻劃著多少美麗的...
    慧子永遠沒有太晚的開始閱讀 377評論 3 10

友情鏈接更多精彩內(nèi)容