什么是函数

函数是一块javascript代码,被定义一次,就可以执行调用多次;函数也是js对象,所以也可以像对象那样操作和传递;所以我们也把函数称之为函数对象;

创建函数的几种方法

一、函数声明

function a(){
//代码
}

二、函数表达式

1、自调用函数(立即执行)

(function(){
//代码
})();

2、 匿名函数表达式(将函数赋值给变量)

var a = function(){
//代码
}

3、作为返回对象

return function(){
//代码
}

三、函数构造器(不常用)

var fun = new Function();
var fun = Function();
// 这两种方法等价

函数的调用方法

1、直接调用

fun();

2、作为对象方法调用

obj.fun();

3、作为构造函数调用

new fun();

4、call/apply/bind(未开发)

func.call();

函数声明和函数表达式的区别

函数声明会被前置

function a(){};<-------|    //相当于函数声明提前了
a(); //1 |
function a(){--------->|
var b = 1;
console.log(b);
};

函数表达式的变量会被提前

var a;<-----------------------------------------|    //变量被前置 值为undefined
a(); //TypeError: a is not a function |
var a = function(){---------------------------->|
var b = 1;
console.log(b);
}

函数的参数是什么

函数的参数是用一个数组来表示的,可以在函数内部通过arguments对象来访问,但是arguments不是一个Array实例;

形参和实参

function person(name,age){   //name,age为形参
return '名字:'+name+'年龄:'+age;
}
person('wyang',26); //实参

如上面代码中的name,age没有具体的值的,但是可以在函数体内进行一系列逻辑处理的参数就是形参,再调用函数时传入的参数如上面代码中的wyang,26是实实在在存在值的就是实参;

函数传参

  • 通过值传递参数

在函数中调用的参数是函数的参数。

如果函数修改参数的值,将不会修改参数的初始值(在函数外定义)。

函数参数的改变不会影响函数外部的变量(局部变量)。

  • 通过对象传递参数

在JavaScript中,可以引用对象的值。

因此我们在函数内部修改对象的属性就会修改其初始的值。

修改对象属性可作用于函数外部(全局变量)。

this

全局中的this指向的是window,函数内的this也是指向window

对象方法中的this指向该方法。

函数对象赋值给对象属性的时候,this指向的是该对象

var obj = {
name:'wyang'
}
function person(){
return this.name;
}
obj.sayNma = person;
obj.person(); //wyang

对象原型链上的this

var obj = {
sayPro:function(){
return '名字:'+this.name+'年龄:'+this.age;
}
}
var o = Object.create(obj);
o.name = 'wyang';
o.age = 26;
console.log(o.sayPro()); //名字:wyang年龄:26

回调函数

一、在理解回调函数之前先理解下javascript里面call()这个方法;

语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])

参数

thisObj

可选项。将被用作当前对象的对象。

arg1, arg2, , argN

可选项。将被传递方法参数序列。

说明

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj

上面的一堆我们用代码来简单梳理下:

function person(){
var name = 'wyang';
var age = 26;
console.log(name+','+age);
}
function one(){
var name = 'wangyang';
var age = 27;
console.log(name+','+age);
}
person.call(one); //wyang,26

上面的例子是personone替换掉了。所以输出的就是wyang26;

下面我们用call方法做一个继承的例子。

function person(){
this.name = 'wyang';
this.age = 26;
}
function one(){
person.call(this);
console.log(this.name);
}
one(); //wyang,age

上面例子person本身作为对象定义一个值为wyang的属性name;然后在one函数里通过call方法把person的属性继承给自己。调用one函数输出wyang

二、通过call方法实现的回调函数

function  person(callback){
console.log(name);
callback.call(this);
}
function one(){
var name = 'wyang';
console.log(name);
}
person(one); //wyang;wyang

上面例子中的person定义一个形参为callback

通过call方法把形参callback替换掉自己;

函数one中命名一个变量name并设定值为wyang

然后调用person函数,并把one函数作为参数传进去。

