JS学习笔记Mark

这篇博客详细介绍了JavaScript的基础知识,包括变量的声明与使用,ES6新增的let和const,数据类型的区别,以及变量的作用域。特别强调了全局变量与局部变量的区别,以及在不同模式下给未声明变量赋值的影响。博客还涵盖了JavaScript的函数用法,如函数声明、参数、作用域和闭包,以及事件处理和错误处理的基本概念。此外,讨论了字符串、数组、正则表达式等核心概念及其相关方法。
摘要由CSDN通过智能技术生成

1.var x,y,z=1;


x,y 为 undefined, z 为 1
多个变量不能赋一个值,最后一个才有值,其余都是UNdefind


2.var carname;


未使用值来声明的变量,其值实际上是 undefined。


3.var carname="Volvo";


var carname;
重新声明 JavaScript 变量,该变量的值不会丢失:


4.ES6 (let  const)


2015 年以前,我们使用 var 关键字来声明 JavaScript 变量。ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变量。
==========全局变量==========

在函数外声明的变量作用域是全局的,全局变量在 JavaScript 程序的任何地方都可以访问。

var carName = "Volvo";
 
// 这里可以使用 carName 变量
 
function myFunction() {
    // 这里也可以使用 carName 变量
}
==========局部变量==========

在函数内声明的变量作用域是局部的(函数内),函数内使用 var 声明的变量只能在函数内容访问,如果不使用 var 则是全局变量。
// 这里不能使用 carName 变量
 
function myFunction() {
    var carName = "Volvo";
    // 这里可以使用 carName 变量
}
 
// 这里不能使用 carName 变量
==========JavaScript 块级作用域(Block Scope)==========

let 声明的变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问。

    let x = 2;
}
// 这里不能使用 x 变量
==========重新定义变量==========

在块中重新声明变量也会重新声明块外的变量:

实例
var x = 10;
// 这里输出 x 为 10

    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

let 关键字就可以解决这个问题,因为它只在 let 命令所在的代码块 {} 内有效。

实例
var x = 10;
// 这里输出 x 为 10

    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

==========循环作用域==========
使用 var 关键字,它声明的变量是全局的,包括循环体内外。

使用 let 关键字, 它声明的变量作用域只在循环体内,循环体外的变量不受影响。

在 JavaScript 中, 全局作用域是针对 JavaScript 环境。

在 HTML 中, 全局作用域是针对 window 对象。

使用 var 关键字声明的全局作用域变量属于 window 对象:
使用 let 关键字声明的全局作用域变量不属于 window 对象:

重置变量
使用 var 关键字声明的变量在任何地方都可以修改

实例
var x = 2;
 
// x 为 2
 
var x = 3;
 
// 现在 x 为 3
而let是做不到的,但存在一种情况
let 关键字在不同作用域,或不同块级作用域中是可以重新声明赋值的:

let x = 2;       // 合法

{
    let x = 3;   // 合法
}

{
    let x = 4;   // 合法
}

var 可以先使用后声明,let不可以:
<p id="demo"></p>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;

Const 关键字
const 用于声明一个或多个常量,不可修改或者充值常量

=============变量提升=============
JavaScript 中,var 关键字定义的变量可以在使用后声明,也就是变量可以先使用再声明(JavaScript 变量提升)。
let,const  不可以

<p id="demo"></p>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;

5.JavaScript 数据类型


值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。

引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)。

注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。

6.Undefined 和 Null


Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

7.JavaScript对象


