要理解面向对象，就要理解什么是 面向过程。

封装: 把相关信息存储在对象中的能力。

继承：继承是面向对象语言中最显著的一个特性。从已有类中派生出新的类，新的类能吸收已有类的属性和方法，并能够拓展新的能力。

多态：多种形态，可以通过不同的接口去实现。

类：具有相同的特性和行为的集合。如：人类的身高、姓名、年龄等属性，行为如吃饭、睡觉、学习等行为。人类具有这些行为特征，但是又不能具体说这些行为特征的详细信息。所以，类是抽象的。

对象：从类中，拿出来的具体的个体，如：张三、身高180、23岁等属性，爱吃煎饼果子、睡觉爱打人、喜欢学箜篌等行为。这些描述就比较具体了。所以说，对象是具体的。

在传统的JS中(一般指ES3.1)，不存在类的概念，但是可以通过构造函数模拟类。所以我们称其为基于对象的类编程语言。

假设描述一个人：这个人的名字叫张三、年龄23、性别男、爱吃 鱼香肉丝

面向过程：

var name = "张三",
	age = 23,
	sex = '男',
	eat = function(){
		return "鱼香肉丝";
	}

面向对象：

var obj = {
	name:'张三',
	age:23,
	sex:'男',
	eat:function(){
		return "鱼香肉丝";
	}
}

内置对象：Array String Math RegExp Date

宿主对象：提供js运行环境的对象，目前指的是浏览器对象

自定义对象：大括号包裹的名值对 key-value

假设我们将猫科类的动物看作是一个对象，有猫科动物的品种、动龄，生活习性：

var Felidae = {
	type:'',
	age:0,
	behavior:null
}

基于这个原型对象去创建具体的个体，这个原型可以看作模拟类，基于这个模拟类创建对象如下：

var tiger = {
	type:'东北虎',
	age:10,
	behavior:function(){
		return "喜欢独立捕捉猎物...";
	}
}

var cat = {
	type:"暹罗猫",
	age:8,
	behaivor:function(){
		return "喜欢晚上行动..."
	}
}

var cheetah = {};
cheetah.type = "亚洲豹";
cheetah.age = 6;
cheetah.behaivor = function(){
	return "抓到猎物后喜欢挂到树上..."
}

var cat2 = new Object();
cat2.type = "中华田园猫";
cat2.age = 4;
cat2.behaivor = function(){
	return "卖萌和睡觉..."
}

这种利用原型的方式创建对象有两个问题：
	1. 上面三个独立的个体，程序不能识别出具体的个体（实例的对象）与原型（模拟类）之间的关系；
	2. 书写的代码太冗余，每次基于原型去创建一个新的实例个体时，都要重复的去书写原型中那些属性和方法。

//利用函数对其进行优化
// function factory(type,age,behaivor){
//     var Felidae = {
//         type:type,
//         age:age,
//         behavior:function(){
//             return behaivor;
//         }
//     }
//     return Felidae;
// }

function factory(type,age,behaivor){
    return {
        type:type,
        age:age,
        behavior:function(){
            return behaivor;
        }
    }
}
var tiger = factory('东北虎',10,"喜欢独立捕捉猎物...")
var cat = factory('暹罗猫',8,"喜欢晚上行动...")

利用工厂函数，解决了代码冗余的问题。但是还是不能看出对象和原型之间的关系。
利用关键字obj instanceof Fn  或者利用 consstructor 查看构造函数 

构造函数和普通函数最明显的区别：构造函数首字母大写。利用使用this关键字，this指向实例化对象。

构造函数在实例化对象时，需要用到new关键字，语法 new 构造函数()

//定义一个构造函数，在JS中，使用构造函数来模拟类
function Felidae(type,age,behaivor){
   this.type = type;
   this.age = age;
   this.behaivor = function(){
       return behaivor;
   }
}

//实例化对象 利用关键字new
var tiger = new Felidae('东北虎',10,"喜欢独立捕捉猎物...");
var cat = new Felidae('暹罗猫',8,"喜欢晚上行动...");

//确认实例和原型之间的关系
console.log(tiger instanceof Felidae);//true
console.log(tiger.constructor);//ƒ Felidae(type,age,behaivor){...}


构造函数的方式，解决了代码冗余的问题，也能确认出实例和原型之间的关系。
但是，也存在一定需要优化的问题，见原型优化。

注：构造函数执行时（实例化）步骤

​ 1. 开辟一个新的内存空间 —— 在内存中新建一个空对象

​ 2. 改变 this 指向 —— 指向内存中的空对象

​ 3. 执行函数中的代码，为 this 赋值 —— 根据定义的键值和传入的参数，依次给这个空对象添加上键值对

​ 4. 返回 this —— 把指向内存中刚刚创建的新对象的指针 return 出去，传址赋值给变量

如果构造函数中，仅使用return，那么它还是作为一个普通函数存在的。

当然，如果有this和return都共存的情况下，不同的数据类型，函数最终的处理结果不同。如果return返回的是一个基本数据类型的数据，则忽略。如果返回的是一个引用数据类型的数据，那么函数无论怎么调用，返回的都是这个引用数据类型的数据。

假设，有如下构造函数：

