什么是面对对象

面向对象程序设计（英语：Object-oriented programming，缩写：OOP）是种具有对象概念的程序编程范型，同时也是一种程序开发的抽象方针。它可能包含数据、属性、代码与方法。对象则指的是类的实例。它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性，对象里的程序可以访问及经常修改对象相关连的数据。在面向对象程序编程里，计算机程序会被设计成彼此相关的对象 -----wikipedia

面对对象的语言有个标志，那就是它们都有类的概念，而通过类可以创建任意多个具有相同属性和方法的对象，但是在ECMAScript中没有类的概念，因此它的对象与其他语言的也不太一样。
面对对象具有这么几个特性
1.封装性
隐藏了某一方法的具体执行步骤，取而代之的是通过消息传递机制传送消息给它。将多个功能属性打包在一起，留下接口，需要使用时，直接调用接口，提高代码重用性
2.继承性
父类会拥有子类，子类比父类更加具体化，子类会继承父类的属性和方法，且有可能有属于自己的属性和方法。
比方说“狗”这个类下面会有“牧羊犬”和“金毛”这两个子类，“牧羊犬”和“金毛”并不相同，有着自己特别的地方，但是它们都共同拥有“狗”这个父类的特征，这就是i继承
3.多态性
对于同一个方法或者功能，不同的子类的表现不一样。
同为“动物的叫声”，“狗”和“猫”的叫声是不一样的，但它们却是同一个“叫”的行为，这就是多态。

如何通过构造函数的方式创建一个拥有属性和方法的对象?

Object和Array是原生的构造函数，同时，我们也可以创建自定义的构造函数

function Person(name,age) {
    this.name = name
    this.age = age
    this.sayName = function() {
        alert(this.name)
    }
}

这样我们就定义了一个简单的构造函数
要用这个构造函数创建新实例，必须使用new操作符，以new调用构造函数时，会经历下面4个步骤：
1.创建一个空对象作为this
2.空对象的__proto__指向构造函数的prototype
3.运行构造函数
4.返回this（如果构造函数没有return）

let person1 = new Person('Jack',20)
let person2 = new Person('Tom',29)

这里就用Person创建了两个新实例person1和person2，这两个实例都有一个constructor属性，指向Person
同时这两个实例里都有属性name和age，和一个方法sayName

prototype 是什么？有什么特性？

无论什么时候，只要创建了一个函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象
同时也是通过调用构造函数而创建的对象实例的原型对象
它有什么作用特点呢？
1.所有的对象实例共享它包含的属性和方法

function Person() {}
Person.prototype.name = 'Jack'
Person.prototype.age = 27
Person.prototype.sayName = function() {
    alert(this.name)
}

let person1 = new Person()
console.log(person1.name)    //'Jack'
console.log(person1.age)     //27
person1.sayName()   //'Jack'

这里构造函数是空的，new出来的person1实例也具有name、age和sayName这些属性和方法，因为prototype是所有实例共享的
2.所有的原型对象都会自动获得一个construction属性，这个属性是一个指向prototype属性所在函数的指针
在本例中，Person.prototype.construction === Person
3.关于1中的共享问题，当调用构造函数创建一个实例后，该实例的内部将包含一个属性__proto__，这个属性包含一个指针，指向构造函数的原型对象prototype，这也是多个对象实例共享原型所保存的属性和方法的基本原理
4.如果我们在实例中添加一个属性，该属性与实例原型中的一个属性同名，那么该属性就会屏蔽原型中的属性，原因是属性的访问和调用都是先从实例中开始的

function Person() {}
Person.prototype.name = 'Jack'
Person.prototype.age = 27
Person.prototype.sayName = function() {
    alert(this.name)
}
let person1 = new Person()
console.log(person1.name)    //'Jack'
person1.name = 'Tom'
console.log(person1.name)   //'Tom'

画出如下代码的原型图

function People (name){
  this.name = name;
  this.sayName = function(){
    console.log('my name is:' + this.name);
  }
}

People.prototype.walk = function(){
  console.log(this.name + ' is walking');  
}

var p1 = new People('饥人谷');
var p2 = new People('前端');

原型图

创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus

function Car(name,color,status) {
    this.name = name
    this.color = status
    this.status = status
}                            //构造函数

Car.prototype = {          //原型
    constructor: Car,
    run: function() {
        //do something..
    },
    stop: function() {
        //do somthing
    },
    getStatus: function() {
        alert(this.status)
    }
}

let car = new Car('Porsche','Black',status)   //new一辆新车

创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。

http://js.jirengu.com/tofoputuya/2/edit

木桶布局Demo

https://leeeozhang.github.io/Demos/ex_barrel/

面对对象