面向对象和原型
2017-06-10 本文已影响0人
andreaxiang
1. OOP 指什么？有哪些特性?
- OOP: Object-oriented programming的缩写，即面向对象程序设计。
两个最重要的概念就是类和对象：- 将一些属性和方法封装为类
- 类可以继承类（父类与子类）
- 将类实例化就有了对象
- 对象拥有类的属性和方法，父类的属性和方法，父类的父类...
- 不同对象的同一个方法，可以有不同的表现
- 特性
- 封装：将一个类的使用和实现分开，只保留部分接口和方法与外部联系。
- 继承：子类自动继承其父级类中的属性和方法，并可以添加新的属性和方法或者对部分属性和方法进行重写。继承增加了代码的可重用性。
- 多态：子类继承了来自父级类中的属性和方法，并对其中部分方法进行重写，即不同对象的同一个方法，可以有不同的表现。
2. 如何通过构造函数的方式创建一个拥有属性和方法的对象?
function People(name,age){
this.name=name,
this.age=age
this.sayHi = function(){
console.log("Hi,my name is "+p1.name+" ,I'm "+p1.age+" years old");
}
}
var p1 = new People("andrea",20);
p1.sayHi();
3. prototype 是什么？有什么特性?
- 在JavaScript中，任何函数在声明后都有一个prototype属性 ，它对应的值是一个Object,叫原型对象
- 当 new 这个函数的时候，会作为构造函数创建一个对象
- 对象里面会有一个proto的隐藏属性，指向上述构造函数原型对象
- 当访问对象的属性时先从对象本身里找，找不到再从原型对象里找
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('Andrea');
原型
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 runing");
};
Car.prototype.stop = function(){
console.log("Please stop this "+this.color+" car");
};
Car.prototype.getStatus = function(){
console.log("This car is level "+this.status);
};
var car1 = new Car("BMW","red","2");
var car2 = new Car("LEXUS","black","1");
car1.run();
car1.stop();
car1.getStatus();
car2.run();
car2.stop();
car2.getStatus();
6. 创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法：
-
ct属性，GoTop 对应的 DOM 元素的容器 -
target属性， GoTop 对应的 DOM 元素 -
bindEvent方法， 用于绑定事件 -
createNode方法， 用于在容器内创建节点
html部分
<style>
li {
background-color: pink;
height: 100px;
list-style: none;
border:1px solid #fff;
text-align:center;
line-height:100px;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</body>
JS 部分
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
function GoTop($ct) {
this.$ct = $ct;
this.$target = $('<button class="btn">GoTop</button>');
this.$target.css({
position: 'fixed',
right: '100px',
bottom: '100px'
})
}
GoTop.prototype.creatNode = function() {
this.$target.appendTo(this.$ct);
this.$target.hide()
}
GoTop.prototype.bindEvent = function() {
var _this = this;
$(window).on('scroll',function() {
if ($(window).scrollTop() < 100) {
_this.$target.hide();
}else {
_this.$target.show();
}
});
this.$target.on('click',function() {
$(window).scrollTop(0);
});
}
var GoTop1 = new GoTop($('body'));
GoTop1.creatNode();
GoTop1.bindEvent();
</script>
