js有关面向对象的问题

在介绍面向对象时，我们首先要搞清楚什么是面向过程和面向对象？
答：面向对象不是一种语法，是一种编程的思想。面向的意思就是“脸朝向”，表示关注的意思。那面向对象就是脸朝着对象，关注着对象的意思。之前的编程模式为：关注每一个元素，然后是他们的顺序，关系。这种编程的模式称之为面向过程。学习面向对象之后的编程模式为：找一个对象来做这件事情，等待结果即可。这就是面向对象。

介绍完面向对象的含义之后，那我们又是怎么用面向对象的呢？
答：实际上，js中的面向对象编程，就是创建对象，给对象添加属性和方法。上一问也说了我们要找一个对象来做这件事，所以我们首先要创建一个对象，那创建对象有哪些方法，各自的缺点又是什么？
一.字面量方法创建变量
var obj = {}
添加属性 :

 var obj={};
    console.log(obj);
    obj.name='张三';
    obj.age='20';
    obj.sex='女';
    console.log(obj);

运行结果：

2.png

缺点：可想而知，如果想给对象添加很多属性，手动添加是不现实的。

二.构造函数方式创建
var obj = new Object()；
给这样的对象添加属性和方法的语法：
对象.属性名 = 值;
对象.方法名 = 函数;

var obj = new Object();
 var obj1 = new Object();
obj1.name = "张三";
obj1.age = 12;
obj1.sex = '男';

var obj2 = new Object();
obj2.name = '李四';
obj2.age = 13;
obj2.sex = '女';

var obj3 = new Object();
obj3.name = '王五';
obj3.age = 11;
boj3.sex = '女';

缺点：从上面的代码可以看出来，每次创建对象都是在重复动作这时候，应该用函数来处理重复动作。

三.工厂函数创建对象（定义一个函数，每次调用都能得到一个对象）
定义：这种调用就能创建对象的函数，叫做工厂函数。创建出来的每个对象的结构一致
使用方法如下：

function createObj(name,age,sex){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sex = sex;
    return obj;
}
var obj1 = createObj("lili",19,"女");
var obj2 = createObj("Bella",20,"女");
var obj3 = createObj("chen",19,"女");
console.log(createObj);

缺点：创建出来的没有具体的类型，都是object类型的，如下图所示

6.png

解决方案：为了解决这个问题后面又介绍自定义构造函数。其实相当于自己写一个函数，专门用来new对象。

四.自定义构造函数
用法如下：

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
var obj1 = new Person("张三",12,"男");
var obj1 = new Person("李四",13,"女");
var obj1 = new Person("王五",11,"女");

当看到这个代码的时候，我们一定会觉得陌生，因为我们不知道这个this指的是谁等
但其实是因为：构造函数和普通函数不同的地方在于使用new的时候，中间发生了很多看不见的过程：
a. 创建了一个新对象
b. this指向了这个新对象（新对象就有了属性，创建了属性）
c. 执行构造函数，也就是调用了这个函数（给对象添加属性和方法，给
属性和方法赋值）
d. 返回这个新对象

缺点1：
一个构造函数中给对象添加了一个方法，然后创建了两个对象，这两个对象都有这个方法，并且这两个方法一模一样，但是这个方法在内存中却是两个空间，这样对于内存空间来说有点浪费，因为两个对象的方法是一样的但是却占了两个空间。代码如下：

function Person(name){
    this.name = name;
    this.say=function(){
        console.log("说话");
    }
}
var obj1 = new Person("张三");
var obj2 = new Person("李四");
console.log(obj1.say == obj2.say); // false  表示这是两个空间

解决办法：如果将方法定义在对象外面，可以解决这个问题。代码如下：

    this.name = name;
    this.age = age;
    this.sayHi = fn;
}
function fn(){
    console.log("我是" + this.name + "，今年" + this.age + "岁");
}
var zs = new Person("张三",12);
var ls = new Person("李四",13)

缺点2：
在后期我们使用插件或者定义别的函数的时候有可能会造成覆盖的现象。所以这个解决方案解决不彻底。
解决办法：
使用原型可以完美解决这个问题。原型的问题我们接下来继续介绍。

五.原型
概念：任何函数在创建好的时候，浏览器会分配一个对象给这个函数，通过函数的prototype可以访问到这个对象。这个对象叫做原型对象，简称原型。通过new构造函数实例化出来的对象默认可以访问到这个对象的属性和方法。
通过代码理解原型：

function fun(){}
console.log(fun.prototype);

7.png

给这个原型添加属性和方法，使用实例对象可以访问到。

function Person(){
    
}
Person.prototype.name = '赵六';
Person.prototype.say=function(){
    console.log("说话");
}
var obj = new Person();
console.log(obj); // 赵六
obj.say(); // 说话

对象想访问到原型对象，可以使用__proto__属性。
<font color="red">**任何对象都有一个属性叫做__proto__ 这个属性可以访问到对应的构造函数的原型对象，也就是构造函数的prototype属性的值
结论：我们以后创建对象就使用构造函数，多个对象要使用同一个方法或属性，就把这个属性或方法绑定到原型上。

六.构造函数、实例对象、原型对象三者之间的关系

对象的原型.png

七.案例
利用面向对象版Tab来练习一下以上的知识点

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<style>
   /* 先写好布局 */
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
.content{
    width: 300px;
    height: 250px;
    border:1px solid #000;
}
ul{
    display: flex;
    height:50px;
    justify-content: center;
    align-items: center;
}
ul li{
    width: 60px;
    height: 50px;
    line-height: 50px;
    text-align:center;
    background-color: #aaa;
}
ul li.active{
    background-color: #f00;
    color:#fff;
}
ol{
    height: 200px;
}
ol li{
    height: 200px;
    display:none;
}
ol li img{
    height: 200px;
    width: 300px;
}
ol li.active{
    display: block;
}
</style>
<body>
<div class="content">
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ol>
        <li class="active"><img src="./images/1.jpg"></li>
        <li><img src="./images/2.jpg"></li>
        <li><img src="./images/3.jpg"></li>
        <li><img src="./images/4.jpg"></li>
        <li><img src="./images/5.jpg"></li>
    </ol>
</div>
</body>
<script type="text/javascript">
/*1.定义一个空的构造函数      2.new*/
function Tab(){
    // 3.将需要操作的元素作为对象的属性
    this.ulis = document.querySelectorAll("ul li");
    this.olis = document.querySelectorAll("ol li");
    var _this = this;
    // 需要给属性绑定事件,但是操作不能放在里面，需要调用方法
    for(let i=0;i<this.ulis.length;i++){
        this.ulis[i].onclick = function(){
            _this.qiehuan(this,i);
        }
    }
}
Tab.prototype.qiehuan = function(a,j){
    for(var i=0;i<this.ulis.length;i++){
        this.ulis[i].className = '';
        this.olis[i].className = '';
    }
    a.className = 'active';
    this.olis[j].className = 'active';
}   
var tab = new Tab()
</script>
</html>