Javascript - 面向对象

1 建立对象

在 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，就会建立一个新的对象，而且将对象给到 t1

这种方法仍是会生成不少一样的方法，咱们能够这样改进：

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）里面。

1.4 ES6 的 class 写法

前面的方法其实逻辑多少都有点怪异，咱们通常采用这种 class 的写法。只是语法变得更人性化，实际上的底层操做方式，仍是前面三种方法。

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

经过控制台能够看到，底层的处理方式是同样的，可是这种写法更易于解读。

2 继承

这里直接让 Student 继承 Teacher

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() 语句，调用父类构造器。

当咱们用控制台调用 t2 的 rap 方法，输出是 “:(”，咱们要经过 t2._proto_._proto_.rap() 才能访问到父类的同名方法。

3 DOM 对象

DOM 对象，就是 HTML 页面的文档对象。整个网页的显示，都由 Document 对象构成。文档对象又由许多的元素对象构成，文档对象就有许多的属性和方法，用来操纵整个页面的显示，以及事件的处理。全部的元素对象最终组成庞大的 DOM 树。

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>