两种读取方法:
var obj = { name: 'jone', age:18,word:''teacher'}
obj.name + " " + obj["[name]"]              // jone 18

对象方法: name = person.fullName();

如果你要访问 person 对象的 fullName 属性,它将作为一个定义函数的字符串返回:

实例
name = person.fullName;

如果你要访问 person 对象的 fullName 属性,它将作为一个定义函数的字符串返回:
function() { return this.firstName + " " + this.lastName; }

8.你可以使用以下语法访问对象方法:

实例
objectName.methodName()


9.JavaScript 函数


函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

JavaScript 函数语法
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
function functionname()
{
    // 执行代码
}


10.非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。


var var1 = 1; // 不可配置全局属性    不可删除
var2 = 2; // 没有使用 var 声明,可配置全局属性   可以删除delete

11.JavaScript 全局变量
变量在函数外定义,即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。 
JavaScript 局部作用域
变量在函数内声明,变量为局部变量,具有局部作用域。

局部变量:只能在函数内部访问。
JavaScript 变量生命周期
JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

函数参数
函数参数只在函数内起作用,是局部变量。
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。

以下实例中 carName 在函数内,但是为全局变量。

实例
// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

12.HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。

HTML 事件
HTML 事件可以是浏览器行为,也可以是用户行为。常见的HTML事件
下面是一些常见的HTML事件的列表:

事件    描述
onchange    HTML 元素改变
onclick    用户点击 HTML 元素
onmouseover    鼠标指针移动到指定的元素上时发生
onmouseout    用户从一个 HTML 元素上移开鼠标时发生
onkeydown    用户按下键盘按键
onload    浏览器已完成页面的加载

HTML DOM 事件
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。

事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮)。

提示: 在 W3C 2 级 DOM 事件中规范了事件模型。

HTML DOM 事件
DOM: 指明使用的 DOM 属性级别。

