码迷,mamicode.com
首页 > Web开发 > 详细

JS函数强化

时间:2017-06-03 21:49:54      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:call   err   源代码   array   on()   实例   高阶函数   element   jquery   

函数在js中扮演了几个角色?

技术分享

  1. 构造函数

构造函数主要用来实例化对象

技术分享

  1. 普通函数

一般普通函数都是用来实现某一个特定的功能

技术分享

  1. 作为对象

函数可以作为一个普通对象使用

技术分享

总结:函数到底扮演什么角色取决于函数的调用方式

函数声明的方式:

  1. 内置函数(内置对象、库函数)ObjectArrayDataRegExpStringNumberBooleanErrorFunction
  2. 自定义函数
  1. 函数声明     (有预解析,可以先调用再声明)

技术分享

  1. 函数表达式    (没有预解析存在,必须先声明再调用)

技术分享

下面的代码只会在内存中产生一个函数  节省内存    结果为1的函数

技术分享

下面的代码不可以使用,不规范,不能形成隔离的空间,在不同的浏览器中的处理方式不一样,且占用空间,用表达式更节省内存

技术分享

  1. new Function()产生一个函数   (一般情况下用不到)

如果函数没有参数,那么Function的参数表示函数体

技术分享

如果函数有参数,那么Function最后一个参数表示函数体,之前的表示实际参数技术分享

技术分享

以上的new Function()产生函数的缺点:代码的可读性较低的,性能比较低,函数体是字符串,有一个字符串转成js代码的过程比较耗时

new Function()产生函数的优点:可以动态解析js字符串形式的代码---类似于eval()的用法

技术分享

技术分享

eval()有安全隐患,推荐用JSON.parse()

 

函数调用的方式:

  1. 构造函数实例化

技术分享

  1. 普通函数调用

技术分享

  1. 对象方法调用

技术分享

  1. callapply

技术分享

这种情况调用, 三者等效

技术分享

 技术分享参数处理上:call参数是单个的,apply参数是数组

call/apply的用法

  1. 调用函数
  2. 改变所调用函数内部this的指向

技术分享

bind方法的基本使用(ES5新特性),作用也是改变函数内部this的指向

技术分享

传参:

技术分享

应用:bind会返回一个新的函数

技术分享== 技术分享

  1. 借用其他对象的方法

技术分享

  1. 把类数组转成数组

什么是类数组?

类数组是一个对象:对象的键是整数形式的索引,与数组的键类似;必须有length属性,length属性的值与索引形式的键值对的个数相同

注意:类数组不是数组,并且不可以调用数组的方法

技术分享

可以添加数据,但是length的值不会自动改变

技术分享

技术分享

类数组转化

技术分享

类数组场景1document.getElementsByTagName

技术分享

技术分享

转化:

技术分享

添加并调用api

技术分享

类数组场景2jQuery

技术分享

类数组场景3arguments

技术分享

arguments本质是类数组,arguments.length表示实参的个数,

技术分享

鼠标事件:

技术分享

  1. 函数立即调用

技术分享

传参:

 window作为实参的用意:提高性能;方便代码压缩,节省带宽

undefined作为形参的用意:防止undefined的值被修改(早期的低版本浏览器中)

技术分享jQuery源代码最外层就是这样做的

关于this

this到底指向谁取决于函数调用的方式

this出现的场景:

  1. 普通函数中的this

在非严格模式下,this指的是window,在严格模式下,this指的是undefined

技术分享window

严格模式:对语法规则要求更加严格

  1. 构造函数中的this
  2. 原型方法中的this

构造函数中的this与原型方法中的this指向相同,都指向实例对象

技术分享lisi  lisi 

  1. 对象方法中的this

对象方法中的this就是方法的调用者

技术分享hello

  1. 定时函数中的this

定时函数中的this值就是window

技术分享window

  1. 事件函数中的this

事件函数中的this指的是绑定事件的对象

技术分享input

何时需要缓存this?

this的指向发生改变的时候

例子:

技术分享

高阶函数

  1. 函数作为参数

技术分享 hellojerry

技术分享lisi

  1. 函数作为返回值

技术分享123

技术分享111

关于sort 方法排序:

技术分享

 
 
 
 
 

JS函数强化

标签:call   err   源代码   array   on()   实例   高阶函数   element   jquery   

原文地址:http://www.cnblogs.com/lyqjy/p/6938472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!