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 student = { name : "easy", age : 20 }
这样看起来似乎就完美了,但是马上我们就发现了一个十分尖锐的问题: 当我们要创建同类的student1, student2 ....,我们不得不将以上的代码重复n次n
2, 工厂哦是创建对象
JS中没有类的概念,那么我们就不妨就使用一种函数将以上对象创建过程封装起来以便于重复调用,同时可以给出特定接口来初始化对象
function createStudent(name, age){ var obj = new Object(); obj.name = name; obj.age = age; return obj; } var student1 = createStudent("陈润", 20); var student2 = createStudent("alex", 20);
这样一来我们就可以通过createStudent函数源源不断地"生产"对象了, 看起来已经高枕无忧了,但贪婪的人类总是不满足现状的天性: 我们不仅希望"产品"的生产可以想工厂车间一般源源不断,我们还想知道生产的产品究竟是哪一种类型的.
function creatFruit(name, color){ var obj = new Object(); obj.name = name; obj.color = color; return obj; } var v1 = createStudent("easy1", 10); 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);
在进行自定义构造创建对象之前,我们首先了解下构造函数和普通函数有什么区别.
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) }; } var v1 = new Student("chenrun", 20); var v2 = new Fruit("apple", "green"); alert(v1 instanceof Student); alert(v2 instanceof Fruit);
这样我们就解决了工厂模式无法区分对象的尴尬.那么使用构造方法来创建对象是否已经完美了呢,使用构造器函数通常在js中我们来创建对象.
我们会发现Student和Fruit对象中共有同样的方法,我们进行条用的时候进行调用这无疑时内存的消耗,
我们可以在执行该函数的时候在这样做,办法就是将对象方法一熬构造函数外部
function Student(name, age){ this.name = name; this.age = age; this.aletName = alertName; } function alertName() { alert(this.name); } var stu1 = new Student("chenrun", 10); var stu2 = new Student("alex", 90);
在调用stu1.alertName()时,this对象才被绑定到stu1上.
我们通过将alertName()函数定义为全局杉树,这样对象中的alertName属性则被设置为指向该全局函数的指针,由此stu1和stu2共享了该全局函数.解决了内存浪费的问题
但是,通过全局函数的方式解决随想内部共享的问题,终究不像一个好的解决办法.如果这样定义的全局函数多了,我们想要将定义对象封装的初衷便几乎无法实现了,更好的方案时通过原型对象模式来解决
4,原型的模型创建对象
原型链甚至原型继承,时整个JS总最难的一部分也是最不好理解的一部分,在这里由于我们课程定位的愿意,如果对js有兴趣的同学,可以去查阅相关的js原型,阮一峰
function Student(){ this.name = "chenrun"; this.age = 20; } Student.prototype.alertName = function() { alert(this.name); }; var stu1 = new Student(); var stu2 = new Student(); stu1.alertName(); stu2.alertName(); alert(stu1.alertName == stu2.alertName); // true
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
15-BOM
BOM的介绍
-
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
-
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
-
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。
什么时BOM
BOM: Browser Object Model, 浏览器对象模型
BOM的结构图:
从上图也可以看出：
-
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
-
DOM是BOM的一部分。
window对象：
-
window对象是JavaScript中的顶级对象。
-
全局变量、自定义函数也是window对象的属性和方法。
-
window对象下的属性和方法调用时，可以省略window。
下面讲一下 BOM 的常见内置方法和内置对象。
弹出系统对话框
比如说,alert(1)时window.alert(1)的简写,因为他是window的字方法
系统对话框有三种
alert(); //不同浏览器中的外观是不一样的 confirm(); //兼容不好 prompt(); //不推荐使用
打开窗口, 可关闭窗口
1,打开窗口:
window,open(url, target);
参数解释：
-
url：要打开的地址。
-
target：新窗口的位置。可以是：
_blank、_self、_parent父框架。
<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相当于浏览器地址栏,可以将utrl解析成独立的片段
location对象的属性
-
href：跳转
-
hash 返回url中#后面的内容，包含#
-
host 主机名，包括端口
-
hostname 主机名
-
pathname url中的路径部分
-
protocol 协议 一般是http、https
-
search 查询字符串
location.href属性举例：
举例1：点击盒子时，进行跳转。
<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>
举例2：5秒后自动跳转到百度。
有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location。举例：
<script> setTimeout(function () { location.href = "http://www.baidu.com"; }, 5000); </script>
location对象的方法
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)
用的不多。因为浏览器中已经自带了这些功能的按钮：
浙公网安备 33010602011771号