鼠标事件
属性    描述    DOM
onclick    当用户点击某个对象时调用的事件句柄。    2
oncontextmenu    在用户点击鼠标右键打开上下文菜单时触发     
ondblclick    当用户双击某个对象时调用的事件句柄。    2
onmousedown    鼠标按钮被按下。    2
onmouseenter    当鼠标指针移动到元素上时触发。    2
onmouseleave    当鼠标指针移出元素时触发    2
onmousemove    鼠标被移动。    2
onmouseover    鼠标移到某元素之上。    2
onmouseout    鼠标从某元素移开。    2
onmouseup    鼠标按键被松开。    2
键盘事件
属性    描述    DOM
onkeydown    某个键盘按键被按下。    2
onkeypress    某个键盘按键被按下并松开。    2
onkeyup    某个键盘按键被松开。    2
框架/对象(Frame/Object)事件
属性    描述    DOM
onabort    图像的加载被中断。 ( <object>)    2
onbeforeunload    该事件在即将离开页面(刷新或关闭)时触发    2
onerror    在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)     
onhashchange    该事件在当前 URL 的锚部分发生修改时触发。     
onload    一张页面或一幅图像完成加载。    2
onpageshow    该事件在用户访问页面时触发    
onpagehide    该事件在用户离开当前网页跳转到另外一个页面时触发    
onresize    窗口或框架被重新调整大小。    2
onscroll    当文档被滚动时发生的事件。    2
onunload    用户退出页面。 ( <body> 和 <frameset>)    2
表单事件
属性    描述    DOM
onblur    元素失去焦点时触发    2
onchange    该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)    2
onfocus    元素获取焦点时触发    2
onfocusin    元素即将获取焦点时触发    2
onfocusout    元素即将失去焦点时触发    2
oninput    元素获取用户输入时触发    3
onreset    表单重置时触发    2
onsearch    用户向搜索域输入文本时触发 ( <input="search">)     
onselect    用户选取文本时触发 ( <input> 和 <textarea>)    2
onsubmit    表单提交时触发    2
剪贴板事件
属性    描述    DOM
oncopy    该事件在用户拷贝元素内容时触发     
oncut    该事件在用户剪切元素内容时触发     
onpaste    该事件在用户粘贴元素内容时触发     
打印事件
属性    描述    DOM
onafterprint    该事件在页面已经开始打印,或者打印窗口已经关闭时触发     
onbeforeprint    该事件在页面即将开始打印时触发     
拖动事件
事件    描述    DOM
ondrag    该事件在元素正在拖动时触发     
ondragend    该事件在用户完成元素的拖动时触发     
ondragenter    该事件在拖动的元素进入放置目标时触发     
ondragleave    该事件在拖动元素离开放置目标时触发     
ondragover    该事件在拖动元素在放置目标上时触发     
ondragstart    该事件在用户开始拖动元素时触发     
ondrop    该事件在拖动元素放置在目标区域时触发     
多媒体(Media)事件
事件    描述    DOM
onabort    事件在视频/音频(audio/video)终止加载时触发。     
oncanplay    事件在用户可以开始播放视频/音频(audio/video)时触发。     
oncanplaythrough    事件在视频/音频(audio/video)可以正常播放且无需停顿和缓冲时触发。     
ondurationchange    事件在视频/音频(audio/video)的时长发生变化时触发。     
onemptied    当期播放列表为空时触发     
onended    事件在视频/音频(audio/video)播放结束时触发。     
onerror    事件在视频/音频(audio/video)数据加载期间发生错误时触发。     
onloadeddata    事件在浏览器加载视频/音频(audio/video)当前帧时触发触发。     
onloadedmetadata    事件在指定视频/音频(audio/video)的元数据加载后触发。     
onloadstart    事件在浏览器开始寻找指定视频/音频(audio/video)触发。     
onpause    事件在视频/音频(audio/video)暂停时触发。     
onplay    事件在视频/音频(audio/video)开始播放时触发。     
onplaying    事件在视频/音频(audio/video)暂停或者在缓冲后准备重新开始播放时触发。     
onprogress    事件在浏览器下载指定的视频/音频(audio/video)时触发。     
onratechange    事件在视频/音频(audio/video)的播放速度发送改变时触发。     
onseeked    事件在用户重新定位视频/音频(audio/video)的播放位置后触发。     
onseeking    事件在用户开始重新定位视频/音频(audio/video)时触发。     
onstalled    事件在浏览器获取媒体数据,但媒体数据不可用时触发。     
onsuspend    事件在浏览器读取媒体数据中止时触发。     
ontimeupdate    事件在当前的播放位置发送改变时触发。     
onvolumechange    事件在音量发生改变时触发。     
onwaiting    事件在视频由于要播放下一帧而需要缓冲时触发。     
动画事件
事件    描述    DOM
animationend    该事件在 CSS 动画结束播放时触发     
animationiteration    该事件在 CSS 动画重复播放时触发     
animationstart    该事件在 CSS 动画开始播放时触发     
过渡事件
事件    描述    DOM
transitionend    该事件在 CSS 完成过渡后触发。     
其他事件
事件    描述    DOM
onmessage    该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发     
onmousewheel    已废弃。 使用 onwheel 事件替代     
ononline    该事件在浏览器开始在线工作时触发。     
onoffline    该事件在浏览器开始离线工作时触发。     
onpopstate    该事件在窗口的浏览历史(history 对象)发生改变时触发。     
onshow    该事件当 <menu> 元素在上下文菜单显示时触发     
onstorage    该事件在 Web Storage(HTML 5 Web 存储)更新时触发     
ontoggle    该事件在用户打开或关闭 <details> 元素时触发     
onwheel    该事件在鼠标滚轮在元素上下滚动时触发     
事件对象
常量
静态变量    描述    DOM
CAPTURING-PHASE    当前事件阶段为捕获阶段(1)    1
AT-TARGET    当前事件是目标阶段,在评估目标事件(1)    2
BUBBLING-PHASE    当前的事件为冒泡阶段 (3)    3
属性
属性    描述    DOM
bubbles    返回布尔值,指示事件是否是起泡事件类型。    2
cancelable    返回布尔值,指示事件是否可拥可取消的默认动作。    2
currentTarget    返回其事件监听器触发该事件的元素。    2
eventPhase    返回事件传播的当前阶段。    2
target    返回触发此事件的元素(事件的目标节点)。    2
timeStamp    返回事件生成的日期和时间。    2
type    返回当前 Event 对象表示的事件的名称。    2
方法
方法    描述    DOM
initEvent()    初始化新创建的 Event 对象的属性。    2
preventDefault()    通知浏览器不要执行与事件关联的默认动作。    2
stopPropagation()    不再派发事件。    2
目标事件对象
方法
方法    描述    DOM
addEventListener()    允许在目标事件中注册监听事件(IE8 = attachEvent())    2
dispatchEvent()    允许发送事件到监听器上 (IE8 = fireEvent())    2
removeEventListener()    运行一次注册在事件目标上的监听事件(IE8 = detachEvent())    2
事件监听对象
方法
方法    描述    DOM
handleEvent()    把任意对象注册为事件处理程序    2
文档事件对象
方法
方法    描述    DOM
createEvent()         2
鼠标/键盘事件对象
属性
属性    描述    DOM
altKey    返回当事件被触发时,"ALT" 是否被按下。    2
button    返回当事件被触发时,哪个鼠标按钮被点击。    2
clientX    返回当事件被触发时,鼠标指针的水平坐标。    2
clientY    返回当事件被触发时,鼠标指针的垂直坐标。    2
ctrlKey    返回当事件被触发时,"CTRL" 键是否被按下。    2
Location    返回按键在设备上的位置    3
charCode    返回onkeypress事件触发键值的字母代码。    2
key    在按下按键时返回按键的标识符。    3
keyCode    返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。    2
which    返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。    2
metaKey    返回当事件被触发时,"meta" 键是否被按下。    2
relatedTarget    返回与事件的目标节点相关的节点。    2
screenX    返回当某个事件被触发时,鼠标指针的水平坐标。    2
screenY    返回当某个事件被触发时,鼠标指针的垂直坐标。    2
shiftKey    返回当事件被触发时,"SHIFT" 键是否被按下。    2
方法
方法    描述    W3C
initMouseEvent()    初始化鼠标事件对象的值    2
initKeyboardEvent()    初始化键盘事件对象的值

