十三、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 二者共享同一函数

十四、定时器

在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

十五、BOM

BOM的介绍

JavaScript基础分为三个部分：

  • 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 父框架。

<!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属性举例：

举例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)

用的不多。因为浏览器中已经自带了这些功能的按钮：

转载于:https://www.cnblogs.com/shanae/p/9713483.html

JavaScript基础（三）相关推荐

  1. JavaScript基础三

    BOM BOM: browser object model 浏览器对象模型.允许JS和浏览器"对话". window object窗口对象,代表浏览器窗口. 所有浏览器都支持窗口对 ...

  2. JavaScript 基础(三) - Date对象，RegExp对象，Math对象，Window 对象，History 对象，Location 对象，DOM 节点...

    Date对象 创建Date对象 //方法1:不指定参数var date_obj = new Date();alert(date_obj.toLocaleString())//方法2:参数为日期字符串v ...

  3. 前端小白学习路线及知识点汇总（三）-- JavaScript基础

    前端小白学习路线及知识点汇总(三)-- JavaScript基础 一. JavaScript的组成 ECMAScript:由ECMA国际进行标准化的一门编程语言,往往被称为JavaScript或Jsc ...

  4. 第三十五篇（JavaScript基础）

    JavaScript基础 前言 JavaScript(简称 JS)一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分, ...

  5. 前端基础三之JavaScript基础

    文章目录 题外话 前言 1. JavaScript基础 1.1 JavaScript介绍 1.2 基础语法 1.2.1 Hello World 1.2.2 注释 1.2.3 变量 1.2.4 数据类型 ...

  6. JavaScript基础一

    1.1 javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) J ...

  7. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  8. JavaScript基础---语言基础（1）

    写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...

  9. javascript基础语法——词法结构

    前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫:而说它复杂,是因为要真正掌握它则需要数年时间.实际上,前端工程师很大程度上就是指javasc ...

  10. javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程（上）

    阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到. 本篇文章成哥继续带大家来学习前端教程之JavaScript,网页的动态事件基本上都是靠它来实现的.下面我们就一起来学习内容吧! 01 Ja ...

最新文章

  1. JPA（二）之CRUD操作
  2. 暴力求解——最大乘积 Maximum Product,UVa 11059
  3. SSM综合练习表结构介绍
  4. 每个程序员都应该了解的内存知识【第一部分】
  5. 清华王兴再抛神论：为什么教育决定着中国餐饮业质量？
  6. 第4章字符串的实现-勘误
  7. ls一1测距仪说明书_小米又推爆品：99元杜克LS-P激光测距仪，已获红点和iF大奖...
  8. MySql多对多关系中外键的应用
  9. r语言必学的十个包肖凯_家长专栏语言发育迟缓儿童的家庭训练小游戏
  10. 服务器webpack构建性能,webpack性能优化——构建效率（一）
  11. 使用IDEA反编译class文件
  12. OBJ 模型文件与MTL材质文件 介绍
  13. 计算机模拟超光速,超光速十代笔记本电脑怎么样-电脑测评
  14. matlab读lExcel文字,matlab读取excel文件及其数据处理
  15. openwrt的两种固件类型：factory原厂固件、sysupgrade固件
  16. win10连接虚拟机ftp服务器配置,win10虚拟机ftp服务器
  17. 《漫步》flash动画制作全记录五
  18. 第十七届全国大学生智能车竞赛线上比赛直播链接
  19. yuan先生博客园地址
  20. Xpath-彼岸图网高清图片获取

热门文章

  1. vue各种组件（不断增加中...）
  2. 《奇点来临》——阿西莫夫三大定律
  3. Netflix OSS、Spring Cloud还是Kubernetes? 都要吧！
  4. 1、Python基本对象类型----数字
  5. 线性表的常见操作实现
  6. 一个轻client，多语言支持，去中心化，自己主动负载，可扩展的实时数据写服务的实现方案讨论...
  7. 武汉科技大学ACM：1006: 我是老大
  8. hdu 4539 郑厂长系列故事——排兵布阵
  9. java画图中运用缓冲解决屏幕闪烁方案二
  10. makefile ------ subst、foreach、wildcard、notdir