高级1：对象 & 原型
2018-09-21 本文已影响0人
饥人谷_哈噜噜
问题1： OOP 指什么？有哪些特性
- OOP（Object-Oriented-Programming），指面向对象程序设计。是一种程序设计思想。OOP把对象作为程序的基本单元，一个对象包含了数据和操作数据的函数。
- 特性：封装,继承,多态
- 所谓封装，也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。封装是面向对象的特征之一，是对象和类概念的主要特性。 简单的说，一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体。在一个对象内部，某些代码或某些数据可以是私有的，不能被外界访问。通过这种方式，对象对内部数据提供了不同级别的保护，以防止程序中无关的部分意外的改变或错误的使用了对象的私有部分。
- 所谓继承是指可以让某个类型的对象获得另一个类型的对象的属性的方法。它支持按级分类的概念。继承是指这样一种能力：它可以使用现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。 通过继承创建的新类称为“子类”或“派生类”，被继承的类称为“基类”、“父类”或“超类”。继承的过程，就是从一般到特殊的过程。要实现继承，可以通过“继承”（Inheritance）和“组合”（Composition）来实现。继承概念的实现方式有二类：实现继承与接口继承。实现继承是指直接使用基类的属性和方法而无需额外编码的能力；接口继承是指仅使用属性和方法的名称、但是子类必须提供实现的能力；
- 所谓多态就是指一个类实例的相同方法在不同情形有不同表现形式。多态机制使具有不同内部结构的对象可以共享相同的外部接口。这意味着，虽然针对不同对象的具体操作不同，但通过一个公共的类，它们（那些操作）可以通过相同的方式予以调用。
参考资料
问题2： 如何通过构造函数的方式创建一个拥有属性和方法的对象?
function Person(name,age){
this.name = name;
this.age = age;
this.printName = function(){
console.log(this.name)
}
}
var p1 = new Person('haha', 18)
问题3： prototype 是什么？有什么特性
- prototype是通过调用构造函数而创建的对象实例的原型对象。
- 特性：
prototype 默认指向一个对象，这个对象为原型（prototype）对象。 只有 null 除外，它没有自己的原型对象。
原型对象 包含定义函数实例 中可共享的方法和属性。
也就是 将函数作为构造函数调用（new）时，新创建的对象会从 原型对象上继承属和方法。
问题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('前端');
原型图.jpg
问题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')
},
stop : function(){
console.log(this.name + 'is stop')
},
getStatus : function(){
console.log(this.name + 'is getStatus')
}
}
问题6： 创建一个 GoTop 对象，当 new 一个 GoTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
要求：
1. `ct`属性，GoTop 对应的 DOM 元素的容器
2. `target`属性， GoTop 对应的 DOM 元素
3. `bindEvent` 方法， 用于绑定事件
4. `createNode` 方法， 用于在容器内创建节点
html+css部分：
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>对象原型实践</title>
<style>
#ct{
min-width: 800px;
height: 3000px;
border: 1px solid #ccc;
}
.go-top{
width: 100px;
height: 25px;
line-height: 25px;
border: 1px solid #333;
border-radius: 3px;
text-align: center;
position: fixed;
right: 30px;
bottom: 30px;
cursor: pointer;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="ct">
<div class="go-top hide"></div>
</div>
</body>
</html>
js部分：
var GoTop = function(ct, target){
this.ct = ct;
this.target = target;
this.bindEvent();
this.target.html(this.createNode());
}
GoTop.prototype = {
bindEvent: function(){
var _this = this;
$(window).on('scroll',function(){
if($(window).scrollTop()>200){
_this.target.removeClass('hide');
}else{
_this.target.addClass('hide');
}
})
_this.target.on('click',function(){
$(window).scrollTop(0)
})
},
createNode: function(){
return '<span>回到顶部</span>'
}
}
var $ct = $('#ct')
var $goTop = $('.go-top')
new GoTop($ct,$goTop)
