1、什么是对象？
对象是类的具象
1）生活中：就拿人来说吧。隔壁老王、张三、李四等等
2）程序中：
var arr1 =new Array();
var arr2 =new Array();
arr1和arr2就是对象，用类Array创造出来的对象
var d1 = new Date();
d1就是对象（变量，特制引用类型的变量）,是用类Date创造出来的对象
2、对象的创建方式
创建对象的方式有以下四种：
- 字面量json
- 内置构造函数
- 工厂函数
- 构造函数
1）、字面量json
json创建对象：
例:
var person = {
name:"张三",
sex:"男",
eat:function(){
}
}
如果要给对象person添加属性，可以：person.age = 20;
这个方法的优点：
简单，创建对象少，或者一个对象时，完全可以使用
缺点：
1）、代码复用性查
2）、不知道对象属于哪个类型，或者说，哪些对象是同一个类型；
2）、内置构造函数
//先创建一个空对象
var person = new Object();
// 给空对象增加属性
person.name = "张三";
person.sex = "男";
person.age = 18;
// 给空对象增加方法
person.eat = function(){
}
3）、工厂函数
把创建对象的代码放在函数里，所有的属性作为参数传入
例：
function person(name, age) {
var a = new Object()
a.name = name
a.age = age
a.eat = function () {
}
return t
}
优点：代码复用性好
缺点：不知道对象属于哪个类型，或者说，哪些对象是同一个类型
4)、构造函数
当一个普通函数和new运算符一起使用时，称之为构造函数
例：
function Person(name,sex){
this.name = name;
this.sex = sex;
this.eat = function(){
}
}
构造函数和普通函数的区别：
1）、构造函数的名字首字母大写（不是强制的，但是，是程序界的墨守成规），用来区分普通函数
2）、构造函数的调用使用new运算符；
3）、构造函数里，虽然没有明确地写返回值的语句，但是，在预编译时，会自动加上this;
4）、this表示new出来的对象；构造函数里还有一句默认的代码；var this = new Object()；
优点:
1）、代码复用性好，因为构造函数就是特殊的函数而已。
2）、构造函数的方式创建的对象，能够确定对象属于哪个类型（instanceof），或者说，哪些对象是同一个类型；
3、构造函数的this
this只能出现在函数里（函数就是一种场所，场景）
this的指向：
1、当this所在函数是事件处理函数时，this是事件源
2、当this所在函数是构造函数时，this表示的是new出来的对象(先死记硬背住，在下周的面向对象讲)
3、当this所在函数时对象的方法时，this就是（调用函数时的）对象
4、当this所在函数不是对象的方法，也就是一个普通的函数时，this是window对象。
由于任何全局函数（普通函数）都是window对象的方法，所以说，普通函数里的this，也是符合第三点的
4、原型对象（prototype）
- 每一个函数都有一个属性prototype，称之为原型对象或者原型。原型是一个引用类型，原型上的属性和方法能被实例访问。
- 每个对象都有个 _ _ proto_ _ 属性指向函数对象 的prototype属性
5、原型链
如图所示：
5、constructor
constructor 作为原型对象的一个默认属性存在，表示创建实例的构造函数的引用
6、案例部分
下面便于大家理解做了一个小demo：
div代码：
<div id="ball">
</div>
css代码：
<style>
body {
height: 1200px;
}
#ball {
position: absolute;
left: 100px;
top: 200px;
width: 30px;
height: 30px;
border-radius: 100%;
background-color: red;
}
</style>
JS代码：
<script>
var oBall = document.getElementById('ball')
function Ball(dom, size, left1, top1, color, step, directionLeft, directionTop, timeSpace) {
this.dom = dom
this.size = size
this.left1 = left1
this.top1 = top1
this.color = color
this.step = step
this.timeSpace = timeSpace
this.directionLeft = directionLeft
this.directionTop = directionTop
this.go = function () {
setInterval(() => {
this.left1 = this.left1 + this.directionLeft * step
this.top1 = this.top1 + this.directionTop * step
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (this.top1 + this.size > clientHeight + scrollTop) {
this.top1 = clientHeight + scrollTop - this.size
this.directionTop = -1
}
else if (this.top1 < scrollTop) {
this.top1 = scrollTop
this.directionTop = 1
}
let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
if (this.left1 + this.size > clientWidth + scrollLeft) {
this.left1 = clientWidth + scrollLeft - this.size
this.directionLeft = -1
}
else if (this.left1 < scrollLeft) {
this.left1 = scrollLeft
this.directionLeft = 1
}
this.dom.style.left = this.left1 + 'px'
this.dom.style.top = this.top1 + 'px'
}, this.timeSpace)
}
}
window.onload = function () {
let b1 = new Ball(oBall, 30, 100, 200, "red", 1, 1, 1, 5);
b1.go();
}
</script>
大家去试一下吧！