1. OOP 指什么？有哪些特性
OOP是Object Oriented Programming的缩写，即面向对象的程序设计。其中两个最重要的概念就是类和对象。类只是具备了某些功能和属性的抽象模型（类似于模具），实例就是根据模具印出来的砖块，一个模具可以印出（实例化）多个实例，每个实例都符合类的特征，类在实例化之后就是对象。但是在JavaScript中，本身没有类的概念，我们需要用对象模拟出类，然后用类去创建对象。我们的例子中模具虽然是“类”，但同时也是个存在的实物，是个对象，我们为了方便理解，称之为类。
特性：
1.封装性：将一个类的使用和实现分开，只保留部分接口和方法与外部联系。
2.继承性：子类自动继承其父级类中的属性和方法，并可以添加新的属性和方法或者对部分属性和方法进行重写。继承增加了代码的可重用性。
3.多态性：子类继承了来自父级类中的属性和方法，并对其中部分方法进行重写。
2. 如何通过构造函数的方式创建一个拥有属性和方法的对象?
function Person(name,age){ //构造函数
this.name = name;
this.age = age;
this.sayName = function(){ //每个实例要重复一遍sayName ，大量对象存在的时候是浪费内存,
//可以把该方法放到prototype，作为公共方法，只需传入特定参数
console.log('I\'m ' + this.name)
}
}
/*也可写成单独这样
Person.prototype.sayName = function(){
console.log('I\'m ' + this.name)
}
*/
var person = new Person('Mike','20');//创建一个对象，并传入参数
person.sayName(); //调用该对象的sayName方法,结果：I'm Mike
3. prototype 是什么？有什么特性
使用构造函数时，每个函数都自动添加一个名称为prototype属性，这是一个对象，这个对象的所有属性和方法，都会被构造函数的实例继承。每个对象都有一个内部属性_proto_(规范中没有指定这个名称，但是浏览器都这么实现的) 指向其类型的prototype属性。类的实例也是对象，其_proto_属性指向“类”的prototype。
实例可以通过_prop_访问到其类型的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('前端');
原型链
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')
}
Car.prototype.stop = function(){
console.log(this.name + ' is stopped')
}
Car.prototype.getStatus = function(){
console,log(this.name + ' is ' + this.status)
}
var car = new Car('Mercedes','White',0);
car.run(); //Mercedes is running
car.stop(); //Mercedes is stopped
car.getStatus(); //0
6. 创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
-
ct属性，GoTop 对应的 DOM 元素的容器 -
target属性， GoTop 对应的 DOM 元素 -
bindEvent方法， 用于绑定事件 -
createNode方法， 用于在容器内创建节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>go to top</title>
<style>
.ct {
background-color: #eee;
height: 1200px;
}
.ct .btn {
position: fixed;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div class="ct">
</div>
<script src='https://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>');
}
GoTop.prototype.creatNode = function(){
this.ct.append(this.target);
this.target.hide();
}
GoTop.prototype.bindevent = function(){
var _this = this;
$(window).on('scroll',function(){
if($(window).scrollTop() > 100){
_this.target.show(); //滚动大于100px，btn才出现
}else{
_this.target.hide();
}
})
this.target.on('click',function(){
$(window).scrollTop(0); //滚动到顶端
});
}
var gotop = new GoTop($('.ct'));
gotop.creatNode();
gotop.bindevent();
</script>
</body>
</html>
网友评论