可以看到输出两次wyang;这说明在函数person里面接收到了one函数里面的name变量的值;

one函数作为参数在person函数内通过call方法把person替换掉,在调用person函数的时候,one函数也被成功调用,然后成功输出;

三、通过普通方式的回调

function  person(callback){
console.log(name);
callback();
}
function one(){
var name = 'wyang';
console.log(name);
}
person(one); //wyang;wyang

上面例子中我们把call方法去掉,直接在函数person内部调用参数callback

然后把one函数作为参数传递进去;

需要注意的是:javascript中的函数是对象,one作为一个函数名是对Function对象的引用,所以在person函数内部调用callback参数时,要加‘()’;不然传递的只是一个函数名而已,并不是函数对象本身;

javascript第二弹——函数的更多相关文章

  1. Javascript 基础--JS函数(三)

    一.基本概念:未完成某一个功能的代码(语句,指令)的集合. 二.函数的调用方式: 2.1.函数名(传递参数1,传递参数2)   基本语法 function 函数名(参数列表){ //代码; retur ...

  2. 前端学习 第二弹: JavaScript中的一些函数与对象(1)

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  3. 前端学习 第六弹: javascript中的函数与闭包

    前端学习 第六弹:  javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) {   ...

  4. 深入理解javascript函数系列第二篇——函数参数

    × 目录 [1]arguments [2]内部属性 [3]函数重载[4]参数传递 前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传 ...

  5. 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)

    继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...

  6. JavaScript学习09 函数本质及Function对象深入探索

    JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...

  7. JavaScript高级之函数的四种调用形式

    主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...

  8. JavaScript高级程序设计--函数小记

    执行环境和作用域链   每个函数都有自己的执行环境.当执行流进入一个函数时,函数 的环境就会被推入一个环境栈中.而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境.   当代码在一个环境中 ...

  9. Javascript中的函数(三)

    一:概述 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解.JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质 ...

随机推荐

  1. AWS AutoScaling

    origin_from: http://blog.csdn.net/libing_thinking/article/details/48327189 AutoScaling 是 AWS 比较核心的一个 ...

  2. Ubuntu14.04server开放rootssh登录权限

    刚安装了Ubuntu 14.04 server的虚拟机,普通帐号可以远程登录,但是root不行,输入密码后一直报错: permission denied 最后发现ssh的配置(/etc/ssh/ssh ...

  3. Android 中的Resource

    Android与ios相比,各种各样Resource算个独特之处.详情请参见官网Resource Types Resource有许多种,常见的有图像资源,布局资源,等等.每一种资源的位置都是固定的,这 ...

  4. git merge和个git rebase的区别

    http://stackoverflow.com/questions/16666089/whats-the-difference-between-git-merge-and-git-rebase/16 ...

  5. input框颜色修该

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Linux C 单链表 读取文件 并排序 实例并解释

    C的指针挺头疼的,先看一个例子: 给指针赋值和通过指针进行赋值这两种操作的差别确实让人费解.谨记区分的重要方法是:如果对左操作数进行解引用,则修改的是指针所指对象的值:    如果没有使用解引用操作, ...

  7. LinuxC语言读取文件,分割字符串,存入链表,放入另一个文件

    //file_op.c #include <string.h> #include <stdio.h> #include <stdlib.h> struct info ...

  8. Xshell 中文乱码

    Xshell对于嵌入式开发来说,是个非常不错的工具.但或许都有过被中文显示为乱码的问题感觉有点不爽.解决方法其实很简单的,即把xshell编码方式改成UTF-8即可. [文件]–>[打开]–&g ...

  9. javaweb实现验证码功能

    在javaweb的用户注册与登陆功能时,有时为了防止漏洞或者大量注册,可以使用验证码功能,下面是验证码的一个简单实现 验证码类 public class ValiImg extends HttpSer ...

  10. 使用HtmlAgilityPack抓取网页数据

    XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path) 或者步 (steps) 来选取的. 下面列出了最有用的路径表达式: nodename:选取此节点的所有 ...