13.JavaScript 字符串
JavaScript 字符串用于存储和处理文本。
你可以使用索引位置来访问字符串中的每个字符:

实例
var character = carname[7];

字符串长度
可以使用内置属性 length 来计算字符串的长度:

实例
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
特殊字符
在 JavaScript 中,字符串写在单引号或双引号中。

因为这样,以下实例 JavaScript 无法解析:

 "We are the so-called "Vikings" from the north."
字符串 "We are the so-called " 被截断。

如何解决以上的问题呢?可以使用反斜杠 (\) 来转义 "Vikings" 字符串中的双引号,如下:

 "We are the so-called \"Vikings\" from the north."
 反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符:

转义字符 (\) 可以用于转义撇号,换行,引号,等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符:

代码    输出
\'    单引号
\"    双引号
\\    反斜杠
\n    换行
\r    回车
\t    tab(制表符)
\b    退格符
\f    换页

字符串可以是对象
通常, JavaScript 字符串是原始值,可以使用字符创建: var firstName = "John"

但我们也可以使用 new 关键字将字符串定义为一个对象: var firstName = new String("John")
不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用字符串属性
属性    描述
constructor    返回创建字符串属性的函数
length    返回字符串的长度
prototype    允许您向对象添加属性和方法

字符串方法
更多方法实例可以参见:JavaScript String 对象。

方法    描述
charAt()    返回指定索引位置的字符
charCodeAt()    返回指定索引位置字符的 Unicode 值
concat()    连接两个或多个字符串,返回连接后的字符串
fromCharCode()    将 Unicode 转换为字符串
indexOf()    返回字符串中检索指定字符第一次出现的位置
lastIndexOf()    返回字符串中检索指定字符最后一次出现的位置
localeCompare()    用本地特定的顺序来比较两个字符串
match()    找到一个或多个正则表达式的匹配
replace()    替换与正则表达式匹配的子串
search()    检索与正则表达式相匹配的值
slice()    提取字符串的片断,并在新的字符串中返回被提取的部分
split()    把字符串分割为子字符串数组
substr()    从起始索引号提取字符串中指定数目的字符
substring()    提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()    根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase()    根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase()    把字符串转换为小写
toString()    返回字符串对象值
toUpperCase()    把字符串转换为大写
trim()    移除字符串首尾空白
valueOf()    返回某个字符串对象的原始值

