对象-原型
2017-06-26 本文已影响0人
李永州的FE
问题2： 如何通过构造函数的方式创建一个拥有属性和方法的对象?
function Person(name,age){
this.name = name;
this.age = age
}
Person.prototype.say= function(){
console.log('My name is : ' + this.name);
}
var p = new Person('lily',18);
p.say();
问题3： prototype 是什么？有什么特性
1JavaScript的每个对象都继承另一个对象，后者称为“原型”（prototype）对象。
2原型对象上的所有属性和方法，都能被派生对象共享。
3通过构造函数生成实例对象时，会自动为实例对象分配原型对象。每一个构造函数都有一个prototype 属性，
这个属性就是实例对象的原型对象。
4prototype里的属性一旦更改，其实例内也将发生变化
问题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('running');
};
Car.prototype.stop = function(){
console.log('stop');
};
Car.prototype.getStatus = function(){
console.log(this.status);
};
问题6： 创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
1. `ct`属性，GoTop 对应的 DOM 元素的容器
2. `target`属性， GoTop 对应的 DOM 元素
3. `bindEvent` 方法， 用于绑定事件
4 `createNode` 方法， 用于在容器内创建节点
<html>
<head>
<meta charset="utf-8">
<title>demo GoTop</title>
<style type="text/css">
.go-top {
position: fixed;
padding: 20px;
border: 1px solid red;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<p>This is the first line.</p>
<div style="height: 3000px"></div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function GoTop($parent){
this.ct = $parent || $("body");
this.target = $('<div class="go-top">click me!</div>');
this.bindEvent = function(){
var $cur = this.target;
$cur.on("click", function(){
var clock = setInterval(function(){
var top = $(window).scrollTop();
var speed = 20;
if((top-speed)>0){
$(window).scrollTop(top-speed);
}else {
$(window).scrollTop(0);
clearInterval(clock);
}
}, 5)
})
}
this.createNode = function(){
this.ct.append(this.target);
}
}
goTop1 = new GoTop();
goTop1.createNode();
goTop1.bindEvent();
</script>
</body>
</html>
