对象、原型

• OOP 指什么？有哪些特性 (难度: ***)

面向对象程序设计（英语：Object-oriented programming，缩写：OOP）是种具有对象概念的程序编程范型，同时也是一种程序开发的方法。

• 特性：
  封装：独立不需要具体了解其工作实现，熟悉接口即可。
  继承：子类继承父类的属性和方法,功能扩展。
  

  多态：在不同场景下有不同的处理方式。
  
• 如何通过构造函数的方式创建一个拥有属性和方法的对象? (难度: ***)

var Preson = function(name, age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
        console.log('My name is ' + this.name);
    }
}
var people = new Preson('tom', 18);

1Preson就是构造函数，用来生成对象实例（用this关键字代表要生成的实例）；
2使用new命令，执行（调用）构造函数Preson，生成实例对象；

1new命令创建一个空对象，作为将要返回的对象实例
2将这个空对象的原型__proto__，指向构造函数的prototype属性
3将这个空对象赋值给函数内部的this关键字
4开始执行构造函数内部的代码
5构造函数内部，this指的是一个新生成的空对象，所有针对this的操作，都会发生在这个空对象上
参考

• prototype 是什么？有什么特性 (难度: ***)
• JavaScript中的对象继承的另一个对象称为原型对象（prototype），null它没有自己的原型对象。

function Car (name) {
        this.name = name;
}
Car.prototype.color = 'red';
var car1 = new Car('BMW');
var car2 = new Car('Audi');
car1.color // 'red'
car2.color // 'red'

通过构造函数创建的实例对象共用原型对象(prototype)上的属性和方法，如果实例对象没有某个属性或方法时，它将会到构造函数的prototype内寻找。

color属性在__proto__中，也就是构造函数Car.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('前端');

• 以下代码中的变量age有什么区别(难度: ****)

function People (){
  var age = 1   //函数的局部变量
  this.age = 10;   //构造函数的实例变量，通过new命令创建实例对象访问
}
People.age = 20;  //函数的静态变量，可以认为是函数的属性
People.prototype.age = 30;  //函数原型对象添加的属性,与通过new命令创建实例对象共有

代码

• 创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus
  (难度: 4*)

    var Car = {
        this.name = 'BMW';
        this.color = 'red';
        this.status = 0;
        run:function(){
            this.status = 1;
            //todo..
        }
        stop:function(){
            this.status = 0;
            //todu..
        }
        getStatus:function(){
            console.log(this.status);
            if (this.status) {
                return 'running';
            } else {
                return 'stopped';
            }
        }
    }

• 创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法 (难度: 4*)
• ct属性，GoTop 对应的 DOM 元素的容器
• target属性， GoTop 对应的 DOM 元素
• bindEvent方法， 用于绑定事件
• createNode 方法， 用于在容器内创建节点
  代码
• 使用构造函数创建对象的方式完成轮播功能( 查看demo )，使用如下调用方式

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 切换功能
  代码
  本博客版权归 本人和饥人谷所有，转载需说明来源