14.JavaScript 运算符


运算符 = 用于赋值。
运算符 + 用于加值。

JavaScript 算术运算符
y=5,下面的表格解释了这些算术运算符:
运算符    描述    例子    x 运算结果    y 运算结果    在线实例
+    加法    x=y+2    7    5    实例 »
-    减法    x=y-2    3    5    实例 »
*    乘法    x=y*2    10    5    实例 »
/    除法    x=y/2    2.5    5    实例 »
%    取模(余数)    x=y%2    1    5    实例 »
++    自增    x=++y    6    6    实例 »
x=y++    5    6    实例 »
--    自减    x=--y    4    4    实例 »
x=y--    5    4    实例 »

15.JavaScript 比较 和 逻辑运算符


逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3,下表解释了逻辑运算符:

运算符    描述    例子
&&    and    (x < 10 && y > 1) 为 true
||    or    (x==5 || y==5) 为 false
!    not    !(x==y) 为 true

条件运算符
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法
variablename=(condition)?value1:value2 
例子
实例
如果变量 age 中的值小于 18,则向变量 voteable 赋值 "年龄太小",否则赋值 "年龄已达到"。

voteable=(age<18)?"年龄太小":"年龄已达到";

JavaScript if...Else 语句
条件语句用于基于不同的条件来执行不同的动作。

条件语句
通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中,我们可使用以下条件语句:

if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
if 语句
只有当指定条件为 true 时,该语句才会执行代码’

不同类型的循环
JavaScript 支持不同类型的循环:

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

16.JavaScript typeof, null, 和 undefined


数组【1,2,3,4】 返回object
null        //object

请注意:

NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

constructor 属性
constructor 属性返回所有 JavaScript 变量的构造函数。

17. JavaScript for 循环

如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。

用for循环

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法:

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 (代码块)开始前执行

语句 2 定义运行循环(代码块)的条件

语句 3 在循环(代码块)已被执行之后执行

for (var i=0; i<5; i++) { x=x + "该数字为 " + i + "<br>"; }

 

不同类型的循环

JavaScript 支持不同类型的循环:

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块

18.类型转换 

  • NaN 的数据类型是 number
  • 数组(Array)的数据类型是 object
  • 日期(Date)的数据类型为 object
  • null 的数据类型是 object
  • 未定义变量的数据类型为 undefined

constructor 属性

constructor 属性返回所有 JavaScript 变量的构造函数。

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array")

你可以使用 constructor 属性来查看对象是否为日期 (包含字符串 "Date")

 19.方法 toString() 将数字转换为字符串

将布尔值转换为字符串

全局方法 String() 可以将布尔值转换为字符串。

 

将日期转换为字符串

Date() 返回字符串。

Date()      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

全局方法 String() 可以将日期对象转换为字符串。

String(new Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Date 方法 toString() 也有相同的效果。

实例

obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

20.JavaScript 正则表达式  

语法: /正则表达式主体/修饰符(可选)

使用字符串方法:

在 JavaScript 中,正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。

replace() 方法用于在字符串中用一些字符串替换另一些字符串,或替换一个与正则表达式匹配的子串。

 

21.JavaScript 错误 - throw、try 和 catch


try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。

22.函数 

函数存储在变量中,不需要函数名称,通常通过变量名来调用。 

Function() 构造函数  关键字new

23.函数提升(Hoisting)

使用表达式定义函数时无法提升。

 

24.自调用函数

函数表达式可以 "自调用"。

自调用表达式会自动调用。

如果表达式后面紧跟 () ,则会自动调用。

不能自调用声明的函数。

函数可作为一个值使用

JavaScript 函数作为一个值使用:

实例

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3)

JavaScript 函数可作为表达式使用:

实例

function myFunction(a, b) {
    return a * b;
}

var x = myFunction(4, 3) * 2;

 

25.函数是对象

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。

但是JavaScript 函数描述为一个对象更加准确。

JavaScript 函数有 属性 和 方法

