总结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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
事件绑定之小测试  onclick && addEventListener
Jul 31 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
一分钟理解js闭包
May 04 Javascript
jquery.validate使用详解
Jun 02 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 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
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
WordPress中"无法将上传的文件移动至"错误的解决方法
2015/07/01 PHP
PHP引用返回用法示例
2016/05/28 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
javascript读取xml
2006/11/04 Javascript
键盘控制事件应用教程大全
2006/11/24 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
js实现烟花特效
2020/03/02 Javascript
浅谈python中的正则表达式(re模块)
2017/10/17 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
UGG英国官方网站:UGG UK
2018/02/08 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
求职信的正确写法
2014/07/10 职场文书
青岛海底世界导游词
2015/02/11 职场文书
开学第一周总结
2015/07/16 职场文书
旅游安全责任协议书
2016/03/22 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS