问题1： OOP 指什么？有哪些特性
OOP即 Object-Oriented Programming，面向对象的程序设计。
其特性有三个：继承、封装和多态
- 继承：子类自动继承父级类中的属性和方法，并可以添加新的属性和方法或者对部分属性进行重写。
- 封装：确保组件不会以不可预期的方式改变其它组件的内部状态；只有在那些提供了内部状态改变方法的组件中，才可以访问其内部状态。每类组件都提供了一个与其它组件联系的接口，并规定了其它组件进行调用的方法。
- 多态：不同对象的同一方法，可以有不同的表现
问题2： 如何通过构造函数的方式创建一个拥有属性和方法的对象?
function Car (name){
this.name = name
this.sayName = function(){
console.log('my car is:' + this.name)
}
}
Car.prototype.run = function(){
console.log(this.name + ' is running')
}
var car = new Car('奥拓')
console.dir(car)
car.run()
问题3： prototype 是什么？有什么特性
我们创建的每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解，那么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('前端');
原型图.png
问题5： 创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus
function Car(name,color,status){
this.name = name;
this.color = color;
ths.status = status;
}
Car.prototype = {
run: function(){
console.log("it's running!!")
}
stop: function(){
console.log("it's stopped")
}
getStatus: function(){
console.log(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: 1200px;
}
</style>
</head>
<body>
<div class="ct">
</div>
<script>
function GoTop(ct){
this.ct = ct;
this.target = this.createNode();
ct.appendChild(this.target);
this.bindEvent(ct);
}
GoTop.prototype = {
bindEvent: function(){
this.target.addEventListener("click",function(){
document.body.scrollTop = 0
})
},
createNode: function(){
var target = document.createElement("button");
target.innerText = "回到顶部";
target.style.position = "fixed";
target.style.right = "50px";
target.style.bottom = "50px";
return target;
}
}
var ct = document.querySelector(".ct");
var goTop = new GoTop(ct);
</script>
</body>
</html>
网友评论