JS的面向对象
大神之所以是大神，是他在给你讲理论的时候，带出了活生生、香喷喷的生活画面。
🌶️🍅💉💦🐮🍺
JS的面向对象
什么是面向对象？
对象就是个黑盒子，我们不了解其内部结构，只知道表面的各种操作（按钮）。
比如我们以📺为例，虽然我们不知道它的内部工作原理，有哪些零件，电路怎么走，但是我们用那些按钮就能播放节目，这就是面向对象。
面向对象就是在不了解原理的情况下，会使用其功能😃。面向对象是一种通用思想，并非只有编程中使用，任何事情都可以用。计算机才出来几年啊，在计算机之前早就有这种说法了，只是编程的时候借鉴了这种来源于生活的说法。
面向对象编程(OOP)的特点
- 抽象
关键是抽，就是把最主要的特征、跟问题相关的特征抽出来。
- 封装
看不到里面的东西，用好表面的功能就行了。
- 继承
从父类上继承出一些方法、属性，子类又有一些自己的特性。
目的就是最大限度重用已有的代码。
对象的组成
- 属性
变量和属性其实是一回事儿，变量能做什么，属性就能做什么。
区别是：变量是自由的，不属于任何人；属性是不自由的，属于一个对象。
示例代码：
var a = 12; // 变量：自由的，不属于任何人 alert(a); var arr = [1, 23, 5]; arr.a = 12; // 属性：属于一个对象 alert(arr.a);再用生活中的例子来说明一下：比如两个人是男女朋友的时候，在结婚之前叫女朋友（是自由的，还是两家人）👫，在结婚后叫老婆（不自由了，是一家人）💑。人还是那个人，没有变化，变得是两个人之间的关系。
- 方法
函数和方法也是一回事儿。
区别是：函数是自由的，方法属于一个对象。
示例代码：
function func() { // 函数：自由的 alert('abc'); } func(); var arr = [1, 22, 3]; arr.func = function() { // 方法：属于一个对象 alert('abc'); }; arr.func();
this的定义
当前的方法属于谁，谁就是this。
示例代码：
var arr = [1, 2, 3.111, 666];
arr.a = 'abcde';
arr.show = function() {
alert(this.a); // 弹出abcde
};
关于构造函数的介绍
构造函数其实就是个普通函数，它干的活儿普通函数能干，普通函数能干的活儿它也能干，关键的区别是它的工作内容不一样，是用来创建对象的，所以那些爱给生活中的事物取古怪名字的👨🔬和👩🔬们，就给这样的函数起名叫构造函数。
构造函数创建对象的方式叫做工厂方式，对，就是仿照咱们现实社会里工厂生产商品的流程来创建对象。那工厂生产商品的流程是什么呢？流程就是分三步：原料、加工、出厂。
示例代码：
function createPeople(name, qq) {
// 原料
var obj = new Object();
// 加工
obj.name = name;
obj.qq = qq;
obj.showName = function() {
alert(this.name);
};
obj.showQQ = function() {
alert(this.qq);
};
// 出厂
return obj;
}
var obj1 = createPeople('张三', 12345);
obj1.showName();
obj1.showQQ();
var obj2 = createPeople('李四', 9876);
obj2.showName();
obj2.showQQ();
但是，工厂方法也有一大一小两个缺陷。小缺陷是不能用new关键字来创建对象，在书写习惯上不舒服（这有点鸡蛋里挑骨头）。大缺陷是函数重复定义，创建的对象占用了太多的资源。
还是上面的代码，如果我们比较一下这两个对象的showName方法：
alert(obj1.showName == obj2.showName);
弹框内容为false，这说明这是两个不同的方法，尽管方法里的代码内容一模一样。不同的方法就要占不同的内存地址，如果构造函数里有上百个方法，又用其创建了上百个对象，那占用的内存会很大，消耗的资源会很多。
解决小缺陷：不能用new关键字来创建对象
还是上边的代码，我们改造一下，用new来创建对象：
function createPeople(name, qq) {
// 原料
// var this = new Object(); 这是浏览器做的事儿
// 加工
this.name = name;
this.qq = qq;
this.showName = function () {
alert(this.name);
};
this.showQQ = function () {
alert(this.qq);
};
// 出厂
// return this; 这是浏览器做的事儿
}
var obj1 = new createPeople('张三', 12345);
obj1.showName();
obj1.showQQ();
var obj2 = new createPeople('李四', 9876);
obj2.showName();
obj2.showQQ();
最终的运行效果还是一样的，为什么会这样呢？其实，构造函数使用new关键字后，浏览器偷偷做了两件事：
- 替你创建了一个对象。
- 替你返回了这个对象。
原理：函数被普通调用和使用new调用，它内部的this指向的对象是不同的。
比如下面的代码：
function a() {
alert(this);
}
a();
new a();
运行后的效果：
this不同.gif
可以看到，执行a()后，弹出的this指向的是window对象，而执行new a()后，弹出的this指向的是它自己。
