面向對象基礎理解

OOP 指什么?有哪些特性

OOP英文全稱是Object Oriented Programming,翻譯過來就是面向對象編程,它主要有三個特性:封裝、繼承與多態

  • 封裝可以理解成把程序規則的分成很多塊,其中一塊一塊的就是我們常說的類,每一塊當中都有穩定的部分和可變的部分,然而我們就需要將這倆部分分離出來,將穩定的部分展現給別人看,可變的部分隱藏起來,以便以后修改,這種工作就是我們常說的封裝。

  • 那么封裝有什么好處呢?
    使用者只需要了解如何去使用或調用類和接口,不用在乎類的內部是怎么實現的易擴展,如果我們有可以擴展的功能只需要在接口中定義即可

  • 繼承給程序員提供了可復用代碼的優勢,子類可以通過繼承,可實現直接訪問父類里的屬性和方法等等一些元素,這樣可以省略了我們的代碼量,提高了我們的效率

  • 多態簡單來說就是多種形態,一件事情或一個動作可以有多種不同的結果或意義或者還可以這樣說同一操作作用于不同的對象,能夠有不同的解釋,產生不同的結果,這就是多態
    多態的好處,多態是通過很多個子類來實現同一個接口,可以達成很多不一樣的結果,它在應用中體現了靈活多樣的操作,從而提高了我們的使用效率。

如何通過構造函數的方式創建一個擁有屬性和方法的對象?

    function Person(name,age){
         this.name = name;
         this.age = age;
    }
            Person.prototype.bind = function(){
                        console.log(this.name)
}
        var v = new Person('chris','24') 
        v.bind()    //chris

prototype 是什么?有什么特性

JavaScript的每個對象都繼承另一個對象,后者稱為“原型”(prototype)對象。只有null除外,它沒有自己的原型對象。
原型對象上的所有屬性和方法,都能被派生對象共享。這就是JavaScript繼承機制的基本設計。
通過構造函數生成實例對象時,會自動為實例對象分配原型對象。每一個構造函數都有一個prototype屬性,這個屬性就是實例對象的原型對象。

畫出如下代碼的原型圖

  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('前端');
prototype.PNG

創建一個 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(){return 'run'},
    stop:function(){return 'stop'},
    getStatus:function(){return this.status}
}
   var car = new Car('BMW','white','run')
    car.getStatus() //'run'

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

  1. ct屬性,GoTop 對應的 DOM 元素的容器
  2. target屬性, GoTop 對應的 DOM 元素
  3. bindEvent 方法, 用于綁定事件
    4 createNode 方法, 用于在容器內創建節點

demo

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容