面向對象

一、屬性與方法

//創建一個對象
var obj = {}; | var obj = new Object();
// 屬性
obj[‘name‘] = ‘大毛‘; | obj.name = ‘大毛‘;
// 方法
obj.func = function () {
    //body....
}
// 刪除屬性與方法
delete obj.prop
delete obj.func

關於之前的變量汙染的問題，可以通過對象來解決

// 學習目的:對象的(臨時)屬性可以幫助存儲臨時數據,因為臨時數據的生命周期往往很短.需要提示臨時數據的生命周期
// 臨時數據會隨屬性的消亡而消亡 | 被主動移除(delete)
var lis = document.querySelectorAll(‘li‘);

for (var i = 0; i < lis.length; i++) {
    // lis[i]依次代表五個li頁面元素對象
    // 給每一個li設置一個(臨時)屬性
    lis[i].index = i;  // 第一個li的index屬性存儲的就是索引0,以此類推,最後一個存儲的是索引4

    lis[i].onclick = function () {
        // var temp = lis[i].index; 
        // lis[i]中的i一樣存在變量汙染
        var temp = this.index;  // 當前被點擊的li
        alert(temp)  
        // temp => this.index(lis[i].index) => i(索引)
    }
}
 

二、構造函數

1.什麽是構造函數

? 在程序語言中，如java，都存在類的概念，類就是對象的模板，對象就是類的實例。但在js中不存在類的概念，js不是基於類，而是通過構造函數和原型鏈實現的。

構造函數其實就是普通函數
特定的語法與規定:
? 1.一般采用首字母大寫(大駝峰)
? 2.內部可以構建屬性與方法,通過this關鍵詞

實例

function People(name) {
    this.name = name;
    this.eat = function (agr) {
        console.log(this.name + "吃" + agr);
    }
}

// new關鍵詞, 創建對象並實例化
var p1 = new People("zero");  
var p2 = new People("seven");

// 使用屬性
console.log(p1.name);
console.log(p2.name);

// 使用方法
p2.eat("霸王餐");

// p1,p2就是People構造函數創建出來的對象
console.log(p1);
 

總結:
? 1.構造函數可以創建多個對象,{}構建出的對象是唯一的
? 2.屬性與變量的語法規則不一樣

var obj = {
    //屬性
    index: "obj對象",
    //方法
    fn: function () {
        console.log("obj方法");
    }
};
// 使用屬性與方法
console.log(obj.index);
obj.fn();

三、類字典結構使用

? js中沒有字典,但可以通過對象實現字典方式存儲數據,並使用數據。

var dict = {
        key1: "value1",
        key2: 18,
        "my-key3": [1, 2, 3, 4, 5]
}
 

總結:

1. key全為字符串形式,但存在兩種書寫方式
2. key在js標識符語法支持情況下,可以省略引號,但key為js標識符不支持的語法情況下,必須添加引號
3. value可以為任意類型
4. 訪問值可以通過字典名(對象名).key語法與["key"]語法來訪問value
5. 可以隨意添加key與value完成增刪改查

// 增
dict.key4 = true;
console.log(dict);

// 刪
delete dict.key4;
console.log(dict);

// 改
dict["my-key3"] = [5, 4, 3, 2, 1];
console.log(dict);

// 查
console.log(dict.key1);
console.log(dict["key1"]);

四、繼承（ES5）

// 父級
function Sup(name,age) {
    this.name = name;
    this.age = age;
    this.fn = function () {
        console.log(‘fn class‘);
    }
}
// 創建父級對象
var sup = new Sup("supClass"，18);
console.log(sup);

// 子級
function Sub(name) {
    // 繼承父級的屬性
    Sup.call(this, name，age);
}
// 繼承方法
Sub.prototype = new Sup;
// 創建子級對象
var sub = new Sub("subClass");
// 使用屬性
console.log(sub.name,sub.age);
// 使用方法
sub.fn();

// 指向自身構造函數
Sub.prototype.constructor = Sub;

五、類及繼承（ES6）

// 父類
class People {
    // 構造器:創建對象完成初始化操作
    constructor (name, age) {
        this.name = name;
        this.age = age;
    }
    // 實例方法:只能由對象調用
    eat () {
        console.log(‘吃吃吃‘);
    }
    // 類方法:只能由類調用
    static create () {
        console.log(‘誕生‘);
    }
}
// 子類繼承，為全繼承
class Student extends People {
    constructor (name, age，sex) {
        // super關鍵詞指向父級
        super(name, age);
        //子級自身的屬性
        this.sex = sex;
    }
}

四、定時器

setInterval

語法

//setTimeout(函數, 毫秒數, 函數所需參數(可以省略));
console.log("開始");
setTimeout(
    function (data) {
        console.log(data);
    }, 1000, "數據"
);
console.log("結束");

setTimeout

語法

//setInterval(函數, 毫秒數, 函數所需參數(可以省略));
console.log("又開始");
var timer = setInterval(
    function() {
        console.log("呵呵");
    }, 1000
);
console.log(timer);
console.log("又結束");

清除定時器

1. 持續性與一次性定時器通常都應該有清除定時器操作
2. 清除定時器操作可以混用 clearTimeout() | clearInterval()
3. 定時器的返回值就是定時器編號,就是普普通通的數字類型

document.onclick = function () {
    console.log("定時器清除了");
    clearInterval(timer); | clearTimeout(timer);
}

清除所有定時器

// 如果上方創建過n個定時器,那麽timeout值為n+1
var timeout = setTimeout(function(){}, 1);
for (var i = 0; i < timeout; i++) {
    // 循環將編號[0, n]所有定時器都清除一次
    clearTimeout(i)
}
// 1.允許重復清除
// 2.允許清除不存在的定時器編號

DAY57-前端入門-javascript（四）面向對象