对象_原型

Perfect

OOP & 特性

Object Oriented Programming - 面向对象编程。 [简称oop]

• 三大特性： 封装、继承、多态。

1. 封装: 将客观的事物封装成抽象的类，类一般被指派代表一类具有共同属性的事物，也可能具有相应的一些功能，而这些功能的具体实现是不被暴露出来的，用户只能接触到一些”接口“，这些接口告知用户可以使用什么样的功能，却无法探知里面的内容。类似一个黑盒操作模型。封装后的类可以具有更灵活的组合使用方式以及高复用性，提高了开发的效率。
2. 继承: 继承可以让某个类型的对象获得另一个类型的属性与方法，而不需要再次手动编写属于自己的同样的属性/方法。使用现有的类，我们可以对这些方法进行拓展。通过继承创建新的类称为子类或派生类，被继承的类称为基类，（父类，超类），继承的过程，是从一般到特殊的过程。实现继承我们可以通过继承和组合实现，继承概念的实现方式有两类，实现继承和接口继承，实现继承是直接使用父类的属性和方法，而无需额外的编码能力，接口继承仅仅继承了属性和方法的名称，但子类需要去对其提供实现的能力。
3. 多态: 对于同一个类，在不同的状态下，可能会做出不同的反应，也就是说在内部结构里进行的操作不同，但是都通过相同的方式予以调用。

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

 function Person(name) { this.name = name; } Person.prototype.sayhi = function(){ console.log('HI ' + this.name) } var Rio = new Person('Rio')
 

prototype 是什么？有什么特性

我们创建的每个函数都有一个 prototype （原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法～
按字面理解：>> prototype就是通过调用构造函数而创建的那个对象实例的原型对象。
使用原型对象的好处 ：>> 可以让所有对象实例共享它所包含的属性和方法。【换句话说】不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中。

无论什么时候，只要创建一个新函数，就会根据一组特定的规则为该函数创建一个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('小王');

Pic

创建一个 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('run')}, stop : function(){console.log('stop')}, getStatus : function(){console.log('getStatus')} }

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

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

`
 function Gotop(ct) {
 this.ct = ct
 this.target = $('
点我
')
 this.createNode();
 this.bindEvent()
 }
 
 
Gotop.prototype = {
 createNode : function() {
 this.target.css({
 position:'fixed',
 bottom: '0px',
 right: '0px'
 })
 this.target.appendTo(this.ct)
 },
 
 
 bindEvent : function(){
  var _this = this
    $(window).scroll(function(){
    scrollTop = $(window).scrollTop()
    if (scrollTop > 500) {
      _this.target.fadeIn(500)
    } else {
      _this.target.fadeOut(500)
    }
  })
  _this.target.click(function(){
      $(window).scrollTop(0)
  })
}
 
 
}
 
 
var gotop = new Gotop('body')
 `

---

最后再来个小Demo～