一、问答
1.OOP 指什么？有哪些特性 (难度: ***)
OOP指的是面向对象编程（Object Oriented Programmming）是一种计算编程架构。OOP的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或者对象组合而成。
特性：
封装 ：就是将一个类的使用和实现分开，只保留部分接口和方法与外部联系 。
继承：子类自动继承其父级类中的属性和方法，并可以添加新的属性和方法或者对部分属性和方法进行重写。继承增加了代码的可重用性。
多态：多个子类中虽然都具有同一个方法，但是这些子类实例化的对象调用这些相同的方法后却可以获得完全不同的结果，多态性增强了软件的灵活性。
2.如何通过构造函数的方式创建一个拥有属性和方法的对象? (难度: ***)
构造函数：任何函数使用new表达式就是构造函数，下面是一个构造函数的简单例子和使用方法
function People(name){
this.name=name;
this.sayHi=function(){
console.log(this.name+'say:Hi!');
}
}
var p1=new People("xiaohan");
var p2=new People("xiaosusu")
p1.sayHi();
p2.sayHi();
3.prototype 是什么？有什么特性 (难度: ***)
每个构造函数上，构造函数都有prototype属性（其实是所有函数都有prototype属性，默认是object），
构造函数中的prototype属性就是原生对象，在使用构造函数生成对象实例时，实例对象通过构造函数的prototype属性找到原生对象，并继承原生对象的属性和方法。
作用：原型对象上的所有属性和方法，都能被派生对象共享。这就是JavaScript继承机制的基本设计机制
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.以下代码中的变量name有什么区别
function People (){
var name = "饥人谷" //函数内部局部变量
this.name = "我"; //实例对象属性 每个实例对象初始化的name属性就是“我”
}
People.name = "jscode"; //静态属性 函数People的属性
People.prototype.name = "学前端"; //实例对象所对应原生对象属性，会被实例对象继承，
//如果实例对象有name属性，则会被覆盖
二、代码
1.创建一个 Car 对象，拥有属性name、color、status；拥有方法run，stop，getStatus (难度: ****)
function Car(name,color){
this.name=name;
this.color=color;
this.status="stop";
}
Car.prototype={
run:function(){
this.status="run";
},
stop:function(){
this.status="stop";
},
getStatus:function(){
return this.status;
}
};
2.创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
ct属性，GoTop 对应的 DOM 元素的容器
target属性， GoTop 对应的 DOM 元素
bindEvent 方法， 用于绑定事件
createNode 方法， 用于在容器内创建节点
function GoTop($ct,$target){
this.$ct=$ct;
this.$target=$target;
this.init();
}
GoTop.prototype={
bindEvent:function(){
this.$target.on("click",function(){
$(window).scrollTop(0);
})
},
createNode: function(){
this.$ct.append(this.$target);
},
init:function(){
this.createNode();
this.bindEvent();
}
};
var $target=$('<div id="goTop">goTop</div>');
var goTop=new GoTop($(".ct"),$target);
参考文档：
本教程版权归小韩同学和饥人谷所有，转载须说明来源
网友评论