对象&原型疑惑解答

问题1： OOP 指什么？有哪些特性

面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。

每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。对象可以复用，通过继承机制还可以定制。因此，面向对象编程具有灵活、代码可复用、高度模块化等特点，容易维护和开发，比起由一系列函数或指令组成的传统的过程式编程（procedural programming），更适合多人合作的大型软件项目。

哪些特性?

• 封装
  面向对象编程核心思想之一就是就是将数据和对数据的操作封装在一起。通过抽象，即从具体的实例中抽取共同的性质形成一般的概念，比如类的概念。
• 继承
  继承体现了一种先进的编程模式.子类可以继承父类的属性和功能,即子类继承了父类所具有的数据和数据上的操作,同时又可以增添子类独有的数据和数据上的操作.例如,"人类"继承了"哺乳类"的属性和功能,同时又增添了人类独有的属性和功能.
• 多态
  多态是面向对象编程的又一重要特征.有两种意义的多态（表现为方法的重写(Overriding)和重载(Overloading)）
  一种是操作名称的多态,即有多个操作具有相同的名字,但这些操作所接收的消息类型必须不同.所谓操作名称的多态是指可以向操作传递不同消息,以便让对象根据相应的消息来产生一定的行为.
  多态性是指允许不同类的对象对同一消息作出响应。比如同样的加法，把两个时间加在一起和把两个整数加在一起肯定完全不同。

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

function People(name,age){
    this.name = name
    this.age = age
    this.sayName = function(){
        console.log(this.name)
    }
}
var p1 = new People(Herbert,18)

or

//原型链
function People(name,age){
    this.name = name
    this.age = age
}
People.prototype.sayName = function(){
    console.log(this.name)
}
var p1 = new People(Herbert,18)
p1.sayName()

问题3： prototype 是什么？有什么特性

prototype 是什么？

function定义的对象有一个prototype属性，prototype属性又指向了一个prototype对象，注意prototype属性与prototype对象是两个不同的东西，要注意区别。在prototype对象中又有一个constructor属性，这个constructor属性同样指向一个constructor对象，而这个constructor对象恰恰就是这个function函数本身。

prototype 用处？

使用 prototype的好处是不会额外产生内存，所有实例化后的对象都会从原型上继承这个方法。

特性：

Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。
这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

问题4：画出如下代码的原型图

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('Jack);
var p2 = new People('Herbert');

原型图

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

function Car(name,color,status){
  this.name = name;
  this.color = color;
  this.status = status;
}
Car.prototype = function(){
    this.run= function(){ //xxx }
    this.stop= function(){ //xxx }
    this.getStatus= function(){ //xxx }
}

var car1 = new Car(name,color,status);
car1.run()
car1.stop()
car1.getStatus()

问题6： 创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法

1. ct属性，GoTop 对应的 DOM 元素的容器
2. target属性， GoTop 对应的 DOM 元素
3. bindEvent 方法， 用于绑定事件
4. createNode 方法， 用于在容器内创建节点

滚动到顶部

问题7： 使用木桶布局实现一个图片墙

木桶布局

参考文章

• Object.prototype - JavaScript | MDN
• Javascript 面向对象编程-阮一峰
• jquery $().each和$.each()
• js的 new image()