面向对象编程

OOP 指什么？有哪些特性

• OOP:OOP(Object-oriented programming, 面向对象编程),面向对象程序设计中的概念主要包括：对象、类、数据抽象、继承、动态绑定、数据封装、多态性、消息传递。其中类和对象这两个概念最重要，类只是具备了某些功能和属性的抽象模型，而实际应用中需要一个一个实体，也就是需要对类进行实例化，类在实例化之后就是对象。
• 特性：
  1.封装：是将一个类的使用和实现分开，只保留部分接口和方法与外部联系
  2.继承：子类可以继承父类中的属性和方法，继承增加了代码的可重用性。
  3.多态：子类可以添加新的属性和方法或者对部分属性和方法进行重写，所以不同子类的同一个方法，可能会有不同的表现。

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

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        console.log(this.name,this.age);
    };
}//对this添加属性和方法
var person1 =  new Person('xiaoming', 18)
var person2 =  new Person('xiaofang', 17)//使用new创造一个新对象，将构造函数的作用域赋给新对象
person1.sayName() //xiaoming 18
person2.sayName() //xiaofang 17 //新构造的函数继承了父类的属性和方法

prototype 是什么？有什么特性

• prototype是原型，当创建一个函数之时，就会为其添加一个prototype属性，他指向这个函数的原型对象，原形对象可以被子类继承，子类可以复用原形对象里的方法和属性，null例外，他没有自己的原形对象。
• 当使用构造函数生成一个对象的时候，这个对象就拥有一个proto属性，他指向父类的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('前端');

IMG_20171116_233253.jpg

(字很丑请勿见怪- -)

创建一个 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 = $('<button class="target">GoTop</button>')
  this.bindEvent()
  this.createNode()
}
GoTop.prototype = {
  bindEvent : function(){
    var self = this
    self.target.click(function(){
      $(window).scrollTop(0);
    })
  },
  createNode : function(){
    this.ct.append(this.target)
  }
}//可以用CSS来为targer添加样式或者直接用JQUERY的css API来设置属性
new GoTop($('.ct')) 

demo

使用木桶布局实现一个图片墙

• demo
• 预览