面向对象
什么是面向对象？
所谓的面向对象，是一种编程思想，编程思路，代码的书写格式。
之前为了简化代码，我们是将程序封装为函数的形式来调用
函数会有一些小问题:：
函数内部定义的局部作用域变量，函数外部无法直接调用
函数调用使用时，会占用大量的系统内存，容易造成数据溢出数据泄露，容易被黑客攻击
函数一般只是封装一些模块化的功能
复杂程序的封装会 封装成其他形式，使用面向对象的方式来封装程序。
面向对象的基本思想
基本思路就是，创建一个对象，给这个对象，添加上属性和属性值，还有函数等方法
之后通过操作这个对象，来完成需要的效果
实例
// 先通过一个函数的方法,来创建对象function createObj(){// 创建对象const obj = {};// 给对象添加属性和属性值obj.name = '张三';obj.age = 18;obj.addr = '北京';obj.sex = '男';// 给对象添加方法obj.funNameAge = function(){console.log(this.name , this.age);};obj.funNameAddr = function(){console.log(this.name , this.addr);};obj.funSexAge = function(){console.log(this.sex , this.age);};obj.funAll = function(){console.log(this.name, this.sex , this.age, this.addr);};// 返回这个创建好的对象return obj;}// 调用函数,函数创建对象,并且作为返回值// 变量中存储的就是函数创建的对象const obj = createObj();// 可以通过调用obj中存储的对方的方法,来实现功能obj.funAll();
工厂模式
所谓的工厂模式，是一种书写函数的语法形式，语法规范
就向工厂中的流水线一样，按照步骤来执行需要的操作。
规则
步骤1：创建对象步骤2：给对象定义属性和属性值步骤3：给对象添加方法步骤4：定义对象为返回值
实例
// 标准的工厂模式,会有对应的参数function createDumpling(pi,mian,xian,tioliao){// 创建包饺子对象const dumpling = {};// 给包饺子对象,添加属性dumpling.pi = pi;dumpling.xian = xian;dumpling.mian = mian;dumpling.tiaoliao = tiaoliao;// 给包饺子对象,添加方法// 和面dumpling.huomian = function(){console.log(this.mian);};// 和饺子馅dumpling.huoxian = function(){console.log(this.xian);};// 包饺子dumpling.bao = function(){console.log(this.xian,this.pi,this,mian);};// 煮饺子dumpling.zhu = function(){console.log('煮饺子了,等着吃吧');};// 返回包饺子对象return dumpling;}// 要开始包饺子// 创建一个执行包饺子功能的对象,并且输入参数const baojiaozi1 = createDumpling('薄皮' , '白面粉' , '猪肉大葱');const baojiaozi2 = createDumpling('厚皮' , '玉米面' , '鱼香肉丝');console.log(baojiaozi1);// 可以调用任意的封装的方法baojiaozi1.huoxian(); // 调用和饺子馅方法baojiaozi1.huomian();// 调用和面方法
构造函数
所谓的构造函数，实际也是一种函数
构造函数专门用于生成，定义对象的
通过构造函数生成的对象，称为实例化对象。
例如：
创建对象的方法，有两种：字面量 const obj = {};构造函数 const obj = new Object();这个构造函数，就是JavaScript程序定义好的构造函数，我们直接使用就可以了。
强调
构造函数：就是一种函数，是专门用于生成对象的函数
实例化对象：就是通过构造函数生成的对象，称为实例化对象
分类
构造函数分为两种：
一种是JavaScript程序定义好的构造函数，称为内置构造函数
一种是程序员自己定义的构造函数，称为自定义构造函数
构造函数和普通函数的区别
1. 构造函数一定要和 关键词 new 一起使用new 关键词具有特殊的功能,会自动的给 构造函数中 定义一个对象,并且返回这个对象我们只要对这个对象设定属性,设定方法就可以了2. 构造函数为了和其他函数区别语法规范规定,构造函数,函数名称,第一个字母必须大写,使用大驼峰命名法3. 构造函数,给对象定义属性和方法的语法,与一般函数不同
注：实例化对象和普通的对象，没有任何的区别，只是建立方式不同而已。
如何自定义构造函数
注意：1. 函数名称要使用大驼峰命名法2. 自定义构造函数中，不要 定义对象 和 定义returnnew 关键词会执行，如果定义了，会产生冲突
实例
function CrtObj(name,age,sex,addr){// 在构造函数中,使用this,来指代对象// 这个对象,就是我们使用构造函数,生成的实例化对象// 定义属性// 给实例化对象,添加name属性,属性值是输入的name参数this.name = name;this.age = age;this.sex = sex;this.addr = addr;// 定义方法this.funAll = function(){console.log(this.name,this.age,this.sex,this.addr )};this.funNameAge = function(){console.log(this.name,this.age)};this.funSexAddr = function(){console.log(this.sex,this.addr )}}// 通过自定义构造函数来生对象,实例化对象// 调用执行构造函数时,都必须要和new 关键词一起使用const obj1 = new CrtObj('张三',18,'男','北京');console.log(obj1);// 调用 对象/实例化对象 中的方法obj1.funAll();obj1.funNameAge();obj1.funSexAddr();
总结
new 的作用
1. 在构造函数中，自行创建一个对象，并且返回这个对象2. 因为new 关键词创建了对象，此时，构造函数中的this，才会指向这个对象也就是将来生成的实例化对象3. 所有的构造函数中，this的指向，都是将来通过这个构造函数生成的实例化对象
构造函数中的小问题
问题的产生
实例
// 自定义构造函数function CrtObj(name, age, sex, addr) {// 定义属性this.name = name;this.age = age;this.sex = sex;this.addr = addr;// 定义方法this.funAll = function () {console.log(this.name, this.age, this.sex, this.addr);}}// 定义了构造函数,可以生成实例化对象const obj1 = new CrtObj('张三',18,'男','北京');const obj2 = new CrtObj('李四',19,'女','上海');const obj3 = new CrtObj('王五',20,'不详','火星');// 每个实例化对象中,都有属性和方法console.log(obj1);console.log(obj2);console.log(obj3);
通过同一个构造函数，生成的实例化对象
属性相同，属性值可能不同
定义的方法的程序，是相同的
但是，如果做一个比较判断，结果是 false
console.log( obj1.funAll == obj2.funAll );
原因
每次创建对象，都会在对象上定义一个新的方法，也就是新的函数函数存储时会生成一个独立的存储空间，不同函数有不同的存储空间
这表示 不同的实例化对象中，定义的是不同的方法/函数
不同的方法和函数，会占用过多的内存空间
要想办法，让使用同一个构造函数，生成的实例化对象，都是相同的方法。
解决的方式
将构造函数需要定义给实例化对象的方法，定义在函数的 prototype 属性中。
实例
function CrtObj2(name, age, sex, addr) {// 定义属性this.name = name;this.age = age;this.sex = sex;this.addr = addr;}// 在构造函数的 prototype 属性中,来定义实例化对象的方法CrtObj2.prototype.fun = function(){console.log(this.name, this.age, this.sex, this.addr);};const obj4 = new CrtObj2('张三',18,'男','北京');const obj5 = new CrtObj2('李四',19,'女','上海');console.log(obj4);console.log(obj5);obj4.fun();console.log( obj4.fun === obj5.fun );
