JS函数与BOM

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS函数与BOM相关的知识,希望对你有一定的参考价值。

[函数的声明及调用]
1、函数声明的格式:
function 函数名(参数1,参数2,....){
//函数体
return结果;
}
函数名(参数1的值,参数2的值,....)

>>>函数的调用格式
直接调用:函数名(参数1的值,参数2的值,....)
事件调用:事件名="函数名()";

2、函数声明的几点强调:

①函数名的声明,必须符合小驼峰法则(首字母小写,之后每个单词字母大写)

②参数列表,可以有参数,也可以无参数。分别称为有参函数和无参函数。

③声明函数时的参数列表,称为“形参列表”(变量的名);
调用函数时的参数列表,称为“实参列表”(变量的值);
函数中,实际有效的值取决于实参的赋值,未被赋值的形参,将为Undefined;

④函数如果需要返回值,可用return返回结果。
调用函数时,使用var 变量名=函数名();的方式,接受返回结果。
如果函数没有返回值,则接受的结果为Undefined;

⑤函数中变量的作用域:
在函数中,使用var声明的变量,默认为函数局部变量,只在函数内容使用;
不用var声明的变量,默认为全局变量,(函数中的全局变量,必须在函数电泳后才能使用)
函数的形参列表,为函数局部变量,只在函数内部使用;

⑥函数声明与函数调用,没有先后之分。即,调用语句可在声明语句之前。

[匿名函数的声明及调用]【重点】

1、声明一个匿名函数,直接赋给某个事件
window.onload=function(){}

2、使用函数表达式声明匿名函数:
声明函数表达式:var func=function(){}
调用函数表达式:func();
>>>使用匿名函数表达式时,调用语句,必须在声明语句之后,否则报错(对比常规函数声明与调用区别)

3、使用自执行函数声明并直接调用匿名函数:
!function(参数1){}(参数1的值) //使用任意运算符开头,一般使用【!】
(function(){}()) //使用()将匿名函数及之后的括号包裹
(function(){})() //使用()只将匿名函数表达式包裹
特点:
①结构清晰,开头加!,结尾加()。不容易乱,推荐使用;
②可以表明匿名函数与之后的()为一个整体,推荐使用;
③无法表明匿名函数与之后的()为一个整体,不推荐使用;

 JS中代码的运行顺序

console.log(abc);
var abc=10;
function funcN(){}
funcN();

JS中代码运行,会先进行检查、装载,即变量声明、函数等操作;
然后再进行执行阶段(变量赋值等属于执行阶段)
函数的声明属于装载阶段,函数的调用属于执行阶段,所以,函数的调用语句写在函数声明语句之前,没有任何关系。
上述代码执行流程:
----检查装载----
var num;
function funcN()
----执行阶段----
console.log(abc);
abc=10;
funcN();

[函数内部属性]
【Arguments对象
1、作用:用于保存调用函数时的,所赋值的实参列表。
>>>当我们调用函数,并使用实参赋值时,实际上参数已经保存到arguments数组中,
即使没有形参,也可以使用arguments[n]的形式调用参数

2、arguments数组的个数,取决于实参列表,与形参无关;(顺序从0开始)
但,当第N个位置的形参、实参、arguments都存在时,形参与arguments是同步。
(即在函数中修改其中一个的值,另一个也会同步)

3、arguments.callee是arguments的重要属性,用于返回arguments所在函数的引用;
arguments.callee()可以调用自身函数执行;
在函数内部调用自身的写法,叫做递归,所以arguments.callee()是递归调用时常用的方式;

【this】
指向函数调用语句所在作用域,即谁调用函数,this指向谁;

 [BOM]

[screen对象]:
console.log(screen.width);//屏幕宽度
console.log(screen.height);//屏幕高度
console.log(screen.availWidth);//可用宽度
console.log(screen.availHeight);//可用高度=屏幕高度—底部任务栏


[location对象]:

完整的url路径
协议://主机名(IP地址):端口号/文件路径 ?传递参数(name1=value1 & name2=value)#锚点

console.log(location);
console.log(location.href);//完整路径
console.log(location.protocol);//路径协议 http: https: ftp: file: mailto:
console.log(location.pathname);//文件路径部分 /开始
console.log(location.port);//端口号
console.log(location.search);//从?开始往后的部分
console.log(location.hostname);//主机名(IP地址)
console.log(location.host);//主机名+端口号
console.log(location.hash);//#开始的锚点

function locationAssign(){
//加载新的文档。加载以后,可以回退。
location.assign("http://www.baidu.com");
}

function locationReplace(){
//使用新的文档,替换新的文档。替换以后,不能回退。
location.replace("http://www.baidu.com");
}

function locationReload(){
//重新加载当前页面
//reload(true):从服务器重新加载文档
//reload():在本地刷新当前页面
location.reload(true);
}


[history]:
1、history.length:浏览历史列表的个数;
2、history.forward();前进倒前一个页面
3、history.back();后退到后一个页面
4、history.go(0);跳转到历史网页列表的任意位置
位置标志:当前页面为0;前一个页面为1;后一个页面为-1;


[Navigator对象]

console.log(navigator.appName);//产品名称
console.log(navigator.appVersion);//产品版本号
console.log(navigator.userAgent);//用户代理信息
console.log(navigator.platform);//系统平台


navigator.plugins:返回一个数组,检测浏览器安装的所有插件
>>>主要属性:
description:插件的描述信息
filename:插件在本地磁盘的文件名
length:插件个数
name:插件名


navigator.mimeTypes:浏览器插件,所支持的文件类型
>>>主要属性:
description:MIME类型描述
enabledPlugin:支持此类型的浏览器插件
suffixes:此类型可能的后缀名
type:MIME类型的写法,例如:image/x-iocon text/css

window对象的常用方法【重点】
>>>window对象中的所有方法,均可以省略前面的window.,比如close();

1、prompt:弹窗接收用户输入;
2、alert:弹窗警告
3、confirm:带有确认/取消按钮的提示框;
4、close:关闭当前浏览器选项;
5、open:重新打开一个窗口,传入数据:URL/窗口名称/窗口特征
6、setTimeout:设置延时执行,只会执行一次
7、setInterval:设置定时器,循环每N毫秒执行一次
两个参数:需要执行的function/毫秒数(用逗号分隔)
8、clearTimeout:清除延时
9、clearInterval:清除定时器
传入参数:调用setInterval时返回一个ID,通过变量接收ID,传入clearInterval。

 































































































































































以上是关于JS函数与BOM的主要内容,如果未能解决你的问题,请参考以下文章

9BOM (浏览器对象模型)

js函数引用函数调用与回调函数

JS中构造函数与普通函数的区别及JS构造函数原型和实例的关系

【JS】function与箭头函数

js 回调函数理解与应用

JS函数与BOM