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>
大家去试一下吧!