总结js函数相关知识点

要知道,在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来扩充作用域最大的好处就是对象不和任何方法耦合

(0)

相关推荐

  • JS函数节流和函数防抖问题分析

    问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办? **问题2:**如果给一个按钮绑定了表单提交的post事件,但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交,如何防止多次提交的发生? 为了应对如上场景,便出现了 函数防抖 和 函数节流 两个概念,总的来说: 这两个方法是在 时间轴上控制函数的执行次数. 函数防抖(debounce) 概念: 在事件被触发n秒后再执行回调,如果在这n秒内

  • JavaScript中的高级函数

    在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅如此,还能被一个函数返回!可以说,在JS中,函数无处不在,无所不能,堪比孙猴子呀!当你运用好函数时,它能助你取西经,让代码变得优雅简洁,运用不好时,那就遭殃了,要大闹天宫咯~ 除了函数相关的基础知识外,掌握一些高级函数并应用起来,不仅能让JS代码看起来更为精简,还可以提升性能.以下是小编总结的一些常用的.重要的高级函数,加上了一些个人见解,特此记录下来.如果您是JS初学者

  • JavaScript正则表达式函数总结(常用)

    /* 测试环境:Chrome 63.0.3239.132 */ JS中正则对象修饰符可选值为:"i" "g" "m",即忽略大小写 进行全局匹配 多行模式 JS中正则表达式支持的元字符: 1:枚举方括号表达式,范围方括号表达式,枚举取反方括号表达式,范围取反方括号表达式 2:. \w \W \d \D \s \S \b \B \n \r \f \v \888 \uffff \xff 3:n? n+ n* n{a} n{a,} n{a,b}及这些量

  • javascript回调函数详解

    在高级语言层出不穷的年代, 各个语言都号称有着一切皆为对象的自豪说法, 而 js 作为一门脚本语言却相对于java等传统面向对象语言有很大的不同之处, 除了 js 诡异的继承体系之外, 最令人着迷的一个特性就是回调函数, 当然也有很多人对他诟病, 笔者认为 回调函数 和 异步 是js语言特性的两大最为突出的店, 当然正如所有优点需要满足自我的需求, 这个世界没有银弹, 比如大量的使用回调函数将会使你的代码冗余, 错乱影响代码人的视觉与思维体验. 本文是自己对学习回调函数的的体会, 难免不完善甚至

  • 详细分析JS函数去抖和节流

    本篇内容从节流和去抖的概念基础知识讲起,对JS函数做了详细的分析,一起来看下: 1.什么是节流和去抖? 节流.就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不多流满一桶水的时候再回来,这个时候,不能把水龙头开的太大,不然还没回来水就已经满了,浪费了好多水,这时候就需要节流,让自己回来的时候水差不多满了.那在JS里有没有这种情况呢,典型的场景是图片懒加载监听页面的scoll事件,或者监

  • 详解Javascript 中的 class、构造函数、工厂函数

    到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立.现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数.他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择. 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新特性 class ClassCar { drive () { console.log('Vroom!'); } } const car1 = new ClassCar(); consol

  • 最实用的JS数组函数整理

    我们以前就给大家整理过关于JS数组相关的内容,这次我们给大家整理的是非常实用的JS数组操作技巧和写法,学习下吧. instanceof 检测一个对象是否是数组;(用来对付复杂数据类型;) // 简单数据类型 typeof ; A instanceof B // A是不是B造出来的; 例: var arr = [1,2,3]; console.log(arr instanceof Array); //arr属不属于Array类型; Array.isArray( ) Array.isArray(参数

  • 总结js函数相关知识点

    要知道,在js中,引用类型是一种数据结构,包含5种引用类型,分别是Object,data,Array,re请输入代码gExp,Function.今天我们就说Function这种数据结构. 在js种函数实际上是对象,每个函数都是Function类型的实例.和其他引用类型一样,都具有属性和方法. 1. 函数定义有几种方法 1)函数声明语法定义 function sum(num1,num2){ return num1+num2; } 2)函数表达式 注意函数表达式后边有一个分号: var sum=fu

  • JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结

    本文实例讲述了JS前端知识点offset,scroll,client,冒泡,事件对象的应用.分享给大家供大家参考,具体如下: 关于offset 多用于检测盒子高度,宽度,位置等 - offsetWidth : 盒子的宽度, 包括(width, padding, border) - offsetHeight: 盒子的高度, 包括(height, padding, border) - offsetLeft: 返回自身距离带有定位的上级盒子左边的位置 - offsetTop: 返回自身距离带有定位的上

  • JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结

    本文实例讲述了JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作.分享给大家供大家参考,具体如下: Js 中的运算符优先级 优先级依次降低 () !.-.++.– *./.% +.- <.<=.<.>= ==.!=.===.!==. && || ?: =.+=.-=.*=./=.%= URL 编码和解码 encodeURIComponent() decodeURIComponent() encodeURI() decode

  • JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支

    本文实例讲述了JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支.分享给大家供大家参考,具体如下: 页面加载事件的比较 window.onload jquery 中的 document.ready document.ready = function (callback) { // 兼容FF,Google if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function

  • JS前端知识点总结之内置对象,日期对象和定时器相关操作

    本文实例讲述了JS前端知识点总结之内置对象,日期对象和定时器相关操作.分享给大家供大家参考,具体如下: 常见内置对象 Arguments: 函数参数集合 Array: 数组 Boolean: 布尔对象 Date: 日期对象 Error: 异常对象 Function: 函数构造器 Math: 数学对象 Number: 数值对象 Object: 基础对象 RegExp: 正则表达式对象 String: 字符串对象 常见的日期对象的方法 var d = new Date(); d.getDate()

  • JS重要知识点小结

    讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原理(包括三个段落): 函数相关(包括 函数传参,带参数函数的调用方式,闭包): 面向对象(包括 对象创建.原型链,数据类型的检测,继承). JS代码预解析原理 复制代码 代码如下: /****************** JS代码预解析原理 ******************/ /* JS代码预解析.变量作用域.作用域链等 应该能作为学习JS语言的入门必备知识. 下边给出些简要解释和一些典型的代码段,若要了解更多,能从网上搜索

  • Vue.js进阶知识点总结

    对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站.但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了. 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ this.fetchPostList() } } 组件创建的时候我们获取一次列表,同时监听input框,每当发生变化的时候重新获取一次筛

  • JS常用知识点整理

    1.CORS CORS(Corss-Origin Resource Sharing,跨资源共享),基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应的成功或失败.即给请求附加一个额外的Origin头部,其中包含请求页面的源信息(协议.域名和端口),以便服务器根据这个头部决定是否给予响应. 2.document.domain 将页面的document.domain设置为相同的值,页面间可以互相访问对方的JavaScript对象. 注意: 不能将值设置为URL中不包含的域

  • Lua中的函数相关知识点整理汇总

    函数是一组一起执行任务的语句.可以把代码放到独立的函数中.怎么划分代码功能之间的不同,但在逻辑上划分通常是让每个函数执行特定的任务. Lua语言提供了程序可以调用大量的内置方法.例如,方法print()打印作为输入传参数在控制台中. 函数是已知的各种名称,如方法或子程序或程序等. 定义一个函数 在Lua编程语言中的方法的定义一般形式如下: 复制代码 代码如下: optional_function_scope function function_name( argument1, argument2

  • js+jquery常用知识点汇总

    一.jquery源码中常见的知识点 1.string,number类型转换的快捷方法 复制代码 代码如下: // @param s为字符串,n为数字 function fn(obj){     //转换为String类型     var s = obj +"";     //转换为number类型     var n = +obj; } 分享一个面试例子: //加会将其后面自动转换成字符串 "64"+4="644" //减会将其自动转换成数字 &

随机推荐