1、OOP 指什么？有哪些特性
- oop--->是object oriented programming的缩写，它是一种编程模式，这种模式将数据封装成对象，采用操作对象的方式来编程·
- 特性：封装、继承、多态
2、如何通过构造函数的方式创建一个拥有属性和方法的对象?
- 如下代码所示
var Person = function(height,weight){
this.height = height;
this.weight = weight;
this.sayHello = function(){
console.log("hello");
};
}
var person = new Person();
person.sayHello();
3、prototype 是什么？有什么特性
- Javascript中每个对象都有prototype；原型是一个对象；所有的Javascript对象都从原型里继承属性和方法
- 特性：
- 原型对象上所有的属性和方法都能被派生对象共享；
- 原型对象的属性不是实例对象的属性；只要修改原型对象，变动就会立刻体现在所有实例对象上
- 当实例本身没有某个属性和方法的时候，它会到构造函数prototype属性指向的对象上去寻找该属性或方法；如果实例对象自身就有某个方法和属性，它就不会再去原型对象上寻找这个方法和属性
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('前端');
-
如下图所示：
4.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 stopping');
},
getStatus: function() {
console.log(this.name + this.status);
}
}
6、创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
1. `ct`属性，GoTop 对应的 DOM 元素的容器
2. `target`属性， GoTop 对应的 DOM 元素
3. `bindEvent` 方法， 用于绑定事件
4 `createNode` 方法， 用于在容器内创建节点
- 代码如下所示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>对象原型实践</title>
<style>
#ct{
height: 2500px;
}
#ct .go-top{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 16px;
border: 1px solid red;
border-radius: 5px;
position: fixed;
right: 30px;
bottom: 30px;
cursor: pointer;
}
#ct .hide{
display: none;
}
</style>
</head>
<body>
<div id="ct">
<div class="go-top"></div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var $ct = $('#ct'),
$goTop = $('.go-top');
var GoTop = function(ct,target){
this.ct = ct;
this.target = target;
this.bindEvent();
this.target.html(this.createNode());
};
GoTop.prototype = {
bindEvent: function(){
var that = this;
//滚动事件
$(window).on('scroll',function(){
if($(window).scrollTop() > 200){
that.target.removeClass('hide');
}else{
that.target.addClass('hide');
}
});
//点击事件
this.target.on('click',function(){
$(window).scrollTop(0);
});
},
createNode: function(){
return '<span>回到顶部</span>';
}
};
new GoTop($ct,$goTop);
</script>
</body>
</html>
网友评论