💻 【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 = nameobj.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 = nameobj.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>