function Felidae(type,age,behaivor){
   this.type = type;
   this.age = age;
   this.behaivor = behaivor;

   this.des = "猫科动物多数善攀缘及跳跃。大多喜独居。肉食，常以伏击方式捕杀其他温血动物。分布于欧亚大陆 、非洲、美洲的寒带到热带地区，由野猫（Felis silvestris）驯化来的家猫（F.s.catus）已被人为带到全世界，很多成为当地入侵物种。";
   this.sayHi = function(){
        return "吼..."
   };
   thsi.sayHello = function(){
        return "动物的品种：" + this.type + ", 动物年龄：" + this.age + "，猫科动物的描述：" + this.des + ", 动物行为：" + this.behaivor;
   }
}
//实例化对象 利用关键字new
var tiger = new Felidae('东北虎',10,"喜欢独立捕捉猎物...");
var cat = new Felidae('暹罗猫',8,"喜欢晚上行动...");
console.log(tiger == cat);//false
console.log(tiger.des == cat.des);//true
console.log(tiger.sayHi() == cat.sayHi());//true
console.log(tiger.sayHi == cat.sayHi);//false  不同个体中的相同函数

上面每创建一个实例对象，都会重复创建des、sayHi、sayHello，它们所实现或获取的值都是一样的。这样重复创建会占用过多的内存，为了优化，我们开辟一个独立空间，作为其调用的地址。这样可以节约内存，利用的就是prototype这个原型。

function Felidae(type,age,behaivor){
   this.type = type;
   this.age = age;
   this.behaivor = behaivor;
}

Felidae.prototype.des = "猫科动物多数善攀缘及跳跃。大多喜独居。肉食，常以伏击方式捕杀其他温血动物。分布于欧亚大陆 、非洲、美洲的寒带到热带地区，由野猫（Felis silvestris）驯化来的家猫（F.s.catus）已被人为带到全世界，很多成为当地入侵物种。",
Felidae.prototype.sayHi = function(){
        return "吼..."
};
Felidae.prototype.sayHello = function(){
        return "动物的品种：" + this.type + ", 动物年龄：" + this.age + "，猫科动物的描述：" + this.des + ", 动物行为：" + this.behaivor;
};
//实例化对象 利用关键字new
var tiger = new Felidae('东北虎',10,"喜欢独立捕捉猎物...");
var cat = new Felidae('暹罗猫',8,"喜欢晚上行动...");
console.log(tiger.sayHi == cat.sayHi);

原型prototype是每一个函数都默认自带的属性，它的值是一个对象，叫做原型对象。

对于构造函数来讲，意义更大。因为通过构造函数可以实例化化对象，而每一个实例化的对象，都默认含有一个隐式的属性 __proto__ 来指向该构造函数的原型对象。

原型的作用：为实例化对象提供共享的属性和方法。

也就是说，在内存中开辟一块共享的空间，供构造函数的实例化对象在调用时指向这一个共享的地址，节约内存。

每一个实例化对象，都有原型对象，原型对象本质还是一个对象，所以说原型对象上面可能还有原型对象。

当一个实例化对象，去调用某个属性或方法时，它会先从自身查找，如果找到直接调用；如果找不到则去它的原型中查找，在原型中查找到则使用；如果它的原型中也没有找到，那么继续向上去原型的原型中查找，就这样一层层的查找，形成一条链，这条链我们叫做原型链。一直找到，原型链的终点是 Object 的原型，如果还是找不到则返回undefined.

function Cat(name,age){
    this.name = name;
    this.age = age;
    this.sayHi = function(){
        return "我们的天性是抓老鼠！！！"
    }
}

Cat.prototype.name = "猫";
Cat.prototype.sayHello = function(){
    return "爱睡觉！！"
}

var cat = new Cat("加菲猫",5);

console.log(cat.__proto__ === Cat.prototype);//true

• prototype 属性：允许您向对象添加属性和方法

  注：1. 这个属性随着函数的声明而自动生成

  ​ 2. 构造函数通过调用这个属性自定义的共享属性和方法可以被该构造函数的实例化对象调用

• constructor 属性：获取实例化对象的构造函数

• instanceof 运算符：用于判断实例化对象的原型链中是否出现过指定的构造函数

• isPrototypeOf() 方法用于判断原型对象和某个实例之间的关系

• hasOwnProperty() 方法判断指定属性是不是这个实例化对象的本地属性

  注：构造函数中定义的属性和方法使本地属性，随着new的实例化对象的生成而生成，也就是对象本身具备的属性和方法

  ​ 返回值 是一个布尔值，本地属性返回true 非本地属性返回false

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XhEfPdPQ-1692844162882)(01_面向对象编程.assets/image-20200518103512795.png)]

• in 运算符 判断某个属性可不可以被某个实例调用

in运算符还可以用于对对象属性和数组的遍历

var arr = ["banana","orange","pear","apple"];
for(i in arr){
    console.log(i,arr[i],arr)
}


var obj = {
    name:"Jack",
    age:23,
    sex:"男"
}
for(key in obj){
    console.log(key);
}

无论外部如何调用（使用new关键字 或 当作普通函数）该类，都会返回一个类的实例化对象

解决办法：利用this指向

function Cat2(name,age){
    if(this === window){
        return new Cat2(name,age);
    }else{
        this.name = name;
        this.age = age;
        this.sayHi = function(){
            return "我们的天性是抓老鼠！！！"
        }
    }
}
var catObj = new Cat2("暹罗猫",4);
console.log(catObj);
catObj = Cat2("短耳猫",7);
console.log(catObj);

利用面向对象的思想，完成一个气球移动效果