💻 【JavaScript】理解面向对象以及构造函数的推导 🏠专栏：JavaScript
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁

文章目录

JavaScript 理解面向对象以及构造函数的推导
- 一. 面向对象和面向过程
- - (1) 面向过程的基本概念
  - (2) 面向对象的基本概念
- 二. 面向对象和面向过程的区别
- 三. 构造函数的推导
- 四. 构造函数
- - (1) 概念
  - (2) 构造函数特点总结
  - (3) 构造函数案例

JavaScript 理解面向对象以及构造函数的推导

一. 面向对象和面向过程

(1) 面向过程的基本概念

面向过程(Procedure Oriented)是一种以过程为中心的编程思想。

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。是一种思考问题的基础方法。

简单理解：面向过程就是任何事情都亲力亲为，很机械，像个步兵。

(2) 面向对象的基本概念

面向对象(Object Oriented)是软件开发方法中的一种；是一种对现实世界理解和抽象的方法；是思考问题相对高级的方法。

面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。

简单理解：面向对象就像战场上的指挥官，指挥战斗而不必知道具体执行的过程。

注：面向对象：对象来自于类，必须先有类在有对象，类在js中也叫构造函数。

面向对象和面向过程的联系：面向对象就是面向过程的封装。

二. 面向对象和面向过程的区别

面向对象是相对面向过程而言的，面向对象包含了面向过程的思想。
面向过程就是分析出解决问题所需要的步骤，关注的是解决问题需要那些步骤。
面向对象是把构成问题事务分解成各个对象，关注的是解决问题需要那些对象。

三. 构造函数的推导

推导过程🌟：面向对象 => 对象 => 创建对象 => 代码冗余 => 工厂函数 => 识别问题 => 以系统对象为参考 => 推导出构造函数

详细的推导过程：

首先，创建一个对象，添加属性和方法

let obj1 = new Object();
obj1.name = 'zs';
obj1.age = 18;
obj1.showinfo = function () {
    console.log(`我的名字叫${this.name},我今年${this.age}岁`);
};
obj1.showinfo() // 我的名字叫zs,我今年18岁

提到创建一个对象，是不是想问，可不可以创建多个对象=>可以，最原始的方法：重复创建。

let obj1 = new Object();
obj1.name = 'zs';
obj1.age = 18;
obj1.showinfo = function () {
    console.log(`我的名字叫${this.name},我今年${this.age}岁`);
}

let obj2 = new Object();
obj2.name = 'lisi';
obj2.age = 17;
obj2.showinfo = function () {
    console.log(`我的名字叫${this.name},我今年${this.age}岁`);
}

let obj3 = new Object();
obj3.name = 'wangwu';
obj3.age = 19;
obj3.showinfo = function () {
    console.log(`我的名字叫${this.name},我今年${this.age}岁`);
}

显然上述创建多个对象的方式非常的麻烦，而且造成了代码的冗余，此时有什么办法可以解决呢❓ => 函数封装

function createPerson(name, age) { 
    let obj = new Object();
    obj.name = name
    obj.age = age;
    obj.showinfo = function () {
        console.log(`我的名字叫${this.name},我今年${this.age}岁`);
    };
    return obj;
}

let obj1 = createPerson('zs', 18);
console.log(obj1.name); // zs
obj1.showinfo(); // 我的名字叫zs,我今年18岁

let obj2 = createPerson('lisi', 17);
console.log(obj2.name); // lisi
obj2.showinfo(); // 我的名字叫lisi,我今年17岁

let obj3 = createPerson('wangwu', 19);
console.log(obj3.name); // wangwu
obj3.showinfo(); // 我的名字叫wangwu,我今年19岁

注：封装完成，可以解决创建多个对象代码冗余问题，而且将这一函数称之为工厂函数。

此时，使用函数封装确实可以解决创建多个对象代码冗余问题，但是工厂函数无法解决识别问题。无法像Array，Date一样虽然属于对象，拥有自己独立的名称。

因为创建的对象都是基于new Object()完成的，通过工厂函数看得见的。

