1： OOP 指什么？有哪些特性
面向对象程序设计（英语：Object-oriented programming，缩写：OOP）是种具有对象概念的程序编程范型，同时也是一种程序开发的抽象方针。它可能包含数据、属性、代码与方法。对象则指的是类的实例。它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性，对象里的程序可以访问及经常修改对象相关连的数据。在面向对象程序编程里，计算机程序会被设计成彼此相关的对象
面向对象程序设计可以看作一种在程序中包含各种独立而又互相调用的对象的思想，这与传统的思想刚好相反：传统的程序设计主张将程序看作一系列函数的集合，或者直接就是一系列对电脑下达的指令。面向对象程序设计中的每一个对象都应该能够接受数据、处理数据并将数据传达给其它对象，因此它们都可以被看作一个小型的“机器”，即对象。
特征
支持面向对象编程语言通常利用继承其他类达到代码重用和可扩展性的特性。而类有两个主要的概念：
类（Class）：定义了一件事物的抽象特点。类的定义包含了数据的形式以及对数据的操作。
对象：是类的实例。
示例（伪代码）：
//抽象的类，描述了一样事物的特征
类 狗
开始
公有成员:
吠叫():
私有成员:
毛皮颜色:
孕育:
结束
<------------------------------------------>
//对象，该类事物的具体化
定义莱丝是狗
莱丝.毛皮颜色:棕白色
莱丝.吠叫()
封装性：封装是通过限制只有特定类的对象可以访问这一特定类的成员，而它们通常利用接口实现消息的传入传出。
/* 一个面向过程的程序会这样写： */
定义莱丝
莱丝.设置音调(5)
莱丝.吸气()
莱丝.吐气()
/* 而当狗的吠叫被封装到类中，任何人都可以简单地使用： */
定义莱丝是狗
莱丝.吠叫()
继承：继承性（Inheritance）是指，在某种情况下，一个类会有“子类”。子类比原本的类（称为父类）要更加具体化。
类牧羊犬:继承狗
定义莱丝是牧羊犬
莱丝.吠叫() /* 注意这里调用的是狗的子类牧羊犬的吠叫方法。*/
多态：多态（Polymorphism）是指由继承而产生的相关的不同的类，其对象对同一消息会做出不同的响应
/*
* 狗和鸡都有“叫()”这一方法
* 但是调用狗的“叫()”，狗会吠叫
* 调用鸡的“叫()”，鸡则会啼叫
*/
类狗
开始
公有成员:
叫()
开始
吠叫()
结束
结束
类鸡
开始
公有成员:
叫()
开始
啼叫()
结束
结束
定义莱丝是狗
定义鲁斯特是鸡
莱丝.叫()
鲁斯特.叫()
2： 如何通过构造函数的方式创建一个拥有属性和方法的对象?
var F = function(properties){
this.properties = properties;
methods: function(){
//methods...
}
};
var foo = new F();
3： prototype 是什么？有什么特性
对象的原型，利用constructor和prototype解决了继承和代码重复调用，减少了不必要的内存损耗，如下：
-
我们在使用new构造函数的过程当中
-
每个函数都自动添加一个名称为prototype属性，这是一个对象
-
每个对象都有一个内部属性 proto(规范中没有指定这个名称，但是浏览器都这么实现的) 指向其类型的prototype属性，类的实例也是对象，其proto属性指向“类”的prototype
这里，我们可以知道
-
所有实例都会通过原型链引用到类型的prototype
-
prototype相当于特定类型所有实例都可以访问到的一个公共容器
-
重复的东西移动到公共容器里放一份就可以了
示例：
function Person(nick, age){
this.nick = nick;
this.age = age;
}
Person.prototype.sayName = function(){
console.log(this.nick);
}
var p1 = new Person();
p1.sayName();
Paste_Image.png
4：画出如下代码的原型图
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('前端');
Paste_Image.png
5： 创建一个 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(this.name + 'is running')
}
Car.prototype.stop = function(){
console.log(this.name + 'stoped')
}
Car.prototype.getStatus = function(){
console.log('status:' + this.status)
}
var car = new Car('fff', 'black', '0')
car.run()
car.stop()
car.getStatus()
6： 创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
gif008.gif
核心代码：
var GotTop = function($container, $element) {
this.ct = $container;
this.element = $element;
}
GotTop.prototype.bindEvent = function(){
var _this = this
$(window).scroll(function(){
var scrollTop = _this.ct.scrollTop()
if(scrollTop > 100){
_this.element.show('slow')
}else{
_this.element.hide('slow')
}
})
_this.element.on('click', function(){
_this.ct.animate({
scrollTop: 0
}, 600)
})
}
GotTop.prototype.createNode = function(){
this.ct.append(this.element)
}
var goTop = new GotTop($('body'), $('<div class="go-top">顶部</div>'))
goTop.bindEvent()
goTop.createNode()
网友评论