JavaScript语法引用数据类型之函数(Fuction)
一、为什么要使用函数?
- 提高代码复用
- 便于阅读和交流
二、函数介绍
说起 ECMAScript 中什么最有意思,那莫过于函数了。函数在ECMAScript中属于一等公民。本质上每个函数都是 Function 类型的实例,与其他引用类型一样都可以具有方法和属性.
1、基本介绍
函数是一个可以被其他代码或其自身调用的代码片段,或者是一个指该函数的变量variable 。 .当函数被调用时, 参数arguments 作为输入传递到函数,并且函数可以可选地返回输出。 在 JavaScript JavaScript中函数也是一个对象object.
函数名是作为函数声明或函数表达式的一部分声明的标识符 identifier。函数的作用域scope取决于函数名是一个声明还是表达式。
2、 如何定义函数?
1)声明式定义命名函数
命名函数是具有函数名称的函数:
function fun() {console.log(this.username);}
2)表达式: 定义匿名函数 。
匿名函数是一个没有函数名的函数
var foo = function (a, b) {console.log(a, b);}
3)构造函数模式
var foo = new Function();
三、函数内部属性
在函数内部,有两个特殊的对象: arguments 和 this。
1、arguments
arguments是一个类数组,包含着传入函数中的所有参数。虽然 arguments 的主要用途是保存函数参数,但这个对象还有一个名叫 callee 的属性,该属性是一个指针,指向拥有这个 arguments 对象的函数。
callee实例:
//求一个数的阶乘function factorial(num){if (num <=1) {return 1;} else {return num * factorial(num-1)}}
问题:这个函数的执行与函数名 factorial 紧紧耦合在了一起。
为了消除这种紧密耦合的现象,可以像下面这样使用 arguments.callee、
function factorial(num){if (num <=1) {
return 1;
} else {
return num * arguments.callee(num-1)
}
}
2、this
1)理解this
1. 一个关键字, 一个内置的引用变量2. 在函数中都可以直接使用this3. this代表调用函数的当前对象4. 在定义函数时, this还没有确定,只有在执行时才动态确定(绑定)的
2) 如何确定this的值
1. test()2. obj.test()3. new test()4. test.call(obj) test.apply(obj)
3)代码实例:
<script type="text/javascript">// 构造函数/*new做了什么?1. 返回一个新的对象2. 相对于给构造函数最后一行加了 return this*/function People() {this.age = 20;this.name = "张三";console.log(this)}var p = new People();console.log(p);//普通调用// this ---> windowPerson();
// this普通调用(全局)指向窗口windowconsole.log(this);</script>
四、函数的属性和方法
1、属性
ECMAScript 中的函数是对象,因此函数也有属性和方法。每个函数都包含两个
属性: length 和 prototype 。其中, length 属性表示函数希望接收的命名参数的个数。至于prototype则代表函数的显示原型!
2、方法
每个函数都包含两个非继承而来的方法: apply() 和 call() 。这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内 this 对象的值。
1)apply
语法:
func.apply(thisArg, [argsArray])
参数:
thisArg
在fun函数运行时指定的this值。
argsArray
可选的。
一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。
返回值:
调用的方法的返回值,若该方法没有返回值,则返回undefined
2)call
语法:
fun.call(thisArg, arg1, arg2, ...)
参数:
thisArg
在fun函数运行时指定的this值。
arg1, arg2, ...
指定的参数列表
返回值:
调用的方法的返回值,若该方法没有返回值,则返回undefined
代码实例:
<script type="text/javascript">function fun(a,b) {console.log("a = "+a);console.log("b = "+b);//alert(this);}var obj = {name: "obj",sayName:function(){alert(this.name);}};/** call()和apply()* - 这两个方法都是函数对象的方法,需要通过函数对象来调用* - 当对函数调用call()和apply()都会调用函数执行* - 在调用call()和apply()可以将一个对象指定为第一个参数* 此时这个对象将会成为函数执行时的this* - call()方法可以将实参在对象之后依次传递* - apply()方法需要将实参封装到一个数组中统一传递* * - this的情况:* 1.以函数形式调用时,this永远都是window* 2.以方法的形式调用时,this是调用方法的对象* 3.以构造函数的形式调用时,this是新创建的那个对象* 4.使用call和apply调用时,this是指定的那个对象*///fun.call(obj,2,3);fun.apply(obj,[2,3]);var obj2 = {name: "obj2"};/*fun.apply();fun.call();fun();*///fun.call(obj);//fun.apply(obj);//fun();//obj.sayName.apply(obj2);</script>
五、new关键字解析
new 运算符创建一个用户自定义的类型实例或内置类型的实例。
1、语法:
new constructor[([arguments])]
参数:
constructor:
一个指定对象实例的类或函数。
arguments:
一个用来被constructor 调用的参数列表
2、构造函数实例化
var aar= new Object(); 构造函数实例化
实例化构造函数new的操作:
- 返回一个新的对象
- 将构造函数中的this指向实例化对象。
- 在构造函数的最后一行会 return this;
3、创建一个用户自定义的对象需要两步:
- 通过编写函数来定义对象类型。
- 通过new来创建对象实例。
4、当执行一个new关键字时都会发生些什么?
当代码 new Foo(…) 执行时,会发生以下事情:
- 一个继承自 Foo.prototype 的新对象被创建。
- 使用指定的参数调用构造函数 Foo ,并将 this 绑定到新创建的对象。new Foo 等同于 new Foo(),也就是没有指定参数列表,Foo 不带任何参数调用的情况。
- 由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象,则使用步骤1创建的对象。(一般情况下,构造函数不返回值,但是用户可以选择主动返回对象,来覆盖正常的对象创建步骤)
即判断构造函数返回值的类型:
1)如果是值类型,就丢弃它,还是返回instance。
2)如果是引用类型,就返回这个引用类型的对象,替换掉instance。
3)如果没有写return,相当于return undefined
六、函数调用总结:
1、普通调用:() call() appiy()
2、 构造调用:new fn()
3、立即调用函数表达式(IIFE):(function(){})()
立即调用函数表达式(IIFE)是一个函数, 其在函数被加载到浏览器的编译器之后直接调用的。. 识别IIFE的方法是通过在函数声明的末尾定位额外的左和右括号。
(function foo1() {console.log("立即调用函数表达式");
}());
//道格拉斯·克罗克福德的风格(function foo2() {console.log("立即调用函数表达式");
})();
4、回调: 不需要开发者调用
七、函数与数组的结合使用:
1、介绍
Arguments(函数内部属性):不是数组;可实现函数不传参数获取数值。
arguments.callee():获取当前函数的引用。
2、代码实例:
<script type="text/javascript">/** 在调用函数时,浏览器每次都会传递进两个隐含的参数:* 1.函数的上下文对象 this* 2.封装实参的对象 arguments* - arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度* - 在调用函数时,我们所传递的实参都会在arguments中保存* - arguments.length可以用来获取实参的长度* - 我们即使不定义形参,也可以通过arguments来使用实参,* 只不过比较麻烦* arguments[0] 表示第一个实参* arguments[1] 表示第二个实参 。。。* - 它里边有一个属性叫做callee,* 这个属性对应一个函数对象,就是当前正在指向的函数的对象* */function fun(a,b){console.log(arguments instanceof Array);console.log(Array.isArray(arguments));console.log(arguments[1]);console.log(arguments.length);console.log(arguments.callee == fun);console.log(arguments);}fun("hello",true);</script>
八、使用细节和注意事项:
1、函数没有重载
实参列表可以不用和形参列表进行一对一的匹配,同名函数之间就是后面的覆盖前面的 ,函数没有重载没有重载。
<script type="text/javascript">function fn(){console.log('a');}//形式参数function fn(a){console.log(a);}//实参列表可以不用和形参列表进行一对一的匹配//同名函数之间就是后面的覆盖前面的 没有重载fn(1,2,3,4,5,6);</script>
JavaScript语法引用数据类型之函数(Fuction)相关推荐
- JavaScript基本/引用数据类型及判断方法
1. 常见的基本/引用数据类型 基本数据类型: Number.String .Boolean.Null和undefined.基本数据类型是按值访问的,可以直接操作保存在变量中的实际值. 引用数据类型: ...
- Javascript中引用数据类型
文章目录 一.Object 1.1 创建对象的两种简单方式: 1.2 获取对象属性的两种方式 二. Array 2.1 JavaScript数组与其他语言不同的地方 2.2 检测数组的几种方法 2.3 ...
- 【JavaScript】关于基本数据类型和引用数据类型
基本数据类型 JavaScript的基本数据类型有: String-字符串类型 Number-整形-----NaN也属于数值型 Boolean-布尔类型 null undefined-undefine ...
- JavaScript中基本数据类型和引用数据类型的区别
1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变 ...
- JavaScript复习(上)——使用、输出、语法、运算符、数据类型和函数
JavaScript 是属于 HTML 和 Web 的编程语言. 编程令计算机完成您需要它们做的工作. 一.JS的使用 1.JS位于<script>与 </script>标签之 ...
- 【JavaScript 笔记 】— 基础语法(数据类型、字符串、数组、对象、Map、Set、iterable、函数基础)
JavaScript个人笔记 数据类型和变量 浮点数的相等比较 null 和 undefined == 与 === strict模式 字符串 模板字符串 字符串常用方法 数组 数组常用方法 对象 条件 ...
- 惊呼!JavaScript基本数据类型和引用数据类型详解
前言 我是歌谣 知其然知其所以然 人人都有一个大厂梦 希望通过自己的一个总结分享可以给予大家带来帮助和提升. 本期知识点 JavaScript中基本数据类型和引用数据类型 目标 理解基本数据类型和引用 ...
- JavaScript引用数据类型
JavaScript引用数据类型 引用类型 在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起(它也常被称为类). Object类型 创建Object实例的方式有两种.第一种 ...
- 【JavaScript笔记 · 基础篇(五)】Array全家桶(引用数据类型中的数组 / Array对象 / Array.prototype)
文章目录 一. 引用数据类型中的数组 1.1 概述 1.2 初始化 1.2.1 字面量 1.2.2 构造函数模式 1.3 访问 1.4 length属性 1.5 数组遍历 1.6 类数组对象 1.6. ...
- JavaScript数据类型基本数据类型与引用数据类型的区别
JavaScript数据类型 1.JavaScript判断数据类型 typeof操作符 使用typeof操作符可以返回变量的数据类型 typeof操作符有带括号和不带括号两种用法 typeof (变量 ...
最新文章
- Duplicate entry '0' for key 'PRIMARY'_Spring Batch
- 【ssh从零单排】关于HTTP Status 404的debug问题
- 输出200-299之间的所有素数
- 王家林 云计算分布式大数据Hadoop实战高手之路第七讲Hadoop图文训练课程:通过HDFS的心跳来测试replication具体的工作机制和流程...
- 深入Java内存模型
- LeetCode(合集)两数之和总结 (1,167,1346)
- Python爬虫入门四urllib库的高级用法
- 局部遮荫光伏matlab,一种基于随机蛙跳全局搜索算法的局部阴影光伏阵列MPPT控制的制作方法...
- IDEA入门(一):简介、安装
- SVN自助更新:运维利器Puppet实例讲解
- 工具分享-Windows 的绿色软件工具集
- Java垃圾回收的工作原理和最佳做法
- 离散求边缘密度_求一把能退烧的机械键盘?——机械键盘购买“指北”
- 上市一再受阻,“微医”再融资4亿美元就能敲开“港股”大门?
- 招聘信息-明源软件欢迎您的加入
- python 正则表达式 ,看这篇就够了
- 在 Node.js 应用中集成 Redis
- nohup命令及其输出文件 linux nohup命令详解
- postfix中间件--Amavisd-new--反垃圾和反病毒配置
- requests的安装与简单运用
热门文章
- 计算机科学技术学报官网convex,计算机学报chin
- STM32HAL库使用RX8025
- pc彩色版伏魔记开放Java源码
- 异或(另类斐波那契数列题)
- Android SDK Platform Tools下载(包括adb 、 fastboot 和 systrace)
- 天玥运维安全网关(启明星辰堡垒机)无法登录资源主机的问题
- C# 中文简体中文繁体转换_ChineseConverter
- 12面魔方公式图解法_五魔方Megaminx( 正十二面体魔方)解法教程(图)
- 前端表白Html+css+js,表白源码,520和七夕告白,雪花爱心记录
- 已解决:“apktool” W: invalid resource directory name:XXX\res navigation