JS函数进阶

函数的定义方式

  • 函数声明
  • 函数表达式
  • new Function

函数声明

 function foo () { }

函数表达式

 var foo = function () { ? }

函数声明与函数表达式的区别

  • 函数声明必须有名字
  • 函数声明会函数提升，在预解析阶段就已创建，声明前后都可以调用
  • 函数表达式类似于变量赋值
  • 函数表达式可以没有名字，例如匿名函数
  • 函数表达式没有变量提升，在执行阶段创建，必须在表达式执行之后才可以调用

下面是一个根据条件定义函数的例子：

 if (true) {   function f () {     console.log(1)   } } else {   function f () {     console.log(2)   } }

以上代码执行结果在不同浏览器中结果不一致。

不过我们可以使用函数表达式解决上面的问题：

 var f ? if (true) {   f = function () {     console.log(1)   } } else {   f = function () {     console.log(2)   } }

函数的调用方式

  • 普通函数
  • 构造函数
  • 对象方法

函数内 this 指向的不同场景

函数的调用方式决定了 this 指向的不同：

这就是对函数内部 this 指向的基本整理，写代码写多了自然而然就熟悉了。

函数也是对象

  • 所有函数都是 Function 的实例

call、apply、bind

那了解了函数 this 指向的不同场景之后，我们知道有些情况下我们为了使用某种特定环境的 this 引用， 这时候时候我们就需要采用一些特殊手段来处理了，例如我们经常在定时器外部备份 this 引用，然后在定时器函数内部使用外部 this 的引用。 然而实际上对于这种做法我们的 JavaScript 为我们专门提供了一些函数方法用来帮我们更优雅的处理函数内部 this 指向问题。 这就是接下来我们要学习的 call、apply、bind 三个函数方法。

call

call() 方法调用一个函数, 其具有一个指定的 this 值和分别地提供的参数(参数的列表)。

?

注意：该方法的作用和 `apply()` 方法类似，只有一个区别，就是 `call()` 方法接受的是若干个参数的列表，而 `apply()` 方法接受的是一个包含多个参数的数组。

?

语法：

 fun.call(thisArg[, arg1[, arg2[, ...]]])

参数：

  • thisArg

    • 在 fun 函数运行时指定的 this 值
    • 如果指定了 null 或者 undefined 则内部 this 指向 window
  • arg1, arg2, ...
    • 指定的参数列表

apply

apply() 方法调用一个函数, 其具有一个指定的 this 值，以及作为一个数组（或类似数组的对象）提供的参数。

?

注意：该方法的作用和 `call()` 方法类似，只有一个区别，就是 `call()` 方法接受的是若干个参数的列表，而 `apply()` 方法接受的是一个包含多个参数的数组。

?

语法：

 fun.apply(thisArg, [argsArray])

参数：

  • thisArg
  • argsArray

apply() 与 call() 非常相似，不同之处在于提供参数的方式。 apply() 使用参数数组而不是一组参数列表。例如：

 fun.apply(this, [‘eat‘, ‘bananas‘])

bind

bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript 5 规范中内置的call属性）。 当目标函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。绑定函数被调用时，bind() 也接受预设的参数提供给原函数。 一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

语法：

 fun.bind(thisArg[, arg1[, arg2[, ...]]])

参数：

  • thisArg

    • 当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时，该参数无效。
  • arg1, arg2, ...
    • 当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。

返回值：

返回由指定的this值和初始化参数改造的原函数拷贝。

示例1：

 this.x = 9;  var module = {   x: 81,   getX: function() { return this.x; } }; ? module.getX(); // 返回 81 ? var retrieveX = module.getX; retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域 ? // 创建一个新函数，将"this"绑定到module对象 // 新手可能会被全局的x变量和module里的属性x所迷惑 var boundGetX = retrieveX.bind(module); boundGetX(); // 返回 81

示例2：

 function LateBloomer() {   this.petalCount = Math.ceil(Math.random() * 12) + 1; } ? // Declare bloom after a delay of 1 second LateBloomer.prototype.bloom = function() {   window.setTimeout(this.declare.bind(this), 1000); }; ? LateBloomer.prototype.declare = function() {   console.log(‘I am a beautiful flower with ‘ +     this.petalCount + ‘ petals!‘); }; ? var flower = new LateBloomer(); flower.bloom();  // 一秒钟后, 调用‘declare‘方法

