一、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。
对象字面量方式创建对象
ar sutdent = { name : "easy", 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);
对象的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");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//使用Object()内置的构造函数来创建对象
// new Array()
// []
/*
var person = new Object();
person.name = 'alex';
person.age = 18;
person.fav = function() {
alert(this.name);
}
person.fav();
*/
/*
// 字面量方式创建对象
var person = {
name:'玖妖',
age:18,
fav:function() {
alert(this.name)
}
};
person.fav();
*/
function createPerson(){
var person = new Object();
person.name = 'alex';
person.age = 18;
person.fav = function() {
alert(this.name);
}
return person;
}
function createFruit(){
var fruit = new Object();
fruit.name = 'alex';
fruit.age = 18;
fruit.fav = function() {
alert(this.name);
}
return fruit;
}
var p1 = createPerson();
var f1 = createFruit();
console.log(p1 instanceof Object);
console.log(f1 instanceof Object);
</script>
</body>
</html>
3.构造函数模式创建对象
构造函数：
var obj = new Object();
创建原生数组Array类型对象时用过构造函数
var arr = new Array(10); //构造一个初始长度为10的数组对象
构造函数和普通函数的区别：
1.调用方法 ： 使用new操作符调用，那么它就是构造函数；不使用new操作符调用，那么它就是普通函数。
2.构造函数名以大写字母开头，普通函数以小写字母开头
3.使用new操作符调用构造函数时，会经历(1)创建一个新对象；(2)将构造函数作用域赋给新对象（使this指向该新对象）；(3)执行构造函数代码；(4)返回新对象；4个阶段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// var arr = new Array();
// console.log(arr);
//自定义构造函数
function Person(name,age) {
this.name = name;
this.age = age;
this.fav = function() {
alert(this.name);
}
}
function Fruit(name,age) {
this.name = name;
this.age = age;
this.fav = function() {
alert(this.name);
}
}
var p1 = new Person('alex',17);
var f1 = new Fruit('wusir',19);
console.log(p1 instanceof Object);
console.log(f1 instanceof Object);
console.log(p1 instanceof Person);
console.log(f1 instanceof Fruit);
</script>
</body>
</html>
用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
将对象方法移到构造函数外部：
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);
4.原型模创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></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('alex',18);
console.log(p1);
p1.showName();
</script>
</body>
</html>
二、定时器
在js中的定时器分为两种： 1.setTimeOut( ) 2.setInterval( )
1.setTimeOuo()
只在指定时间后执行一次
/定时器 异步运行 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>
<style>
#box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button id="start">开启定时器</button>
<button id="clear">清除定时器</button>
<div id="box"></div>
<!-- 定时器
（1）一次性定时器
可以做异步
（2）循环周期定时器
可以做动画
js跟python一样 都有垃圾回收机制
but 定时器对象 垃圾回收收不回
开一次性定时器：
var timer = setTimeout(fn,1000);
开循环定时器
setInterval(fn,1000);
clearTimeout()
clearInterval()
-->
<script>
/*
var timer = null;
document.getElementById('start').onclick = function() {
// 未来 数据交互的时候 如果数据阻塞了，可以考虑 加一个一次性定时器来处理
timer = setTimeout(function(){
console.log(1111);
},3000);
console.log(2222);
}
document.getElementById('clear').onclick = function() {
clearTimeout(timer);
}
*/
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';
}, 50)
}
</script>
</body>
</html>
三、BOM
BOM：Browser Object Model，浏览器对象模型。
BOM的结构图:
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
DOM是BOM的一部分。
window对象：
-
window对象是JavaScript中的*对象。
-
全局变量、自定义函数也是window对象的属性和方法。
-
window对象下的属性和方法调用时，可以省略window。
1.弹出系统对话框
alert(1)是window.alert(1)的简写，因为它是window的子方法。
2.打开窗口, 关闭窗口
打开窗口:
window.open(url,target)
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>
3.location对象
window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。
a.location对象的属性
href : 跳转
hash : 返回url中后面的内容 , 包括#
host : 主机名 , 包括端口
hostname : 主机名
pathname : url 中的路径部分
protocol : 协议 一般是http、https
search : 查询字符串
例子; 点击盒子时 , 进行跳转
<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>
b. location对象的方法
location.reload()：重新加载
setTimeout(function(){ //3秒之后让网页整个刷新 window.location.reload(); },3000)
4.navigator对象
window.navigator 的一些属性可以获取客户端的一些信息。
-
userAgent：系统，浏览器)
-
platform：浏览器支持的系统，win/mac/linux
console.log(navigator.userAgent);
console.log(navigator.platform);
5.history对象
1、后退：
-
history.back()
-
history.go(-1)：0是刷新
2、前进：
-
history.forward()
-
history.go(1)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button id = 'btn'>上一页</button>
<script>
alert(1);
document.getElementById('btn').onclick = function () {
//后退
// history.go(-1);
// history.go(0);
// 尽量少用 可以做测试 全局刷新 局部刷新（ajax）
window.location.reload();
}
</script>
</body>
</html>