面向对象

2017-06-08 本文已影响0人 mianmiani

OOP 指什么？有哪些特性

面向对象编程（Object Oriented Programming)
面向对象编程的目的是：
1.改善可读性
2.提升复用性
原则：开放封闭原则
1.对于扩展是开放的(Open for extension)。当应用的需求改变时，我们可以对模块进行扩展，使其具有满足那些改变的新行为。
2.对于修改是关闭的(Closed for modification)。对模块进行扩展时，不必改动模块的源代码或二进制代码。
特性：
1.封装: 将客观的事物封装成抽象的类，类一般被指派代表一类具有共同属性的事物，也可能具有相应的一些功能，而这些功能的具体实现是不被暴露出来的，用户只能接触到一些”接口“，这些接口告知用户可以使用什么样的功能，却无法探知里面的内容。类似一个黑盒操作模型。封装后的类可以具有更灵活的组合使用方式以及高复用性，提高了开发的效率。

2.继承: 继承可以让某个类型的对象获得另一个类型的属性与方法，而不需要再次手动编写属于自己的同样的属性/方法。使用现有的类，我们可以对这些方法进行拓展。通过继承创建新的类称为子类或派生类，被继承的类称为基类，（父类，超类），继承的过程，是从一般到特殊的过程。实现继承我们可以通过继承和组合实现，继承概念的实现方式有两类，实现继承和接口继承，实现继承是直接使用父类的属性和方法，而无需额外的编码能力，接口继承仅仅继承了属性和方法的名称，但子类需要去对其提供实现的能力。

3.多态: 对于同一个类，在不同的状态下，可能会做出不同的反应，也就是说在内部结构里进行的操作不同，但是都通过相同的方式予以调用。

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

function People(name,age){
  this.name = name
  this.age = age
  People.prototype.say = function(){
    console.log('i am '+this.name)
  }
}
var people = new People('jirengu',20)     //People{name:'jirengu',age:20}
people.say()     //i am jirengu

prototype 是什么？有什么特性

每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性，将函数用作构造函数调用（使用new操作符调用）的时候，新创建的对象会从原型对象上继承属性和方法。

画出如下代码的原型图

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.status = status
  Car.prototype.run = function(){
    console.log(name+' can run')
  }
  Car.prototype.stop = function(){
    console.log(name+' can stop')
  }
  Car.prototype.getStatus = function(){
    console.log(this.status)  
  }
}
var car = new Car('Audi','white','ok')     //Car {name: "Audi", color: "white", status: "ok"}
car.run()                                  //Audi can run
car.stop()                                 //Audi can stop
car.getStatus()                            //OK

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

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            height: 5000px;
        }
    </style>
</head>
<body>
<script>
    function GoTop(selector){
      var btn = document.createElement('button');
      btn.style.cssText='background-color:black;width:50px;height:50px;position:fixed;right:50px;bottom:50px;outline:none;border:none;cursor:pointer;color:white;';
      btn.innerText = '回到顶部';
      btn.addEventListener('click',function(){
        window.scrollTo(0,0)
      })
      document.querySelector(selector).appendChild(btn);
      this.ct = document.querySelector(selector);
      this.target = btn;
      this.bindEvent = function(event,Fn){
        btn.addEventListener(event,Fn);
      }
      this.createNode = function(nodeName){
        var node = document.querySelector(selector).appendChild(document.createElement(nodeName));
        return node
      }
    }
var goTop = new GoTop('body');
</script>
</body>
</html>