面向对象

面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。
每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。对象可以复用，通过继承机制还可以定制。——对象是一个容器，封装了属性（property）和方法（method）。

关键字：构造函数 | this | 继承

生成对象——构造函数
典型的面向对象编程语言（比如 C++ 和 Java），都有“类”（class）这个概念。所谓“类”就是对象的模板，对象就是“类”的实例。但是，JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）

构造函数的特点有两个：
1、函数体内部使用了this关键字，代表了所要生成的对象实例。
2、生成对象的时候，必须使用new命令。

function Person(name,age){
  this.name=name
  this.age=age
  this.sayName=function(){
    console.log(this.name)
  }
}
var a=new Person('jack',18)

new命令的作用，就是执行构造函数，返回一个实例对象。原理步骤如下：
1.创建一个空对象，作为将要返回的对象实例。
2.将这个空对象的原型，指向构造函数的prototype属性(this.--proto-- =这个构造函数.prototype)。
3.将这个空对象赋值给函数内部的this关键字。
4.开始执行构造函数内部的代码。
5.返回新对象
如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象

var Vehicle = function () {
  this.price = 1000;
  return 1000;
};
(new Vehicle()) === 1000
// false

***********************************
var Vehicle = function (){
  this.price = 1000;
  return { price: 2000 };
};
(new Vehicle()).price
// 2000

---

返回一个对象——关键字this
this除了在构造函数中使用，还能在以下几个场景中使用
1.全局环境
全局环境使用this，它指的就是顶层对象window

this === window // true

function f() {
  console.log(this === window);
}
f() // true

所以注意了：调用在全局环境中的函数时，如果没有用call指明this，则函数中的this指向window。

2.如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。该方法赋值给另一个对象，就会改变this的指向。

var obj ={
  foo: function () {
    console.log(this);
  }
};

obj.foo() // obj

3.箭头函数中的this：箭头函数其实是没有 this 的，他里面的this 只取决于他外面的第一个不是 箭头函数的函数的 this

function a() {    
  return () => {       
     return () => {        
       console.log(this)      
     }  
  } 
} 
console.log(a()()()) //window

以下几种情况会改变this指向

// 情况一
(obj.foo = obj.foo)() // window
// 情况二
(false || obj.foo)() // window
// 情况三
(1, obj.foo)() // window

原因：上面代码中，obj.foo就是一个值。这个值真正调用的时候，运行环境已经不是obj了，而是全局环境，所以this不再指向obj。
可以这样理解，JavaScript 引擎内部，obj和obj.foo储存在两个内存地址，称为地址一和地址二。obj.foo()这样调用时，是从地址一调用地址二，因此地址二的运行环境是地址一，this指向obj。但是，上面三种情况，都是直接取出地址二进行调用，这样的话，运行环境就是全局环境，因此this指向全局环境。上面三种情况等同于下面的代码。

注意：避免多层this，避免数组处理中的this，避免回调函数中的this；
改变this的指向，call，aplly，bind方法。https://www.jianshu.com/p/0f6b09992086

---

对象的继承——原型链
1.原型
由来：
通过构造函数为实例对象定义属性，虽然很方便，但是有一个缺点。同一个构造函数的多个实例之间，无法共享属性，从而造成对系统资源的浪费。

function Cat(name, color) {
  this.name = name;
  this.color = color;
  this.meow = function () {
    console.log('喵喵');
  };
}

var cat1 = new Cat('大毛', '白色');
var cat2 = new Cat('二毛', '黑色');

cat1.meow === cat2.meow
// false

上面代码中，cat1和cat2是同一个构造函数的两个实例，它们都具有meow方法。由于meow方法是生成在每个实例对象上面，所以两个实例就生成了两次。也就是说，每新建一个实例，就会新建一个meow方法。这既没有必要，又浪费系统资源，因为所有meow方法都是同样的行为，完全应该共享。

所以：原型对象（prototype）来解决这个问题了
JavaScript 规定，每个函数都有一个prototype属性，指向一个对象。对于普通函数来说，该属性基本无用。但是，对于构造函数来说，生成实例的时候，该属性会自动成为实例对象的原型。
简单来说：protype属性只有一个功能：储存共有属性对象的地址
（每个函数都有 prototype 属性，该属性指向原型。 每个对象都有 _ proto _ 属性，指向了创建该对象的构造函数的原型。其实这个 属性指向了 [[prototype]]，但是 [[prototype]] 是内部属性，我们并不能访问到， 所以使用 _ proto _ 来访问。 对象可以通过 _ proto _ 来寻找不属于该对象的属性，_ proto _ 将对象连接起 来组成了原型链。）

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';

var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');

cat1.color // 'white'
cat2.color // 'white'

如果实例对象自身就有某个属性或方法，它就不会再去原型对象寻找这个属性或方法。

cat1.color = 'black';

cat1.color // 'black'
cat2.color // 'white'
Animal.prototype.color // 'white';

2.原型链
--proto--

var 对象=new 函数（）；(函数指Number，String，Boolean，Object)
对象.--proto--=函数.prototype(--proto--是对象属性，prototype是函数属性)

函数.prototype.--proto--=Object.prototype
函数.--proto--=Function.prototype
Function.--proto--=Function.prototype
Function.prototype.--proto--=Object.prototype

Object.prototype的原型是null。null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null

3.构造函数的继承

function Human(name){
     this.name = name
 }
 Human.prototype.run = function(){
     console.log("我叫"+this.name+"，我在跑")
     return undefined
 }

 function Man(name){
     Human.call(this)//Man有了Human的属性
     this.gender = '男'
 }

 var f = function(){}
 f.prototype = Human.prototype
 Man.prototype = new f()//Man有了Human的方法
//以上三步等价于Man.prototype.--proto--=Human.prototype，但是IE不支持

 Man.prototype.fight = function(){
     console.log('糊你熊脸')
 }

var a =new Man（‘jack’）
a.name//'jack'
a.gender//'男'
a.run()//'我叫Jack，我在跑'

a先在自己身上找属性或者方法，没有就往自己实例上找，再没有就往自己实例的爸爸上找——继承
a.--proto--=Man.prototype
Man.prototype.--proto--=Human.prototype
Human.prototype.--proto=Object.prototype
Object.prototype.--proto=null

ES6写法

class Human{
     constructor(name){
         this.name = name
     }
     run(){//prototype
         console.log("我叫"+this.name+"，我在跑")
         return undefined
     }
 }
 class Man extends Human{//extends相当于Man.prototype.--proto--=Human.prototype
     constructor(name){
         super(name)//super相当于call
         this.gender = '男'
     }
     fight(){
         console.log('糊你熊脸')
     }
 }