---

keywords: 面向对象、原型。

---

• OOP 指什么？有哪些特性

OOP:即Object oriented programming，面向对象编程。Wikipedia里有如下定义：

它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性，对象里的程序可以访问及经常修改对象相关连的数据。在面向对象程序编程里，计算机程序会被设计成彼此相关的对象

特性：
1、封装：隐藏了某一方法的具体执行步骤，而暴露该方法的api；
2、继承：子类继承父类的属性和方法；

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

构造函数是一个普通的函数，可以作为模板描述对象的基本结构，用来生成对象。

var Vehicle = function () {
    this.price = 1000;
    this.speed = 30;
};

benz= new Vehicle ()

Vehicle是构造函数，通过new命令，调用构造函数，生成实例benz。函数内部使用的this关键字，代表生成的实例对象。

参考资料：
面向对象编程概述

• prototype 是什么？有什么特性

javascript中的每一个对象都继承另一个对象，后者称为‘原型’(prototype)对象。

特性：原型对象上的属性和方法都被派生对象共享。

function Animal (name) {
  this.name = name;
}

Animal.prototype.color = 'white';

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

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

当实例对象本身没有某个属性或方法的时候，它会到构造函数的prototype属性指向的对象，去寻找该属性或方法。这就是原型对象的特殊之处。

• 画出如下代码的原型图

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('前端');

原型图

ps：为避免图形复杂，图中没有绘制函数的__proto__指向。

• 以下代码中的变量age有什么区别

function People (){
  var age = 1       //函数中的局部变量age
  this.age = 10;    //定义实例的属性age
}
People.age = 20;    //构造函数的属性age

People.prototype.age = 30;  //原型中的属性age，实例可以引用

代码

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

Car = {
    name:'mzd',
    color:'red',
    status:0,
    run:function () {
        this.status = 1
        console.log('runing')
    },
    stop:function () {
        this.status = 0
        console.log('stopped')
    },
    getStatus:function () {
        console.log(this.status)
        this.status ? console.log('running') : console.log('stopped')
    }
}

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

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

效果+代码

• 使用构造函数创建对象的方式完成轮播功能，使用如下调用方式

function Carousel($node){
//todo...
}
Carousel.prototype = {
//todo ..
};

var $node1 = $('.ct').eq(0);
var $node2 = $('.ct').eq(1);
var carousel1 = new Carousel($node1);
var carousel2 = new Carousel($node2);

效果+代码

• 使用构造函数创建对象的方式实现 Tab 切换功能

效果+代码