十三丶JS中的面向对象
创建对象的几种常用方式:
1.使用Object或对象字面量创建对象
2.工厂模式创建对象
3.构造函数模式创建对象
4.原型模式创建对象
下面我们详细看一下如何创建对象
1.使用Object或对象字面量创建对象
JS中最基本创建对象的方式:
<script type="text/javascript">
var student = new Object();
student.name = "alex";
student.age = "20"
</script>
字面量方式创建对象:
var student = {
name:"alex",
age:18
};
2.工厂模式创建对象
以上的方式看似简便,但是我们要是创建很多个同类的呢?我们是不是得把以上代码重复n次呢,是否可以像工厂车间那样,不断生产呢?那就让我们看看工厂车间那样,如何"产出"对象
function createStudent(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
}
var student1 = createStudent('easy',20);
var student2 = createStudent('easy2',20)
...
var studentn = createStudent('easyn',20)
3.构造函数模式创建对象
在上面创建Object这样的原生对象的时候,我们就使用过其构造函数:
在创建原生数组Array类型对象时也使用过其构造函数:
var arr = new Array(10); //构造一个初始长度为10的数组对象
在进行自定义构造函数创建对象之前,我们先了解一下构造函数和普通函数有什么区别.
1丶实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法.对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数.
2丶按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者,例如上面的new Array(),new Object().
3.使用new操作符调用构造函数时,会经历(1)创建一个新对象(2)将构造函数作用域赋给新对象(指this指向该新对象)(3)执行构造函数代码(4)返回新对象;4个阶段
我们使用构造函数将工厂模式的函数重写,并添加一个方法属性
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)
};
}
4.原型的模式创建对象
原型链甚至原型继承,是整个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 二者共享同一函数
十四丶定时器
(1)一次性定时器
可以做异步
(2)循环周期定时器
可以做动画
JS跟python一样都有垃圾回收机制,但是定时器对象垃圾回收是回收不了的
1.setTimeOut()一次性定时器,只在指定时间后执行一次
<script type="text/javascript">
<!--一次性定时器-->
function hello(){
alert("hello");
}
<!--使用方法名字执行方法-->
var t1 = window.setTimeout('hello',1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.cleatTimeout(t1);//去掉定时器
</script>
2.setInterval()
//循环周期定时器
setInterval('refreshQuery()',8000);
function refreshQuery(){
console.log("每8秒调一次")
}
练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id = "start">开启定时器</button>
<button id = "clear">清除定时器</button>
<div id="box"></div>
<script type="text/javascript">
var count = 0;
var timer = null;
document.getElementById("start").onclick = function(){
var oDiv = document.getElementById("box");
clearInterval(timer);
timer = setInterval(function(){
count += 10;
oDiv.style.marginLeft = count + "px";
oDiv.style.marginTop = count/2 +"px"
},50)
}
</script>
</body>
</html>
View Code
十五丶BOM的介绍
BOM; Browser Object Model,浏览器对象模型.
window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以成为window对象的子对象,DOM是BOM的一部分.
1丶弹出系统对话框
比如说,alert(1)是window.alert(1)的简写,以为它是window的子方法.
系统对话框有三种:
alert(); //不同浏览器中的外观是不一样的
confirm(); //兼容不好
prompt(); //不推荐使用
2.打开窗口丶关闭窗口
(1)打开窗口:
url:要打开的地址
target:新窗口的位置.可以是:_blank丶_self丶_parent父框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--行间的js中的open() window不能省略-->
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
<button>打开百度</button>
<button onclick="window.close()">关闭</button>
<button>关闭</button>
</body>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button')[1];
var closeBtn = document.getElementsByTagName('button')[3];
oBtn.onclick = function(){
open('https://www.baidu.com')
//打开空白页面
// open('about:blank',"_self")
}
closeBtn.onclick = function(){
if(confirm("是否关闭？")){
close();
}
}
</script>
</html>
location对象
window.location可以简写成location.location 相当于浏览器地址栏,可以将url解析成独立的片段.
location对象的属性
href:跳转
hash 返回url中#后面的内容,包括#
host 主机名,包括端口
hostname 主机名
pathname url中的路径部分
protocol 协议一般是http丶https
search 查询字符串
location.href属性举例:
点击盒子时，进行跳转。
<body>
<div>smyhvae</div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.href = "http://www.baidu.com"; //点击div时，跳转到指定链接
// window.open("http://www.baidu.com","_blank"); //方式二
}
</script>
</body>
5秒后自动跳转到百度。
<script>
setTimeout(function () {
location.href = "http://www.baidu.com";
}, 5000);
</script>
location.reload()：重新加载
setTimeout(function(){
//3秒之后让网页整个刷新
window.location.reload();
},3000)
navigator对象
window.navigator 的一些属性可以获取客户端的一些信息。
userAgent:系统丶浏览器
platform;浏览器支持的系统,win/mac/linux
console.log(navigator.userAgent);
console.log(navigator.platform);
history对象
1、后退：
-
-
-
history.back()
-
history.go(-1)：0是刷新
2、前进：
-
-
-
history.forward()
-
history.go(1)
用的不多。因为浏览器中已经自带了这些功能的按钮：