13-JS中的面向对象、14-定时器
13-JS中的面向对象
创建对象的几种常用方式
1.使用Object或对象字面量创建对象
2.工厂模式创建对象
3.构造函数模式创建对象
4.原型模式创建对象
1.使用Object或对象字面量创建对象
JS中最基本创建对象的方式：
var student = new Object(); student.name = "easy"; student.age = "20";
这样，一个student对象就创建完毕，拥有2个属性name以及age，分别赋值为"easy"和20。
如果你嫌这种方法有一种封装性不良的感觉。来一个对象字面量方式创建对象。
var sutdent = { name : "easy", age : 20 };
这样看起来似乎就完美了。但是马上我们就会发现一个十分尖锐的问题：当我们要创建同类的student1，student2，…，studentn时，我们不得不将以上的代码重复n次....
var sutdent1 = { name : "easy1", age : 20 }; var sutdent2 = { name : "easy2", age : 20 }; ... var sutdentn = { name : "easyn", age : 20 };
有个提问？能不能像工厂车间那样，有一个车床就不断生产出对象呢？我们看”工厂模式”。
2.工厂模式创建对象
JS中没有类的概念，那么我们不妨就使用一种函数将以上对象创建过程封装起来以便于重复调用，同时可以给出特定接口来初始化对象
function createStudent(name, age) { var obj = new Object(); obj.name = name; obj.age = age; return obj; } var student1 = createStudent("easy1", 20); var student2 = createStudent("easy2", 20); ... var studentn = createStudent("easyn", 20);
这样一来我们就可以通过createStudent函数源源不断地”生产”对象了。看起来已经高枕无忧了，但贪婪的人类总有不满足于现状的天性：我们不仅希望”产品”的生产可以像工厂车间一般源源不断，我们还想知道生产的产品究竟是哪一种类型的。
比如说，我们同时又定义了”生产”水果对象的createFruit()函数：
function createFruit(name, color) { var obj = new Object(); obj.name = name; obj.color = color; return obj; } var v1 = createStudent("easy1", 20); var v2 = createFruit("apple", "green");
对于以上代码创建的对象v1、v2，我们用instanceof操作符去检测，他们统统都是Object类型。我们的当然不满足于此，我们希望v1是Student类型的，而v2是Fruit类型的。为了实现这个目标，我们可以用自定义构造函数的方法来创建对象
3.构造函数模式创建对象
在上面创建Object这样的原生对象的时候，我们就使用过其构造函数：
var obj = new Object();
在创建原生数组Array类型对象时也使用过其构造函数：
var arr = new Array(10); //构造一个初始长度为10的数组对象
在进行自定义构造函数创建对象之前，我们首先了解一下构造函数和普通函数有什么区别。
1、实际上并不存在创建构造函数的特殊语法，其与普通函数唯一的区别在于调用方法。对于任意函数，使用new操作符调用，那么它就是构造函数；不使用new操作符调用，那么它就是普通函数。
2、按照惯例，我们约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分二者。例如上面的new Array()，new Object()。
3、使用new操作符调用构造函数时，会经历(1)创建一个新对象；(2)将构造函数作用域赋给新对象（使this指向该新对象）；(3)执行构造函数代码；(4)返回新对象；4个阶段。
ok，了解了构造函数和普通函数的区别之后，我们使用构造函数将工厂模式的函数重写，并添加一个方法属性：
function Student(name, age) { this.name = name; this.age = age; this.alertName = function(){ alert(this.name) }; } function Fruit(name, color) { this.name = name; this.color = color; this.alertName = function(){ alert(this.name) }; }
这样我们再分别创建Student和Fruit的对象：
var v1 = new Student("easy", 20); var v2 = new Fruit("apple", "green");
这时我们再来用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了：
alert(v1 instanceof Student); //true alert(v2 instanceof Student); //false alert(v1 instanceof Fruit); //false alert(v2 instanceof Fruit); //true alert(v1 instanceof Object); //true 任何对象均继承自Object alert(v2 instanceof Object); //true 任何对象均继承自Object
这样我们就解决了工厂模式无法区分对象类型的尴尬。那么使用构造方法来创建对象是否已经完美了呢？使用构造器函数通常在js中我们来创建对象。
我们会发现Student和Fruit对象中共有同样的方法，当我们进行调用的时候这无疑是内存的消耗。
我们完全可以在执行该函数的时候再这样做，办法是将对象方法移到构造函数外部：
function Student(name, age) { this.name = name; this.age = age; this.alertName = alertName; } function alertName() { alert(this.name); } var stu1 = new Student("easy1", 20); var stu2 = new Student("easy2", 20);
在调用stu1.alertName()时，this对象才被绑定到stu1上。
我们通过将alertName()函数定义为全局函数，这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数，解决了内存浪费的问题
但是，通过全局函数的方式解决对象内部共享的问题，终究不像一个好的解决方法。如果这样定义的全局函数多了，我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。
4.原型的模式创建对象
原型链甚至原型继承，是整个JS中最难的一部分也是最不好理解的一部分，在这里由于我们课程定位的原因，如果对js有兴趣的同学，可以去查阅一下相关JS原型的一些知识点。更加有助于你以后前端JS的面试。
function Student() { this.name = 'easy'; this.age = 20; } Student.prototype.alertName = function(){ alert(this.name); }; var stu1 = new Student(); var stu2 = new Student(); stu1.alertName(); //easy stu2.alertName(); //easy alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数
案列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//使用Object()内置的构造函数来创建对象
var person = new Object();
person.name = 'alex';
person.age = 18;
person.address ='北京昌平区';
person.fav = function () {
console.log(this.name);
console.log(this.age);
console.log(this.address);
};
person.fav() //调用函数
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 字面量方式创建对象
var persion ={
name:'wusir',
age:180,
address:'北京大兴区',
fav:function () {
console.log(this.name);
console.log(this.age);
console.log(this.address);
}
};
persion.fav()
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//函数式创建
function createPerson() {
var person = new Object();
person.name = 'alex';
person.age = 20;
person.address ='河南省郑州市';
person.fav=function () {
console.log(this.name);
console.log(this.age);
console.log(this.address)
};
return person
}
var obj1 = createPerson();
console.log(obj1,obj1.fav())
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//函数式创建
function createPerson() {
var person = new Object();
person.name = 'alex';
person.age = 20;
person.address ='河南省郑州市';
person.fav=function () {
console.log(this.address)
};
return person;
}
function createFruit() {
var fruit = new Object();
fruit.address ='水果的批发厂家';
fruit.name='闫学晶';
fruit.age = 120;
fruit.pev = function () {
console.log(this.address)
};
return fruit;
}
var obj1 = createPerson();
var obj2 = createFruit();
console.log(obj1,obj1.fav());
console.log(obj2,obj2.pev());
console.log(obj1 instanceof createPerson,obj1 instanceof Object);
console.log(obj2 instanceof createFruit,obj2 instanceof Object);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//自定义构造函数
function Persion(name,age) {
this.name = name;
this.age = age ;
this.fav = function () {
console.log(this.name)
}
}
var p1 = new Persion('alex',90);
var f1 = new Persion('jack',100);
console.log(p1,p1 instanceof Object);
console.log(f1,f1 instanceof Object);
console.log(p1,p1 instanceof Persion);
console.log(f1,f1 instanceof Persion);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function Person(name,age) {
this.name = name;
this.age = age;
}
// Person.prototype 它是person的父类
// 原型 prototype
Person.prototype.showName = function () {
// this指的是person
console.log(this.name)
};
var p1 = new Person('赵本山',120);
console.log(p1);
p1.showName();
</script>
</body>
</html>
14-定时器
在js中的定时器分两种：1、setTimeout() 2、setInterval()
1.setTimeOut()
只在指定时间后执行一次
/定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 window.clearTimeout(t1);//去掉定时器
2.setInterval()
在指定时间为周期循环执行
/实时刷新 时间单位为毫秒
setInterval('refreshQuery()',8000);
/* 刷新查询 */
function refreshQuery(){
console.log('每8秒调一次')
}
两种方法根据不同的场景和业务需求择而取之，
对于这两个方法，需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout
定时器案列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#id {
height: 100px;
width: 100px;
background-color: red;
}
</style>
<body>
<!-- 定时器
（1）一次性定时器
可以做异步
（2）循环周期定时器
可以做动画
js跟python一样 都有垃圾回收机制
but 定时器对象 垃圾回收收不回
开一次性定时器：
var timer = setTimeout(fn,1000);
开循环定时器
setInterval(fn,1000);
clearTimeout() 清除一次定时器
clearInterval() 清除循环定时器
-->
<button id="start">开始</button>
<button id="end">结束</button>
<div id="box"></div>
<script>
var timmer = null;
document.getElementById('start').onclick = function () {
// 未来 数据交互的时候 如果数据阻塞了，可以考虑 加一个一次性定时器来处理
// 创建一次性定时器
timmer = setTimeout(function () {
console.log('111')
},3000); //表示3秒后执行
console.log(222)
};
//清除一次性定时器
document.getElementById('end').onclick = function () {
clearTimeout(timmer);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#box {
height: 100px;
width: 100px;
background-color: red;
}
</style>
<body>
<!-- 定时器
（1）一次性定时器
可以做异步
（2）循环周期定时器
可以做动画
js跟python一样 都有垃圾回收机制
but 定时器对象 垃圾回收收不回
开一次性定时器：
var timer = setTimeout(fn,1000);
开循环定时器
setInterval(fn,1000);
clearTimeout() 清除一次定时器
clearInterval() 清除循环定时器
-->
<button id="start">开始</button>
<button id="end">结束</button>
<div id="box"></div>
<script>
var timmer = null;
var count = 0;
document.getElementById('start').onclick=function () {
var box = document.getElementById('box');
clearInterval(timmer); //清除循环定时器
//绑定循环定时器
timmer = setInterval(function () {
count +=10;
box.style.marginLeft=count+'px';
},1000)
}
</script>
</body>
</html>
浙公网安备 33010602011771号