高级1-面向对象

//抽象的类，描述了一样事物的特征
类 狗
开始
    公有成员:
        吠叫():
    私有成员:
        毛皮颜色:
        孕育:
结束

<------------------------------------------>
//对象，该类事物的具体化
定义莱丝是狗
莱丝.毛皮颜色:棕白色
莱丝.吠叫()

封装性：封装是通过限制只有特定类的对象可以访问这一特定类的成员，而它们通常利用接口实现消息的传入传出。

/* 一个面向过程的程序会这样写： */
定义莱丝
莱丝.设置音调(5)
莱丝.吸气()
莱丝.吐气()

/* 而当狗的吠叫被封装到类中，任何人都可以简单地使用： */
定义莱丝是狗
莱丝.吠叫()

类牧羊犬:继承狗

定义莱丝是牧羊犬
莱丝.吠叫()    /* 注意这里调用的是狗的子类牧羊犬的吠叫方法。*/

/* 
 * 狗和鸡都有“叫()”这一方法
 * 但是调用狗的“叫()”，狗会吠叫
 * 调用鸡的“叫()”，鸡则会啼叫
 */

类狗
开始
   公有成员:
       叫()
       开始
          吠叫()
       结束
结束

类鸡
开始
   公有成员:
       叫()
       开始
          啼叫()
       结束
结束

定义莱丝是狗
定义鲁斯特是鸡
莱丝.叫()
鲁斯特.叫()

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

var F = function(properties){
  this.properties = properties;
  methods: function(){
    //methods...  
  }
};
var foo = new F();

3： prototype 是什么？有什么特性
对象的原型，利用constructor和prototype解决了继承和代码重复调用，减少了不必要的内存损耗，如下：

我们在使用new构造函数的过程当中
每个函数都自动添加一个名称为prototype属性，这是一个对象
每个对象都有一个内部属性 proto(规范中没有指定这个名称，但是浏览器都这么实现的) 指向其类型的prototype属性，类的实例也是对象，其proto属性指向“类”的prototype

这里，我们可以知道

所有实例都会通过原型链引用到类型的prototype
prototype相当于特定类型所有实例都可以访问到的一个公共容器
重复的东西移动到公共容器里放一份就可以了
示例：

function Person(nick, age){
    this.nick = nick;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.nick);
}
var p1 = new Person();
p1.sayName();

Paste_Image.png

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('饥人谷');
var p2 = new People('前端');

Paste_Image.png

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

function Car (name, color, status){
  this.name = name;
  this.color = color;
  this.status = status;
}
Car.prototype.run = function(){
  console.log(this.name + 'is running')
}
Car.prototype.stop = function(){
  console.log(this.name + 'stoped')
}
Car.prototype.getStatus = function(){
  console.log('status:' + this.status)
}
var car = new Car('fff', 'black', '0')
car.run()
car.stop()
car.getStatus()

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

gif008.gif

核心代码：

var GotTop = function($container, $element) {
  this.ct = $container;
  this.element = $element;
}
GotTop.prototype.bindEvent = function(){
    var _this = this
    $(window).scroll(function(){
        var scrollTop = _this.ct.scrollTop()
        if(scrollTop > 100){
            _this.element.show('slow')
        }else{
            _this.element.hide('slow')
        }
    })
    _this.element.on('click', function(){
      _this.ct.animate({
        scrollTop: 0
      }, 600)
    })
}
 GotTop.prototype.createNode = function(){
    this.ct.append(this.element)
  }
var goTop = new GotTop($('body'), $('<div class="go-top">顶部</div>'))

goTop.bindEvent()
goTop.createNode()