对象_原型

OOP 指什么？有哪些特性

面向对象程序设计（英语：Object-oriented programming,缩写：OOP)对象则指的是类的实例，它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性，对象里的程序可以访问及经常修改对象相关连的数据。
类：定义了一件事物的抽象特点。类的定义包含了数据的形式以及对数据的操作。
对象：类的实例
有三种特性

• 封装性，隐藏对象的属性和实现细节，仅对外公开接口
• 继承性，子类会自动继承父类的属性和方法，同时还可以在子类自身上添加属性和方法，这样就可以减少代码量，增加代码重用性，有点类似于CSS中的子元素会继承父元素的属性
• 多态性，子类会自动继承父类的属性和方法，同时子类还可以对其所继承的属性和方法进行修改，以突出子类的特点

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

function People(name,age,sex){
      this.name=name
      this.age=age
      this.sex=sex
      this.describe：function(){
        console.log('my name is '+this.name+','+'my age is '+this.age)
      }
    }
    var p1=new People('jack','19')
    var p2=new People('jemmy','26')

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

原形链.png

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

function Car(name,color,status){
      this.name=name
      this.color=color
      this.statue=status
    }
    Car.prototype=function(){
      constructor=Car
      run：function(){
        console.log(run)
      }
      stop：function(){
        console.log(run)
      }
      getstatus：function(){
        console.log(this.status)
      }
    }
    var car1=new Car('jeep','white','10')
    car1.run()
    car1.getstatus()

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

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

<style>
    .ct{
      position: fixed;
      right: 20px;
      bottom:50px;
    }
    #container{
      height: 1500px;
    }
    .hide{
      display:none
    }
  
  </style>
<div id="container">
    这里是顶部
    <div class="ct"></div>
  </div>
  <script src="jquery-3.1.2.min.js"></script>
  <script>
    var goTop1=function(ct,target){
      this.ct=ct
      this.target=target
      this.bindEvent()
      this.target.html(this.createNode())
    }
    goTop.prototype={
      bindEvent:function(){
        var here=this
        $(window).scroll(function(e){
           var needShow=$(window).scrollTop()>window.innerHeight
           if(needShow){
            here.target.addClass('show')
           }else{
             here.target.removeClass('show')
           }
          })
        this.target.click(function(){
          $(window).scrollTop(0)
        })
      }
      createNode:function(){
        return '<span>back</span'
      }
    }
    new goTop($('#container'),$('.ct'))
  
  </script>