面向对象

面向对象的概念：
1.首先面向对象不是一种语法，是一种编程的思想。
2.平时的编程是自己完成所有事情，面向对象是将自己的事情交给对象来做，明确分工。
优点：面向对象的特征就是模块化。当需要实现某一功能的时候，不需要大动干戈，只需要修改实现这一功能的对象即可。
 
如何创建对象：
1.直接创建：
var obj={}

2.构造函数创建：

var obj =new object（）；

创建完对象后我们需要向里面放入内容，如果定义每个人信息，需要创建多次，这时候我们就要定义一个函数，每次调用都能得到一个对象（工厂函数）

function createObj(name,age,sex){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sex = sex;
    return obj;
}
var obj1 = createObj("张三",12,"男");
var obj2 = createObj("李四",13,"女");
var obj3 = createObj("王五",11,"女");

这种批量操作，叫做工厂函数。创建出来的每个对象结构一致。

构造函数和普通函数不同的地方在于使用new的时候，中间发生了很多看不见的过程：
1. 创建了一个新对象
2. this指向了这个新对象（新对象就有了属性，创建了属性）
3. 执行构造函数，也就是调用了这个函数（给对象添加属性和方法，给属性和方法赋值）
4. 返回这个新对象
构造函数的作用：
​给对象添加属性和方法，我们专业点将这个过程称之为--实例化
 
原型：概念：
                 1.任何函数在创建好的时候，浏览器会分配一个对象给这个函数，通过函数的prototype可以访问到这个对象。这个对象叫做原型对象，简称原型。

                 2.通过new构造函数实例化出来的对象默认可以访问到这个对象的属性和方法。对象访问属性的时候，先找自己有没有，自己有就直接使用，自己没有就去原型对象上找
 
                 3.任何对象都有一个属性叫做`__proto__` 这个属性可以访问到对应的构造函数的原型对象，也就是构造函数的`prototype`属性的值（原型对象也有原型自己的构造函数和原型对象）
function Person(){
    
}
var obj = new Person(); // 通过构造函数创建了对象obj
var proto = obj.__proto__; // 通过实例对象访问到原型对象
console.log(proto);

原型链

这样向上的一条链式结构，我们称之为原型链。

 

 
这样向上的一条链式结构，我们称之为原型链。
 
对象查找属性的规则：

先在自己身上找,如果有,直接使用,如果没有,顺着原型链往上找,找到了就使用,找不到就继续往上找,如果找到了null,都没有的话,就返回undefined;

但是对象属性赋值和原型没关系，有就修改，没有就增加。

 

案例：面向对象版Tab：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
    .box{
        height:430px;
        width:500px;
        border:1px solid #000;
        overflow:hidden;
        cursor:pointer;
    }
    .box ul,.box ol{
        list-style: none;
        padding: 0;
        margin: 0;
        width:500px;
    }
    .box ul{
        height:30px;
        background:#ccc;
        line-height: 30px;
        display:flex;
        justify-content: space-evenly;
        color:#fff;
    }
    .box ul li{
        float:left;
        width:150px;
        background:#0f0;
        text-align:center;
    }   
    .box ol{
        height:400px;
    }
    .box ol li{
        display:none;
    }
    .box ol li.current{
        display:block;
    }
    .box ol li img{
        width:500px;
        height: 400px;
    }
    .box ul li.current{
        background:#999;
        display:block;
    }
</style>
<body>
<div class="box">
    <ul>
        <li class="current">绿色</li>
        <li>粉色</li>
        <li>蓝色</li>
    </ul>
    <ol>
        <li class="current"><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
    </ol>
</div>
</body>
<script type="text/javascript">
function Tab(className){
    var box = document.querySelector("."+className);
    this.ulis = box.querySelectorAll(".box ul li");
    this.olis = box.querySelectorAll(".box ol li");
    for(var i=0;i<this.ulis.length;i++){
        this.ulis[i].index = i;
        var ele = this;
        this.ulis[i].onclick=function(){
            ele.toggle(this);
        }
    }
}
Tab.prototype.toggle=function(ele){
    for(var i=0;i<this.ulis.length;i++){
        this.ulis[i].className = '';
        this.olis[i].className = '';
    }
    ele.className = 'current';
    this.olis[ele.index].className = 'current';
}
var TabBox = new Tab("box");
</script>
</html>

 

 

posted @ 2020-07-13 20:38  一路向北®  阅读(86)  评论(0)    收藏  举报