小结

  • call 和 apply 特性一样

    • 都是用来调用函数，而且是立即调用
    • 但是可以在调用函数的同时，通过第一个参数指定函数内部 this 的指向
    • call 调用的时候，参数必须以参数列表的形式进行传递，也就是以逗号分隔的方式依次传递即可
    • apply 调用的时候，参数必须是一个数组，然后在执行的时候，会将数组内部的元素一个一个拿出来，与形参一一对应进行传递
    • 如果第一个参数指定了 null 或者 undefined 则内部 this 指向 window
  • bind
    • 可以用来指定内部 this 的指向，然后生成一个改变了 this 指向的新的函数
    • 它和 call、apply 最大的区别是：bind 不会调用
    • bind 支持传递参数，它的传参方式比较特殊，一共有两个位置可以传递
        1. 在 bind 的同时，以参数列表的形式进行传递
        1. 在调用的时候，以参数列表的形式进行传递
      • 那到底以谁 bind 的时候传递的参数为准呢还是以调用的时候传递的参数为准
      • 两者合并：bind 的时候传递的参数和调用的时候传递的参数会合并到一起，传递到函数内部

函数的其它成员

  • arguments

    • 实参集合
  • caller
    • 函数的调用者
  • length
    • 形参的个数
  • name
    • 函数的名称
 function fn(x, y, z) {   console.log(fn.length) // => 形参的个数   console.log(arguments) // 伪数组实参参数集合   console.log(arguments.callee === fn) // 函数本身   console.log(fn.caller) // 函数的调用者   console.log(fn.name) // => 函数的名字 } ? function f() {   fn(10, 20, 30) } ? f()

高阶函数

  • 函数可以作为参数
  • 函数可以作为返回值

作为参数

 function eat (callback) {   setTimeout(function () {     console.log(‘吃完了‘)     callback()   }, 1000) } ? eat(function () {   console.log(‘去唱歌‘) })

作为返回值

 function genFun (type) {   return function (obj) {     return Object.prototype.toString.call(obj) === type   } } ? var isArray = genFun(‘[object Array]‘) var isObject = genFun(‘[object Object]‘) ? console.log(isArray([])) // => true console.log(isArray({})) // => true

函数闭包

 function fn () {   var count = 0   return {     getCount: function () {       console.log(count)     },     setCount: function () {       count++     }   } } ? var fns = fn() ? fns.getCount() // => 0 fns.setCount() fns.getCount() // => 1

作用域、作用域链、预解析

  • 全局作用域
  • 函数作用域
  • 没有块级作用域
 {   var foo = ‘bar‘ } ? console.log(foo) ? if (true) {   var a = 123 } console.log(a)

作用域链示例代码：

 var a = 10 ? function fn () {   var b = 20 ?   function fn1 () {     var c = 30     console.log(a + b + c)   } ?   function fn2 () {     var d = 40     console.log(c + d)   } ?   fn1()   fn2() }
  • 内层作用域可以访问外层作用域，反之不行

什么是闭包

闭包就是能够读取其他函数内部变量的函数， 由于在 Javascript 语言中，只有函数内部的子函数才能读取局部变量， 因此可以把闭包简单理解成 “定义在一个函数内部的函数”。 所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的用途：

  • 可以在函数外部读取函数内部成员
  • 让函数内成员始终存活在内存中

一些关于闭包的例子

示例1：

 var arr = [10, 20, 30] for(var i = 0; i < arr.length; i++) {   arr[i] = function () {     console.log(i)   } }

示例2：

 console.log(111) ? for(var i = 0; i < 3; i++) {   setTimeout(function () {     console.log(i)   }, 0) } console.log(222)

示例3：投票

示例4：判断类型

示例5：沙箱模式

闭包的思考题

思考题 1：

 var name = "The Window"; var object = {   name: "My Object",   getNameFunc: function () {     return function () {       return this.name;     };   } }; ? console.log(object.getNameFunc()())

思考题 2：

 var name = "The Window";　　 var object = {　　　　   name: "My Object",   getNameFunc: function () {     var that = this;     return function () {       return that.name;     };   } }; console.log(object.getNameFunc()())

小结

函数递归

递归执行模型

 function fn1 () {   console.log(111)   fn2()   console.log(‘fn1‘) } ? function fn2 () {   console.log(222)   fn3()   console.log(‘fn2‘) } ? function fn3 () {   console.log(333)   fn4()   console.log(‘fn3‘) } ? function fn4 () {   console.log(444)   console.log(‘fn4‘) } ? fn1()

举个栗子：计算阶乘的递归函数

 function factorial (num) {   if (num <= 1) {     return 1   } else {     return num * factorial(num - 1)   } }

递归应用场景

  • 深拷贝
  • 菜单树
  • 遍历 DOM 树

原文地址：https://www.cnblogs.com/superjishere/p/11731537.html

时间： 2024-10-16 16:04:22

JS函数进阶的相关文章

JS函数大全 莫名其妙找到的

1 .document.write(""); 输出语句 2 .JS中的注释为// 3 .传统的HTML文档顺序是:document->html->(head,body) 4 .一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5 .得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6 .

JSF页面中使用js函数回调后台bean方法并获取返回值的方法

由于primefaces在国内使用的并不是太多,因此,国内对jsf做系统.详细的介绍的资料很少,即使有一些资料,也仅仅是对国外资料的简单翻译或者是仅仅讲表面现象(皮毛而已),它们的语句甚至还是错误的,很可能会误导使用者. 相对来说,看国内的那些仅仅是翻译过来的文章或书籍不如直接看国外的官方文档或资料来的实在,在我讲述jsf页面中如何使用js调用后台bean方法之前,先给大家说几个国外的资料.在primefaces官方网站上,你可以搜索到几乎所有你需要的东西,primefaces官网为:http:

webBrowser调用外部js文件和js函数（转载）

原文链接:http://fy5388.blog.163.com/blog/static/56499537201012594314130/ webBrowser调用外部js文件和js函数 '第一种方法:webbrowser动态调用html和js代码,都是动态的:代码示例: webBrowser1.Navigate("about:blank");webBrowser1.Document.OpenNew(True);webBrowser1.Document.Write("<H

JavaScript入门：006—JS函数的定义

JS函数的声明.声明函数的格式如下: function 函数名(参数列表){ //函数语句: return 返回值; } 来看具体的函数声明.1.普通函数 <script type="text/javascript"> function ShowHint() { alert("普通函数"); } </script> 2.带参数的函数 <script type="text/javascript"> functio

一个奇怪的JS函数

今天在分析一个jQuery插件源码的时候,发现了一个奇怪的函数. // add leading zeros var pad = function(x){return (1e15+""+x).slice(-2)}; 首先1e15是什么意思? 也不是十六进制表示法. 不管三七21,直接F12打开命令窗口,执行下看看,结果是1后面有15个0. 原来1e15是科学计数法,表示1乘以10的15次方. var y=123e5; // 12300000 var z=123e-5; // 0.0012

Button的Click事件与js函数的两种不同顺序触发方式

先执行js,或者先执行Click事件,最近就遇到了这个问题,开始弄了两个按钮分别执行,那才叫一个蛋疼... 1.先执行js,再执行Button的Click函数 <asp:Button ID="btn_delete" runat="server" Text="提交" onclick="button1_Click"/> 前台js为 <script language="javascript"&g

点击按钮（或超链接）如何跳转到另外一个页面并执行目标页面的js函数

页面跳转同时执行js代码$(function(){});url参数传递 标题的前半部分其实不必赘述,按钮也可以换成超链接.. 假设是需要在A页面上的一个按钮,点击后跳转到B页面,传一些参数后且并B页面的某个js函数可以执行~~ 关键在于如何跳转到目标页面之后并「接着」执行「目标页面的js函数」.原因是目标页面的某个js函数原来是需要点击该页面的按钮或超链接才能触发的,但现在需要在跳转到B页面后立即执行! 先不想是从A页面跳转到B页面,假设你想在B页面一打开就执行的话,是需要把代码逻辑写在$(fu

C#调用htmlfile组件，并执行js函数

前一篇我测试了vba调用htmlfile做反混淆,并执行js函数的代码.本文换成C#实现. 本文地址:http://www.cnblogs.com/Charltsing/p/CSharpEval.html 联系QQ:564955427 C#调用com组件需要使用CreateInstance,当然,我们也可以通过反编译vb.net里面的CreatObject来修改成C#代码.我从网上下载了一个 [SecurityPermission(SecurityAction.Demand, Unmanaged

ASP.NET后台调用前台JS函数的三种常见方法

第一种:使用普通的添加控件中的Attributes属性进行调用 例如,像一般的普通的按钮:Button1.Attributes.Add("onclick","MyFun();"); 此方法只能在Onload中或者类似于onload的初始化过程中添加才有效.并且是先执行脚本函数,同时无法改变执行顺序. 第二种:使用Response.Write方法进行调用 例如,像我们经常会使用到的Response.Write("<scripttype='text/ja