划重点--面向对象的作用及其特点，还有小案例分享哦

本文链接：https://blog.csdn.net/qq_44381873/article/details/104724712

我们平时所说的面向对象其实是一种解决问题的方式，不是专门的编程方式。

那么我们怎么用面向对象实现编程呢？首先，我们看看怎么创建一个面向对象。

创建对象有两种方式：1、字面量，例如

var obj = {name:"admin"};
        obj.age = 18;

2、内置的构造函数，例如

 var obj1 = new Object();
       obj1.name = "root";

我们给上述方法做一个简单的封装：

1、自定义的工厂函数（工厂模式）：

function createPerson(n,a,s){
        var person = {};        
        person.name = n;
        person.age = a;
        person.sex = s;
        person.sayHello = function(){
            console.log(this.name + "---" + this.age)
        }
        return person;
    }

    var p1 = createPerson("zhangsan",18,"男");
    console.log(p1);
    p1.sayHello();

    var p2 = createPerson("lisi",19,"女");
    console.log(p2);
    p2.sayHello();

2、内置了工厂函数：自定义构造函数


    function createPerson(n){
        this.name = n;
    }
    var p1 = new createPerson("lisi");
    console.log(p1);

    var p2 = createPerson("zhangsan");
    console.log(p2);
    console.log(name);

new是一个执行关键字
new关键字的内部执行原理：
1.自动创建一个新对象，在内存中存着，此时拿不到;
2.改变了函数内部的this指向，改成了第一步创建的新对象;
3.执行函数内部的代码，并且将第一步创建的对象的__proto__与函数的prototype做了关联;
4.检查当前函数是否主动返回对象，如果没有，则返回第一步创建的新对象.

下面我们再来看：自定义构造函数的基础语法

function createPerson(n,a,s){
        this.name = n;
        this.age = a;
        this.sex = s;
        this.sayHello = function(){
            console.log(this.name + "---" + this.age);
        }
    }

切记：如果在构建函数时，使用this找将来的对象，那么，这个函数绝对不要正常执行，否则会造成全局污染，而且除了污染的信息，什么都得不到，必须通过new执行，才会触发new的工作原理，实现创建一个对象的需求。

那么我们在定义一个函数或看到别人的函数时，怎么判断用new还是不用new呢？
根据行业规范，使用习惯，凡是将来需要通过new执行的函数，统一使用大驼峰式命名，例如
String();
Object();
Array();
RegExp();

new CreatePerson();

我们按照平时习惯构造一个函数，例如：

 function CreatePerson(n,a,s){
        this.name = n;
        this.age = a;
        this.sex = s;
        this.sayHello = function(){
            console.log(`我叫${this.name}，今年${this.age}岁，性别${this.sex}`);
        }
    }

    var p1 = new CreatePerson("王二",18,"女");
    var p2 = new CreatePerson("王二",18,"女");

    console.log(p1);
    console.log(p2);

    p1.sayHello();
    p2.sayHello();

当一个构造函数被多次new时，如果函数内部通过this设定了方法，那么多次new之后，会在内存中产生多个相同的功能，非常浪费内存，产生太多的多余方法，没有必要，为了节省资源，需要将这多个多余功能，修正，以节省内存，这就进入到了"原型"的概念。

首先明确原型是一个对象，

var p1 = new createPerson();
    console.log(p1);
    console.log(p1.__proto__);

上述代码起名叫隐式原型，这是实例身上的隐式原型，是为了标记当前实例的来源函数的原型对象。

原型链：
一般情况下，一个对象类型的数据，必然会有一个隐式原型，这个隐式原型作为当前对象的父级存在。

prototype：专属于函数的一个属性，类型为对象，叫原型对象。
作用：为了给将来自身所在的构造函数被new出来的实例做父级使用的

__proto__：专属于对象数据的一个属性，类型为对象，叫隐式原型。作用：找父级。
特性：
1.当某个对象自身不具有某个属性或方法时，会找父级；
2.当这个对象是被new出来的实例时，这个对象的父级(__proto__)就是当前被new的这个构造函数的prototype；

意味着：通过构造函数找到prototype，添加的属性或方法，在将来new出来的实例的父级身上都可以找到。构造函数的问题的解决方案：
在使用构造函数方式创建对象时：
把将来的属性，写在构造函数内部，通过this绑定给将来的实例；
把将来的方法，写在构造函数的原型上，会自动被将来的实例获取。

下面根据一个小案例感受一下面向对象的便捷之处：面向对象--选项卡。

    function Tab(){
        this.li = document.querySelectorAll(".box li");
        this.cont = document.querySelectorAll(".cont div");
    }

    Tab.prototype.addEvent = function(){
        var that = this;
        for(let i=0;i<this.li.length;i++){
            this.li[i].onclick = function(){
                // console.log(1);
                // this.setActive(i);
                // console.log(this.setActive);
                // console.log(that);

                that.setActive(i);
            }
        }
    }


    Tab.prototype.setActive = function(iNow){
        for(var i=0;i<this.li.length;i++){
            this.li[i].className = "";
            this.cont[i].style.display = "none";
        }

        this.li[iNow].className = "active";
        this.cont[iNow].style.display = "block";
    }

    var t = new Tab();
    t.addEvent();

效果如下：