JS 学习笔记--8---Function类型
练习使用的浏览器IE11
JS 中Function类型实际上是一种对象,每一个函数实际上都是Function类型的一个实例,每一个函数都有一些默认的属性和方法。由于函数是对象,故函数名实际上也是一个指向函数对象的指针变量
1、声明一个函数
直接用关键字function来声明函数,JS是弱类型的语言,声明的时候参数个数不限,只是需要写参数名,不需要写参数的关键字var,不需要指定返回值以及类型,如果有返回值直接在函数后面一个return value 即可。
方法一:function func(num1,num2){return 1;}//num1,num2是参数名,返回值为1
方法二:利用变量来声明函数,var box=function(num1,num2){};相当于给window对象的自定义属性box注册方法
方法三:利用析构函数来声明,但是最好不要用这种方式来声明,因为这种方式浏览器会解析两次,效率不高,第一次是解析整个ECMAScript表达式,第二次是解析析构函数中传递的字符串列表,var box=new Function('num1','num2','return num1+num2');注意析构函数里面的参数以及语句是带有引号的。这种方式能够更好的理解 Function是一个对象的,函数名是一个指针的概念
2、调用函数
方法一中声明的函数直接写函数名就可以调用[fun(10,20)],
方法二和方法三声明的函数调用时用变量名后面加括号里面写上要传递的参数值[box(10,20)];
函数的返回值可以直接赋值给一个变量[var box=func(20,10);],也可以当做实参直接传递给另外的函数[alert(func(10,20));]
ECMAScript 中的函数名本身就是变量,所以函数也可以作为值来使用。也就是说,不仅可以像传递参数一样把一个函数传递给另一个函数, 而且可以将一个函数作为另一个函数的结果返回
//将一个函数作为结果返回 其实就相当于执行这个函数,然后把这个函数的返回值给返回
function sum(num1,num2){
return num1+num2;
}
function func(num1){
return sum(num1,10);
}
alert(func(10));//20 //其实函数名,也就是一个对象的变量,执行的是函数的地址,相当于一个指针
//将函数名当做一个参数传递给另外一个函数,
function sumFunc(num1,num2){
return num1+num2;
}
function func(sum,num1){
return sum(num1,10);
}
alert(func(sumFunc,10));//20
JS 中没有函数重载的说法,函数调用的时候,会以就近原则来调用
JS 中调用函数的时候允许调用者和被调用这的参数个数不一样,也不会报错,但是如果参数个数不够的话,在执行时因为有的参数没有赋值可能会报错,参数时从前向后对应传递接收的
3、函数的内部属性 arguments
arguments 是一个类数组,用来保存函数传递过来的参数,数组类型
在声明函数的时候,有的时候我们并不知道调用者到底要传递多少个参数过来,比如说,求一串数的累加和,如果调用者不是用数组传递过来而是用直接传递给函数的方式传递[func(10,20...)],那么在声明函数实体的时候就不知道要声明多少个参数,这时可以不写参数名,在函数内部用arguments来代替,arguments是一个类数组,保存的是拥有这个对象的函数的参数的值,用索引的方法既可以获取对应的参数的值,使用如下:
function func(){
var res=0;
for(var i=0;i<arguments.length;i++){
res+=arguments[i]+" | ";
}
return res;
} alert(func(20,30,40));
arguments 中还有一个很重要的属性就是callee,是一个指针变量,指向的是拥有这个arguments类数组的函数,其实也就是arguments所在的函数本身,在递归的时候最好用这个属性,因为如果函数名改变了,也不需要改变内部的实现,arguments.callee()始终代表的是这个函数本身
//用arguments.callee的好处是,当函数名改变了以后,不需要改动递归出的函数,
function box(num){
if(num<=1){
return 1;
}else{
return num*arguments.callee(num-1);
//arguments.callee代表的是函数的本身,故和上面是同样的效果
}
}
alert(box(3));//6
4、函数的内部属性 this
this 这个属性代表的是它所在的对象本身,和C#中this代表实体对象本身是一样的,this 引用的是函数以执行操作的对象,或者说函数调用语句所处的那个作用域
window是JS中最大的一个对象,在window对象中声明一个变量其实就是给window这个对象声明一个属性,var box=1;相当于 window.box=1;也就等价于this.box=1;
当在全局作用域中调用函数时,this 对象引用的就是 window。
在显示的声明一个对象box,这个box中使用的this就代表的是box本身,this.color就是返回的box中属性color的值,而不是window对象中color的值
// this 代表的是坐在的对象本身,下面在对象box中的this,就代表对象box
var color='红色'; // window对象的属性, var box={
color:'蓝色',
run:function(){
alert(this.color);//蓝色
return this.color;
}
}
alert(window.color);//红色
alert(this.color); //红色 此处this代表的是window对象,故this.color是代表的window的属性
alert(box.run()); //蓝色 window.co='hh'; //和上面的color是等价的,都属于window对象的属性
alert(this.co);
5、函数的属性 length
函数的属性length代表的是函数希望接收的参数的个数,是由声明函数时参数列表中的个数决定的
6、函数的属性 prototype
prototype 是保存所有实例方法的真正所在,也就是原型。
prototype 下面有两个方法 apply(),call(),这两个方法都是函数非继承而来的方法, 是每一个函数都具有的方法。这两个方法的用途都是在特定的作用域中调用函数,也就是说调用特定的对象下面调用函数,(当然这个对象不一定已经声明有这个方法),实际上也就是等价于设置函数内部this对象的值,有点类似于C#的反射中调用对象的方法。
func.apply():这个方法有两个参数,第一个是要执行这个方法的作用域,也就是传递一个对象过去,第二个参数是一个数组,这个数组中是存放的调用的函数func的实参,也就是要传递给func的值,当然第二个参数可以省略。func.apply(this, [num1, num2]);。如果是在一个函数中调用可以用arguments把这个函数的参数传递过去,前提是这个类数组中有参数。但是最好是保证这个类数组中存放的是你想要传递给func函数的实参的值。虽然个数不匹配也不会出错,但是业务上可能不对
func.call():这个方法和上面的apply()方法是一样的,不同的是参数,第一个同样是作用域,是一样的,其余的参数是直接传递给函数的,而不是传递一个数组过去。就是说传递的参数顺序和方式是按照正常调用函数的形式和方法。func.call(this, num1, num2);
这两个方法最主要的功能是是能够扩展函数赖以运行的作用域,也就是改变函数运行所在的作用域
使用这apply()和call()这两个方法来扩充作用域最大的好处是对象不需要与方法发生任何的耦合关系,也就是上面说的对象中可能不存在这个方法,但只要存在这个对象就OK。【耦合:关联的意思,修改和维护会发生连锁反应】。也就是说 box 对象和sayColor()方法之间不会有多余的关联操作,比如 box.sayColor = sayColor;[ box对象中无需显示写上这条语句,也可以通过sayColor.call(box,'red')或者apply来调用方法sayColor,并且调用时sayColor方法的作用域是在对象box内部 ].
//call()和apply()方法最主要的是用于扩展函数依赖的作用域 var color='red';
var box={
color:'green'
} function sayColor(){
return this.color;
} alert(sayColor()); //red 对象是window
alert(sayColor.call(this)); //red 对象是window
alert(sayColor.apply(this)); //red 对象是window
alert(sayColor.call(window)); //red 对象是window
alert(sayColor.apply(window)); //red 对象是window
alert(sayColor.call(box)); //green 对象是box
alert(sayColor.apply(box)); //green 对象是box
练习的代码:以IE10为主
/* 函数的声明 //声明一个函数,没有参数和返回值
function func(){
alert('diao yong di shi hou zhi xin');
}
func(); //声明一个函数,带有两个参数,由于JS是弱类型的语言,故函数的参数时不需要使用var的
function func(num1,num2){
alert(num1+num2);
}
func(10,20); //声明一个函数,带有两个参数和返回值,JS中返回值直接用return即可,函数名前不需要标注带有返回值
function func(num1,num2){
return num1+num2;
}
alert(func(10,20));//30 //可以把函数的返回值直接赋值给一个变量,然后直接操作变量
function func(num1,num2){
return num1+num2;
}
var a=func(10,20);
alert(a); //11 //return还有一个功能就是,结束函数的执行
function func(num1,num2){
if(num1>10){
return 11;
}
return num1+num2;
}
alert(func(13,20)); //11 // JS 调用的时候传递的参数个数和函数原型中参数个数可以不一样
function func(num1,num2){
return num1+num2;
} alert(func(20,'ahc',9)); //ECMAScript 函数不介意传递进来多少参数,也不会因为参数不统一而错误。实际上,
函数体内可以通过 arguments 对象来接收传递进来的参数,arguments 可以用数组来取值
function func(){
var res=0;
for(var i=0;i<arguments.length;i++){
res+=arguments[i]+" | ";
}
return res;
} alert(func(20,30,40)); // JS 中没有函数重载的说法,函数和变量等的调用都是就近原则
function func(num1,num2){
return num1+num2;
}
function func(num1){
return num1;
}
alert(20,30);//20 执行的第二个函数,就近原则 //将一个函数的返回结果值作为另外一个函数的参数进行传递
function sum(num1,num2){
return num1+num2;
} function func(num1){
return num1+10;
}
alert(sum(func(10),10));//30 //用变量初始化的方式声明一个函数,然后用变量名加参数列表来调用这个函数
//这种声明方法,就是给变量名注册一个事件的形式
var box=function(num1,num2){
return num1+num2;
}
alert(box(10,10));//20 //使用析构函数来声明一个函数,但是这种方法效率低,因为会解析两次
//第一次解析整个表达式(ECMAScript常规代码),第二次就是解析传入构造函数中的字符串
//用这种方式能够更好的理解函数是对象,函数名是一个指针的概念
var box=new Function('num1','num2','return num1+num2');
alert(box(10,10));20 */ /*
//将一个函数作为结果返回 其实就相当于执行这个函数,然后把这个函数的返回值给返回
function sum(num1,num2){
return num1+num2;
}
function func(num1){
return sum(num1,10);
}
alert(func(10));//20 //Function类型其实也是一个对象,既然是对象,那也就具有和其他对象一样的属性方法等,
//其实函数名,也就是一个对象的变量,执行的是函数的地址,相当于一个指针
//将函数名当做一个参数传递给另外一个函数,
function sumFunc(num1,num2){
return num1+num2;
}
function func(sum,num1){
return sum(num1,10);
}
alert(func(sumFunc,10));//20 */ /* 函数的内部属性 arguments 和 this
//函数的递归
function box(num){
if(num<=1){
return 1;
}else{
return num*box(num-1);//自己调用自己
}
}
alert(box(3));//6 //arguments 是一个类数组,用来保存函数传递过来的参数,数组类型
//arguments.callee 是一arguments的一个属性,是一个指针变量,
//指向的是拥有这个argumens属性的函数,也就是说代表了他所在的这个函数本身
//用arguments.callee的好处是,当函数名改变了以后,不需要改动递归出的函数,
function box(num){
if(num<=1){
return 1;
}else{
return num*arguments.callee(num-1);
//arguments.callee代表的是函数的本身,故和上面是同样的效果
}
}
alert(box(3));//6 // this 对象代表的是对象的本身
// 和 C# 中的this差不多,C# 中的this代表的也是实例化的对象的本身
//默认情况下 this 带表的是window对象,window是JS中最大的一个对象
//从下面可以看出 在window对象下 this就等于window
alert(window); //object Window
alert(typeof window); //object
alert(this); //object Window
alert(typeof this); //onject var color='hong se'; // color 是window的一个属性
alert(window.color); //hong se 输出window的属性
alert(this.color); //hong se 和上面结果相等,说明this在此处代表的是window对象的本身 // this 代表的是坐在的对象本身,下面在对象box中的this,就代表对象box
var color='红色'; // window对象的属性, var box={
color:'蓝色',
run:function(){
alert(this.color);//蓝色
return this.color;
}
}
alert(window.color);//红色
alert(this.color); //红色 此处this代表的是window对象,故this.color是代表的window的属性
alert(box.run()); //蓝色 window.co='hh'; //和上面的color是等价的,都属于window对象的属性
alert(this.co); // 下面是通过给对象添加方法来改变this的作用域
window.color='红色'; //等价于 var color='红色' var box={
color:'蓝色'
}; function sayColor(){
alert(this.color);
} sayColor(); // 红色
box.sayColor=sayColor; //给对象添加一个方法,
//上面这句话改变了 sayColor 的作用域在box对象里面,故这个方法里面的this也就是指的box对象
box.sayColor(); // 蓝色 */ /* 函数的属性和方法 length,prototype[原型,标准] // 函数中的length属性返回的是函数的参数的个数
function box(nm1,num2){};
alert(box.length); // 2
function func(num1,num2,num3,num4){};
alert(func.length); // 4
// prototype 属性是保存实例方法的真正所在的位置,也就是保存的原型
//包含两个非继承而来的方法 apply()和call()方法,都是用在特定的作用域中调用,
//相当于改变函数的this,也就是说改变函数所处的对象,有点像C#中的反射调用对象方法 // box.apply()方法,两个参数,第一个参数是要操作的对象,第二个参数是方法的参数数组
function sum(num1,num2){
return num1+num2;
} function saySum1(num1,num2){
//第一个参数时代表的是要调用的是哪一个对象的sum方法,后面是这个方法的参数列表,注意传递的是一个数组
return sum.apply(this,[num1,num2]);//this相当于window
}
function saySum2(num1,num2){
return sum.apply(this,arguments);
//arguments 代表的是当前函数[saySum2]的参数列表,是一个类函数,直接传递给函数sum
}
alert(saySum1(10,20)); //30
alert(saySum2(10,20)); //30 //第一个参数的不同,函数的作用域是不一样的
function sum(num1,num2){
return num1+num2;
} function saySum1(num1,num2){
return sum.apply(this,arguments);//是在window对象中执行的
}
function saySum2(num1,num2){
return sum.apply(box,arguments);//是执行在box对象中的方法
}
var box ={
num1:'acd',
num2:'ddd',
}
alert(saySum1(10,20)); //30
alert(saySum2(10,10)); //20 //方法 call()和上面的apply()方法是一样的,仅仅在于接收参数的方式不同
//call()第一个参数同样是传递作用域对象,其余的参数是直接传给函数的,而不是传递一个数组 function sum(num1,num2){
return num1+num2;
} function saySum1(num1,num2){
return sum.call(this,num1,num2)
} function saySum2(num1,num2){
return sum.call(box,num1,num2);
}
var box={}; alert(saySum1(10,20));//30
alert(saySum2(20,20));//40 //call()和apply()方法最主要的是用于扩展函数依赖的作用域 var color='red';
var box={
color:'green'
} function sayColor(){
return this.color;
} alert(sayColor()); //red 对象是window
alert(sayColor.call(this)); //red 对象是window
alert(sayColor.apply(this)); //red 对象是window
alert(sayColor.call(window)); //red 对象是window
alert(sayColor.apply(window)); //red 对象是window
alert(sayColor.call(box)); //green 对象是box
alert(sayColor.apply(box)); //green 对象是box
*/
JS 学习笔记--8---Function类型的更多相关文章
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
- JS 学习笔记--3--数据类型
1.typeof 操作符 用来获取变量或者字面量的类型,也可以typeof(x);但是typeof并非内置函 数,而是一个操作符变量2.JS 一共6种类型 Undefined/Null/Boolean ...
- [前端JS学习笔记]JavaScript function
一.函数的声明 1.1 function 命令 function methodName(params) { // code } 如下声明: function test_function(params) ...
- js学习笔记4----数据类型
1.ECMAScript:标准.核心 JS中的数据类型:数字(NaN).字符串(空隔也会占据长度).布尔值(true和false).函数.对象(obj.[].{}.null).undefined. t ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 【转】Backbone.js学习笔记(二)细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- WebGL three.js学习笔记 加载外部模型以及Tween.js动画
WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...
随机推荐
- Dev的DocumentManager添加窗体
1.DocumentManager要设置自己的MdiParent属性 2.主窗体设置IsMidContainer为True 3.要生成的窗体设置MdiParent为主窗体 4.正常创建窗体,然后就可以 ...
- WCF+EntityFramework+mysql总结
用WCF+Ef操作Mysql数据库的,现在,写一下经验总结,希望对大家有帮助. 1.需下载并安装MySql Connector Net 6.5.4 2.在ef层和wcf服务层引用dll :Mysql. ...
- [leetcode]_Climbing Stairs
我敢保证这道题是在今早蹲厕所的时候突然冒出的解法.第一次接触DP题,我好伟大啊啊啊~ 题目:一个N阶的梯子,一次能够走1步或者2步,问有多少种走法. 解法:原始DP问题. 思路: 1.if N == ...
- JavaScript的闭包是什么意思以及作用和应用场景
JavaScript闭包 1.什么是闭包 百度百科对于闭包的解释是:闭包是指可以包含自由(未绑定到特定对象)变量的代码块:这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境中 ...
- scala学习笔记1
一.REPL scala解释器读到一个表达式,对它进行求值,将它的打印出来,接着再继续读下一个表达式.这个过程被称作 读取-打印-循环,即REPL. 从技术上讲,scala程序并不是一个解释器.实际发 ...
- HTML5高防win8风格
使用HTML5做了一个高防Win8的页面,大家看看怎么样 Java..NET.PHP.Android.iOS.HTML5,CSS3. web前端.视频资料下载网站 http://51pansou.c ...
- php ajax提交post请求出现数组被截断情况的解决方法
一.场景 今天做保存专题商品列表的时候发现,前端明明有2300多条数据,但是实际服务端接受存入数据库才166条 二.解决过程 经过调试发现前端页面提交post请求时数据量是正确的,但到服务端只能接受到 ...
- 【转】代码编辑器(二)-SynEdit
在我去年的时候我就有这个了,而且这是我第二个第三方的控件(第一个是DevExpress),这个是专门做代码编辑器的.安装方法:点我. 安装成功了之后,会在Tool Palette看到两个:SynEdi ...
- WPF自定义控件(一)——Button
接触WPF也有两个多月了,有了一定的理论基础和项目经验,现在打算写一个系列,做出来一个WPF的控件库.一方面可以加强自己的水平,另一方面可以给正在学习WPF的同行一个参考.本人水平有限,难免有一些错误 ...
- JavaScript高级程序设计之基本包装类型
为便于操作基本类型值,ECMAScript提供了3个特殊的引用类型:Boolean, Number 和 String // 字符串怎么会有方法呢 var str1 = "some text& ...