深入理解JavaScript函数

原创 Fly丶 随笔 js 34阅读 13 天前 举报

JavaScript中的函数

1. 函数的定义

  • 两种定义形式: 
    • 通过函数定义表达式来定义 
    • 通过函数声明语句来定义

函数声明语句定义一个函数

函数定义表达式定义一个函数

tips:以表达式方式定义的函数(特别适合用来定义那些只会用到一次的函数),函数名是可选的,
也就可以直接写成这样

2.函数命名

  • 函数的名称通常是动词或者以动词为前缀的词组 如:funciton saveMessage(){}
  • 函数名的第一个字符通常为小写
  • 当我们命名的函数名比较长时,一种是驼峰式命名 如:function readSystemFile(){}
    另一种是以下划线分割单词,如:function make_products_iPhones(){}
  • 有一些函数是用作内部函数或者私有函数的,通常以一条下划线为前缀。 如: _login()

3.函数的调用

  • 普通的函数调用

example:

  • 对象方法的调用

概念:如果函数表达式是一个属性访问表达式(即该函数是一个对象的属性或者数组的一个函数),
那么该调用表达式就是一个方法调用表用表达式。
example:

tips:
1.函数返回的值倘若是因为解释器到达结尾,返回值就是undefined;倘若函数返回是因为解释器执行到一条return语句,
则返回return语句后面的值;如果return语句后面没有值则返回undefined。
2.在ECMAScript3和在非严格模式下的ECMAScript5的函数调用规定中,this的值(调用上下文)的值是全局对象,但是在
严格模式下this的值却是undefined,因此可也用this来判断当前环境是否为严格模式,此外ECMAScript2015 (简称es6)严格模式请参考以下地址。
ECMAScipt的第六个版本  https://developer.mozilla.org/zh-CN/
3.方法调用和普通的函数调用的一个重要区别就是:调用上下文(即this的值),通常this关键字指向成为调用上下文的对象,
属性访问表达式:对象名.方法名(通常使用.运算符访问属性)或者"[]"进行属性访问操作。(this关键字的相关内容是十分重要的)

  • 构造函数的调用 

构造函数就是用来初始化先创建的对象,通常使用关键字new来调用构造函数,当使用new关键字来调用构造函数的时候就会自动
创建一个新的的空对象,而构造函数只需要初始化这个新对象的状态(属性和方法),调用构造函数的话,新的对象的原型(prototype)等于
构造函数的原型(prototype)属性,由此引出一个特性:通过同一个构造函数创建的所有对象都继承同一个相同的对象。

凡是没有形参的构造函数都可以省略圆括号,以下两行代码是等价的。

tips:
1.构造函数通常不使用return关键字,进行初始化新对象,执行完函数体,就调用构造函数表达式的计算结果作为新对象的值,显示返回。
2.倘若构造函数使用return语句返回一个对象,那么调用表达式的值就是这个对象,而不是this指向的对象。
3.构造函数里没有显式调用return时,默认是返回this对象,也就是新创建的实例对象。
4.return的是五种简单数据类型:String,Number,Boolean,Null,Undefined。这种情况下,忽视return值,依然返回this对象

  • 间接调用
    JavaScript中的函数也是对象,所以函数对象也可以包含方法。函数的间接调用用到的call()和apply()方法。
    这两个方法都能显示指定调用所需的this的值,这就引出一个特性:任何函数都可以作为对象的方法来调用,
    哪怕这个函数不是那个对象的方法。(这也就是在实际开发中我们也会常用这两个方法的原因之一) 

1.call()方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表) this的值并不一定就是该函数执行真正的this值,在非严格模式下,倘若this的值指向nullundefined的话
会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。
2.apply()方法调用一个具有给定this值的函数,以及作为一个数组(或类似数组对象)提供的参数。
为this指定一个对象,使用apply时只需要写一次这个方法然后再另一个对象中继承它,继而不用在这个新的对象重新来写它。

tips:call()方法的作用和 apply() 方法类似,区别就是call()方法接受的是参数列表,而apply()方法接受的是一个参数数组。

4.函数中的形参与实参

  • 可选的形参
  • 可变长的实参列表:实参对象 arguments 它是一个类数组对象,通过数字下表就能够访问传入函数的实参值,它包含length属性,让函数可以操作任意数量的实参。 
  • callee和caller属性
    callee属性指代当前正在执行的函数,caller指代调用当前正在执行的函数的函数,它可以访问栈。而callee可以来递归调用自身。

5.函数的闭包(!important)

  • 概念:通俗地讲函数的闭包就是在一个函数内部定义另一个函数,而这个内部的函数(子函数)可以调用包裹它的函数(父函数等、"爷爷、太爷爷...")的变量。
    也可以认为闭包就是能够读取其他函数内部变量的函数。
  • 变量作用域:
    全局变量:任何函数内部都可以访问全局作用域
    局部变量:在函数外部无法读取变量 

tips
javascript是没有像Java、C++那样用一对“{}”括起来的块级作用域,但是在es6中可以使用let关键字实现块级作用域。

  • 词法作用域:变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,通过静态分析就能确定,因此词法作用域也叫做静态作用域。
    with和eval除外,所以只能说JS的作用域机制非常接近词法作用域(Lexical scope)。
  • 闭包的用途
    i. 读取函数内部的变量、函数嵌套函数
    ii. 让这些变量的值始终保持在内存中(全局变量的值不会在被函数调用过后自动清除,由GC回收)
    iii. 避免全局变量的污染、让私有成员存在 
  • 闭包的注意事项
    i. 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露
    解决方法是,在退出函数之前,将不使用的局部变量全部删除。
    ii. 闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),
    把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
    以下例子来检验自己是否已经掌握了闭包的运行机制。
    example 0ne:

example Two:

6.函数的属性、方法以及构造函数

  • length属性
    argument.length属性表示传入函数的实参的个数,而函数本身的length属性则有不同含义,它表示函数定义时的实际形参个数。
  • prototype(原型)属性
    这个属性指向对象的引用,而这个对象就被称为原型对象(prototype object),每个函数都包含这个属性,都包含不同的原型对象;
    在JavaScript中每个函数都有一个特殊的属性叫作原型(prototype)
  • call()、apply()和bind()方法 在前面的函数的间接调用中已经介绍了call()以及apply(),在这里就不再叙说,就详细介绍ECMAScript5新增的bind()方法 

bind()方法中的bind翻译过来就是捆绑、绑定之意,作用就是将函数绑定至某个对象中,倘若一个函数调用了bind()方法并传入一个对象作为参数,那么这个方法将返回新的函数。

bind()方法除了除了第一个实参之外,传入bind()的实参也会绑定至this.这种应用是一种常见的函数式编程技术,被称为柯里化(currying)

  • toString()方法
    该方法返回字符串
  • Function()构造函数
  • 高阶函数
    • 记忆(mem

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复