总结js函数相关知识点


Posted in Javascript onFebruary 27, 2018

要知道,在js中,引用类型是一种数据结构,包含5种引用类型,分别是Object,data,Array,re请输入代码gExp,Function。今天我们就说Function这种数据结构。

在js种函数实际上是对象,每个函数都是Function类型的实例。和其他引用类型一样,都具有属性和方法。

1. 函数定义有几种方法

1)函数声明语法定义

function sum(num1,num2){
  return num1+num2;
 }

2)函数表达式

注意函数表达式后边有一个分号;

var sum=function(num1,num2){
   return num1+num2;
}

使用Function 构造函数

使用构造函数可以接收任意数量的参数,但最后一个参数始终被看成是函数体,而前面的参数则枚举出了参数

var sum=new Function("num1","num2","return num1+num2")

当然第三种方法不友好,也不推荐。

函数名仅仅是指向函数的指针,所以函数名与包含对象指针的其他变量没有什么不同。也就是说一个函数可能会有多个名字。
在这里函数声明和函数表达式有什么区别呢?

解析器在向执行环境中加载数据的时候,对函数声明和函数表达式是不一样的。解析器首先会读取函数声明,并且使得这段函数声明代码在任何代码之前都可调用。这就是我们平时所说的函数声明提升。函数表达式不一样,他必须等到函数解析器执行到他所在的代码块的时候,才会被真正的执行。比较下面2个例子

console.log(sum(10,10));

function sum(n1,n2){
  return n1+n2;
}

以上代码会正常执行

再看!

console.log(sum(10,10));

var sum=function(n1,n2){
  return n1+n2;
}

以上执行器就会报错!

2.函数没有重载

如果声明了2个同名函数,结果是后面的函数覆盖了前面的函数。

function sun(a){
 return a+100;
}
function sun(a){
 return a+200;
}

var result=sum(2)//202

3.函数的内部属性

包括this,arguments

具体不再叙述了

4.函数的属性和方法

函数有2个属性,length和prototype

length表示函数希望接收命名参数的个数。

function a(name){
 //todo
}
function b(name,age){
 //todo
}
function c(){
 //todo
}

a.length //1
b.length //2
c.length //0

prototype属性对于引用类型来说很重要,会有专门讲解,此处不再这赘述。

每个函数都包含2个非继承的方法 apply,call

这两个方法的用途都是在特定的作用域中调用函数,其实就是设置函数体内的this指代的值。

首先。apply()方法接收2个参数,一个是函数运行的作用域,另一个是参数数组,第二个参数可以是数组的实例,也可以是arguments.

function sum(num1,num2){
  return num1+num2;
}

function test1(a,b){
  return sum.apply(this,arguments);
}

function test2(c,d){
  return sum.apply(this.[c,d]);
}

console.log(test1(1,1)) //2

console.log(test2(1,1)) //2

call方法和apply方法没有多大的区别。区别就是call方法的第二个参数必须得传递的参数一个个列举出来。

使用call和apply来扩充作用域最大的好处就是对象不和任何方法耦合

Javascript 相关文章推荐
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 #jQuery
详解Vue Elememt-UI构建管理后台
Feb 27 #Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 #Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 #Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 #Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 #jQuery
关于ES6箭头函数中的this问题
Feb 27 #Javascript
You might like
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Django在Model保存前记录日志实例
2020/05/14 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
新学期红领巾广播稿
2014/10/04 职场文书
小班教师个人总结
2015/02/05 职场文书
2015年消防工作总结
2015/04/24 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
Fluentd搭建日志收集服务
2022/09/23 Servers