function createPerson(name, age) { // 工厂函数
    let obj = new Object();
    obj.name = name
    obj.age = age;
    obj.showinfo = function () {
        console.log(`我的名字叫${this.name},我今年${this.age}岁`);
    };
    return obj;
}

继续以系统对象为参考，于是在调用函数的前面添加new关键字，得到最终构造函数。

构造函数：new关键字调用，首字母大写，根据前面的概念，构造函数就是类，同时也知道系统的类是如何产生的。

以 new 操作符调用函数的时候，函数内部发生以下变化：

1.创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。

2.属性和方法被加入到this引用的对象中。

3.并且最后隐式的返回this。

function CreatePerson(name, age) { // 构造函数，构造函数里面的this指向实例对象，createPerson:类(构造函数)
    this.name = name; // 属性
    this.age = age; // 属性
    this.showinfo = function () { // 方法
        console.log(`我的名字叫${this.name},我今年${this.age}岁`);
    };
}

let obj1 = new CreatePerson('zs', 18); // obj1:实例对象
console.log(obj1.name);
obj1.showinfo();

let obj2 = new CreatePerson('lisi', 17); // obj2:实例对象
console.log(obj2.name);
obj2.showinfo();

let obj3 = new CreatePerson('wangwu', 19); // obj3:实例对象
console.log(obj3.name);
obj3.showinfo();

注：构造函数里面不要书写return

因为构造函数里没有显式调用return，默认返回的是this对象，也就是新创建的实例对象。

四. 构造函数

(1) 概念

构造函数其实就是一个函数，只不过使用的时候需要和new 关键字连用，首字母大写。

和普通函数一样，只不过调用的时候要和 new 调用，不然就是一个普通函数调用

const fn = function(age) {
    let a = 1; // 块作用域，外面无法获取，内部使用
    var b = 2; // 局部变量，外面无法获取，内部使用
    this.age = age; // 属性，实例对象可以自由获取，this->实例对象    
};

let f1 = new fn(18);
let f2 = new fn; // 这种写法也支持，弊端是无法传递参数

注意：不写 new 的时候就是普通函数调用，没有创造对象的能力，但如果只是首字母不大写，只要和 new 连用，就有创造对象的能力。

(2) 构造函数特点总结

首字母大写(推荐)

方便区分
构造函数里面不要书写return

构造函数里没有显式调用return，默认返回的是this对象，也就是新创建的实例对象。

当构造函数里调用return时，分两种情况：

1.return的是五种简单数据类型：String，Number，Boolean，Null，Undefined。

这种情况下，忽视return值，依然返回this对象。

2.return的是Object

这种情况下，不再返回this对象，而是返回return语句的返回值。
构造函数的调用必须和new连用

只有和new连用，才有构造函数的能力，不和new连用，就是一个普通函数
构造函数的this
构造函数的this指向：本次调用被自动创建的对象
- 自动创建出来的对象叫做 实例对象
- 这个创建对象的过程叫做 实例化的过程
箭头函数没有this , 构造函数不能使用箭头函数书写

(3) 构造函数案例

创建拖拽的构造函数📝

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
    }
    .box1 {
        width: 100px;
        height: 100px;
        background-color: blue;
        position: absolute;
        left: 300px;
    }
    .box2 {
        width: 100px;
        height: 100px;
        background-color: orange;
        position: absolute;
        left: 600px;
    }
</style>

<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
<script>
    function Drag(selector) { // 创建拖拽的构造函数
        // this -> 实例对象
        this.box = document.querySelector(selector); // 属性
        this.init = function () { // 初始化方法
            this.box.onmousedown = (e) => {
                e = e || event;
                let sx = e.offsetX;
                let sy = e.offsetY;
                document.onmousemove = (e) => {
                    e = e || event;
                    this.box.style.left = e.clientX - sx + 'px';
                    this.box.style.top = e.clientY - sy + 'px';
                };
                document.onmouseup = () => {
                    document.onmousemove = null;
                }
            }
        };
    }
    // let d1 = new Drag('.box');
    // d1.init();
    // let d1 = new Drag;
    // d1.init();
    new Drag('.box').init();
    new Drag('.box1').init();
    new Drag('.box2').init();
</script>