面向对象编程
2017-11-22 本文已影响0人
饥人谷_星璇
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 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
-
ct属性，GoTop 对应的 DOM 元素的容器 -
target属性， GoTop 对应的 DOM 元素 -
bindEvent方法， 用于绑定事件 -
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'))
