DAY57-前端入门-javascript面向对象

Posted 2021-01-13 LIFE

面向对象

一、属性与方法

//创建一个对象
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.允许清除不存在的定时器编号