Javascript - 面向對象

1 建立對象

在 JavaScript 中能夠經過多種方式建立對象。javascript

1.1 字面量的方式

var student = {
    name:"某某某",
    type:"練習生",
    like:"唱跳rap籃球",
    rap:function(){
        console.log("X你太美")
    }
}

console.log(student)
student.rap()
  • 優勢:寫起來簡單方便
  • 缺點:若是要生成大量的相似的對象,那麼將會寫一堆重複的代碼

1.2 工廠模式

function Student(name,type,like){
    return {
        name:name,
        type:type,
        like:like,
        rap:function(){
            console.log("X你太美")
        }
    }
}

var s1 = Student("某某某","籃球運動員",'籃球')
console.log(s1)
  • 優勢:能夠快速生成批量的對象
  • 缺點:對象的一樣的方法(函數),每建立一個對象,都會生成一個一摸同樣的函數,因此會佔用不少沒必要要的內存

1.3 構造函數建立對象

function Teacher(name,type){
    this.name = name;
    this.type = type;
    this.rap = function(){
        console.log(":)");
    }
}

var t1 = new Teacher('蒼老師','演員');
t1.rap();

若是不用 new 來調用函數,那麼就是一個普通的函數調用,而且 this 的指向是 window 關鍵字
若是用了 new,就會建立一個新的對象,而且將對象給到 t1css

這種方法仍是會生成不少一樣的方法,咱們能夠這樣改進:html

function Teacher(name,type){
    this.name = name;
    this.type = type;
    /*
    this.rap = function(){
        console.log(":)");
    }
    */
}
Teacher.prototype.rap = function () {
    console.log(':)');
}
var t1 = new Teacher('蒼老師','演員');
t1.rap();

這樣就可讓多個 Teacher 的對象共用一個方法,咱們能夠在控制檯中看到,實際上這個方法存在父類(prototype)裏面。java

1.4 ES6 的 class 寫法

前面的方法其實邏輯多少都有點怪異,咱們通常採用這種 class 的寫法。只是語法變得更人性化,實際上的底層操做方式,仍是前面三種方法。es6

class Student{
    constructor(name,type){
        this.name = name;
        this.type = type;
    }
    rap(){
        console.log(':(');
    }
}
var t2 = new Student('加藤鷹','演員');

經過控制檯能夠看到,底層的處理方式是同樣的,可是這種寫法更易於解讀。數組

2 繼承

這裏直接讓 Student 繼承 Teacherapp

function Teacher(name,type){
    this.name = name;
    this.type = type;
    /*
    this.rap = function(){
        console.log(":)");
    }
    */
}
Teacher.prototype.rap = function () {
    console.log(':)');
}
var t1 = new Teacher('蒼老師','演員');
t1.rap();

class Student extends Teacher{
    constructor(name,type){
        super();
        this.name = name;
        this.type = type;
    }
    rap(){
        console.log(':(');
    }
}
var t2 = new Student('加藤鷹','演員');

注意,子類的構造器必定要有 super() 語句,調用父類構造器。dom

當咱們用控制檯調用 t2 的 rap 方法,輸出是 「:(」,咱們要經過 t2._proto_._proto_.rap() 才能訪問到父類的同名方法。函數

3 DOM 對象

DOM 對象,就是 HTML 頁面的文檔對象。整個網頁的顯示,都由 Document 對象構成。文檔對象又由許多的元素對象構成,文檔對象就有許多的屬性和方法,用來操縱整個頁面的顯示,以及事件的處理。全部的元素對象最終組成龐大的 DOM 樹。this

3.1 查找 DOM 對象

在 ES5 之前,咱們能夠經過 ID,class,標籤名查找元素對象。

//經過ID查找元素對象
var d1 = document.getElementById("d1")
console.log(d1)
//經過class查找元素對象
var abc = document.getElementsByClassName('abc')
console.log(abc)
//經過標籤名稱查找元素對象
var div = document.getElementsByTagName("div")
console.log(div)

經過 class 和 標籤名找出來的是元素數組

ES5 後,能夠用咱們寫 css 時的選擇器的方式查找元素對象,更精確,更方便。

//選擇單個元素,document.querySelector,選擇器的寫法,直接使用css選擇器的寫法,選擇器若是可以匹配過個元素,那麼只選擇第一個元素
var div1 =  document.querySelector("div")
console.log(div1)
var id1 = document.querySelector("#d1")
console.log(id1)
var abc1 = document.querySelector('body .abc')
console.log(abc1)

//選擇多個元素,document.querySelectorAll()
var abc2 = document.querySelectorAll("#d1")
console.log(abc2)

3.2 設置 DOM 對象

找到了咱們所須要的元素以後,咱們就須要對元素內部的屬性進行修改。

標籤間的內容都存儲在元素的 innerHTML 屬性裏面,例如咱們想對某個 style 標籤的內容進行修改:

s1.innerHTML = 'h1{color: red;}';

咱們也能夠在得到元素對象後,直接設置元素的樣式:

element.style.background = "skyblue";
element.style.Color = "yellow";

咱們能夠在元素(標籤)內再插入元素(標籤)。步驟是先用 creatElement 方法建立子元素,接着設置好子元素的內容後,用父元素的 appendChild 方法將其插入。

//建立元素
var s1 = document.createElement("style")
//設置s1的innerHTML的內容
s1.innerHTML = 'h1{color: red;}';
//將style元素插入到HTML頁面的body裏
document.body.appendChild(s1)

元素具備的全部屬性咱們均可以經過控制檯查看並對其進行修改,方法和上述方法都大同小異。

4 事件

每個事件調用的執行函數,都會默認傳入一個事件對象,這個對象會包含當次事件的相關信息,例如點擊、鼠標的移動、鍵盤的按鍵、手指的觸屏、聚焦等等。事件根據捕獲方式分爲「冒泡事件」、「捕獲事件」。

冒泡事件:事件由最裏面一層一層向上觸發,直到HTML元素,那麼這種事件模式就是冒泡事件。默認狀況下就用冒泡。
捕獲事件:由HTML開始一層一層向下出發,直到最小的子元素,那麼這種事件模式就是捕獲

4.1 on

咱們能夠經過 "on事件名稱 = function(){}" 的方法設置時間,這種方法簡單方便,但缺點也很明顯,一個事件只能調用一個函數,並且只能是「冒泡事件」。

h1.onclick = function(){
    h1.style.backgroundColor = "deeppink"
}

這種寫法能夠寫在 script 標籤裏,也能夠直接在元素的標籤內做爲屬性寫入,屬性的值爲一個方法,例如

<h1 onclick="abc()">helloworld</h1>
<script type="text/javascript"> 
    function abc(){
        h1.style.color = "skyblue"
    }
</script>

4.2 addEventListener

這種方式是 ES5 以後纔有的,同一事件能夠經過幾個 addEventListener 語句調用多個函數,並且能夠手動設置是捕獲事件仍是冒泡事件。語法:

h1.addEventListener("事件的名稱",事件調用起的函數(),true/false(捕獲/冒泡))

最後一個參數省略就是默認 false

4.3 事件對象

每次事件調用執行函數前,會將對應的事件對象做爲參數傳入,例如對於點擊事件,咱們能夠經過事件得到點擊點的座標,點擊的時間等信息。

<h1>helloworld</h1>
<script type="text/javascript">
    var h1 = document.querySelector('h1')
    h1.onclick = function(event){
        //事件對象會存放這一次事件的相關信息
        console.log(event)
    }
</script>
相關文章
相關標籤/搜索