arguments.length 属性返回函数调用过程接收到的参数个数:

function myFunction(a, b) {
    return arguments.length;
}

toString() 方法将函数作为一个字符串返回:

function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();

 26.箭头函数

ES6 新增了箭头函数。

箭头函数表达式的语法比普通函数表达式更简洁

() => {函数声明}

// ES5 var x = function(x, y) { return x * y; }

// ES6 const x = (x, y) => x * y; 

 

有的箭头函数都没有自己的 this。 不适合定义一个 对象的方法

当我们使用箭头函数的时候,箭头函数会默认帮我们绑定外层 this 的值,所以在箭头函数中 this 的值和外层的 this 是一样的。

箭头函数是不能提升的,所以需要在使用之前定义。

使用 const 比使用 var 更安全,因为函数表达式始终是一个常量。

如果函数部分只是一个语句,则可以省略 return 关键字和大括号 {},这样做是一个比较好的习惯:

const x = (x, y) => { return x * y };

JavaScript 函数参数

显式参数(Parameters)与隐式参数(Arguments)

默认参数

ES5 中如果函数在调用时未提供隐式参数,参数会默认设置为: undefined

rguments 对象

JavaScript 函数有个内置的对象 arguments 对象。

argument 对象包含了函数调用的参数数组。

通过这种方式你可以很方便的找到最大的一个参数的值:

实例

x = findMax(1, 123, 500, 115, 44, 88); function findMax() { var i, max = arguments[0]; if(arguments.length < 2) return max; for (i = 0; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; } } return max; }


尝试一下 »

或者创建一个函数用来统计所有数值的和:

实例

x = sumAll(1, 123, 500, 115, 44, 88); function sumAll() { var i, sum = 0; for (i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; }

通过值传递参数

在函数中调用的参数是函数的隐式参数。

JavaScript 隐式参数通过值来传递:函数仅仅只是获取值。

如果函数修改参数的值,不会修改显式参数的初始值(在函数外定义)。

隐式参数的改变在函数外是不可见的。


通过对象传递参数

在JavaScript中,可以引用对象的值。

因此我们在函数内部修改对象的属性就会修改其初始的值。

修改对象属性可作用于函数外部(全局变量)。

修改对象属性在函数外是可见的。

27. JavaScript 函数调用


JavaScript 函数有 4 种调用方式。

this 关键字
一般而言,在Javascript中,this指向函数执行时的当前对象。

Note	注意 this 是保留关键字,你不能修改 this 的值。
调用 JavaScript 函数
在之前的章节中我们已经学会了如何创建函数。

函数中的代码在函数被调用后执行。

作为一个函数调用
实例
function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20

全局对象

当函数没有被自身的对象调用时 this 的值就会变成全局对象。

在 web 浏览器中全局对象是浏览器窗口(window 对象)。

该实例返回 this 的值是 window 对象:

实例

function myFunction() { return this; } myFunction(); // 返回 window 对象

 

函数作为方法调用

在 JavaScript 中你可以将函数定义为对象的方法。

以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):

实例

var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this.firstName + " " + this.lastName; } } myObject.fullName(); // 返回 "John Doe"

使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数。

这看起来就像创建了新的函数,但实际上 JavaScript 函数是重新创建的对象:

实例

// 构造函数: function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } // This creates a new object var x = new myFunction("John","Doe"); x.firstName; // 返回 "John"

 

作为函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

实例

function myFunction(a, b) { return a * b; } myObject = myFunction.call(myObject, 10, 2); // 返回 20

 

28.JavaScript 闭包


JavaScript 变量可以是局部变量或全局变量。

私有变量可以用到闭包。

 

JavaScript 闭包

还记得函数自我调用吗?该函数会做什么?

实例

var add = (function () { var counter = 0; return function () {return counter += 1;} })(); add(); add(); add(); // 计数器为 3

变量 add 指定了函数自我调用的返回字值。

自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。

add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

计数器受匿名函数的作用域保护,只能通过 add 方法修改。

闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。

直观的说就是形成一个不销毁的栈环境。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值