对象、原型
1、 OOP 指什么？有哪些特性
OOP是Object-oriented programming的缩写，指面向对象程序设计。
在面向对象程序设计中有两个重要概念
-
类：
类是对现实生活中一类具有共同特征的事物的抽象。 -
对象：
对象是类的实例，对象包含属性和方法，属性是需要记忆的信息，方法是对象能够提供的服务。
特性
-
继承
子类能继承父类的属性和方法
子类能添加新的属性和方法，还能重写父类的属性和方法 -
封装
隐藏对象的属性和实现细节，仅对外公开接口 -
多态
指同一个实体同时具有多种形式，同一操作作用于不同对象，可以有不同的解释，产生不同的执行结果。
2： 如何通过构造函数的方式创建一个拥有属性和方法的对象?
2.1 构造函数
面向对象编程的第一步，就是要生成对象。
对象是单个实物的抽象。通常需要一个模板，表示某一类实物的共同特征，然后对象根据这个模板生成。
典型的面向对象编程语言（比如 C++ 和 Java），存在“类”（class）这个概念。所谓“类”就是对象的模板，对象就是“类”的实例。但是，JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。
JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成对象的函数。它提供模板，描述对象的基本结构。一个构造函数，可以生成多个对象，这些对象都有相同的结构。
构造函数的写法就是一个普通的函数，但是有自己的特征和用法。
var Vehicle = function () {
this.price = 1000;
};
上面代码中，Vehicle就是构造函数，它提供模板，用来生成实例对象。为了与普通函数区别，构造函数名字的第一个字母通常大写。
构造函数的特点有两个。
-
函数体内部使用了this关键字，代表了所要生成的对象实例。
-
生成对象的时候，必需用new命令，调用Vehicle函数。
2.2 new 命令的原理
new命令的作用，就是执行构造函数，返回一个实例对象。
new运算符创建对象实例：new后面跟一个函数 F ，根据需要函数可以传入参数，new F(arguments...)。
使用new运算符创建对象实例这一过程分为四步：
-
创建一个空对象，作为将要返回的对象实例
-
将这个空对象的原型，指向构造函数的prototype属性
-
将这个空对象赋值给函数内部的this关键字
-
开始执行构造函数内部的代码（为实例对象添加属性和方法）
也就是说，构造函数内部，this指的是一个新生成的空对象，所有针对this的操作，都会发生在这个空对象上。构造函数之所以叫“构造函数”，就是说这个函数的目的，就是操作一个空对象（即this对象），将其“构造”为需要的样子。
如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象。
var Vehicle = function () {
this.price = 1000;
return 1000;
};
(new Vehicle()) === 1000
// false
上面代码中，构造函数Vehicle的return语句返回一个数值。这时，new命令就会忽略这个return语句，返回“构造”后的this对象。
但是，如果return语句返回的是一个跟this无关的新对象，new命令会返回这个新对象，而不是this对象。这一点需要特别引起注意。
var Vehicle = function (){
this.price = 1000;
return { price: 2000 };
};
(new Vehicle()).price
// 2000
上面代码中，构造函数Vehicle的return语句，返回的是一个新对象。new命令会返回这个对象，而不是this对象。
另一方面，如果对普通函数（内部没有this关键字的函数）使用new命令，则会返回一个空对象。
function getMessage() {
return 'this is a message';
}
var msg = new getMessage();
msg // {}
typeof msg // "object"
上面代码中，getMessage是一个普通函数，返回一个字符串。对它使用new命令，会得到一个空对象。这是因为new命令总是返回一个对象，要么是实例对象，要么是return语句指定的对象。本例中，return语句返回的是字符串，所以new命令就忽略了该语句。
如果忘了使用new命令，直接调用构造函数会发生什么事？
这种情况下，构造函数就变成了普通函数，并不会生成实例对象this这时代表全局对象，将造成一些意想不到的结果。
var Vehicle = function (){
this.price = 1000;
};
var v = Vehicle();
v.price
// Uncaught TypeError: Cannot read property 'price' of undefined
price
// 1000
上面代码中，调用Vehicle构造函数时，忘了加上new命令。结果，price属性变成了全局变量，而变量v变成了undefined。
通过构造函数的方式创建一个拥有属性和方法的对象:
function People(name,color){
this.name=name;
this.color=color;
this.sayname=function(){
console.log(this.name);
}
}
var person1=new People('xuguojun','red')
3： prototype 是什么？有什么特性
我们创建的每个函数都有一个 prototype（原型）属性。使用原型的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型中，如下面的例子所示。
function Person(){}
Person.prototype.name = "Stone";
Person.prototype.age = 28;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
console.log(this.name);
};
var person1 = new Person();
person1.sayName(); // "Stone"
var person2 = new Person();
person2.sayName(); // "Stone"
console.log(person1.sayName == person2.sayName); // true
再来看一幅图：
image.png
通过图示我们可以看出一些端倪，实例可以通过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('前端');
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);
};
var newCar = new Car('兰博基尼','black',0);
newCar.run();
newCar.stop();
newCar.getStatus();
6： 创建一个 GoTop 对象，当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素，点击页面滚动到顶部。拥有以下属性和方法
-
ct属性，GoTop 对应的 DOM 元素的容器
-
-
target属性， GoTop 对应的 DOM 元素
-
-
bindEvent方法， 用于绑定事件
-
- 4
createNode方法， 用于在容器内创建节点
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.goTop{
border: 1px solid yellow;
width: 110px;
height: 40px;
line-height: 40px;
text-align: center;
background: yellow;
cursor: pointer;
position: fixed;
bottom: 20px;
right: 20px;
}
</style>
</head>
<body>
<div class="ct">
<p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容1</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容2</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p><p>内容3</p>
</div>
<script>
function GoTop($ele){
this.ct=$ele;
this.target=$('<div class="goTop">回到顶部</div>');
this.init();
};
GoTop.prototype={
init:function(){
this.createNode();
this.bindEvent();
},
createNode:function(){
var me=this;
me.target.hide();
$('body').append(me.target);
$(window).on('scroll',function(){
if($(window).scrollTop()>300){
me.target.show();
}else{
me.target.hide();
}
});
},
bindEvent:function(){
var me=this;
me.target.on('click',function(){
$(window).scrollTop(0);
})
}
}
var go=new GoTop( $('body') );
</script>
</body>
</html>
