Javascript读书笔记:函数定义和函数调用

定义函数

使用function关键字来定义函数,分为两种形式:

  • 声明式函数定义;

     function add(m,n) {
        alert(m+n);
     }

    这种方式等同于构造一个Function类的实例的方式:

    var add = new Function("m", "n", "alert(m+n);");

    Function类构造方法的最后一个参数为函数体:"alert(m+n);",前面的都是函数的形参,参数必须是字符串形式的:"m","n"。

  • 函数表达式;

     1 //将一个匿名函数赋值给变量add
     2 var add = function(m, n) {
     3     alert(m + n);
     4 };
     5 add(1, 2);//3
     6
     7 //函数表达式作为参数传递给其他函数
     8 var arr = [1, 3, 4, 2];
     9 arr = arr.sort(function(a, b) {
    10     return a - b;
    11 });
    12 alert(arr);//1,2,3,4
    13
    14 //定义后立即调用
    15 alert( function(m, n) {
    16     return m + n;
    17 }(1, 2));
    18
    19 //函数表达式也可以定义名称(如用于递归)
    20 var f=function fact(x){
    21     if(x<1) {
    22         return 1;
    23     }else{
    24         return x*fact(x-1);
    25     }
    26 };

声明式函数定义和函数表达式的一点区别

声明式函数定义语句属于顶级作用域范围,函数调用语句可写在函数声明语句之前:

add(1, 2);//3
function add(m, n) {
    alert(m + n);
}

函数表达式定义的函数在定义之前无法调用:

//TypeError: add is not a function
add(1, 2);
var add = function(m, n) {
    alert(m + n);
};

函数的返回值

Javascript中的函数不需要声明返回类型,使用return关键字返回一个值。若函数不包含return语句,或者直接使用"return;",则函数的返回值为undefined。

嵌套函数

函数可以嵌套在其他的函数里面,内层函数可以访问外层函数的参数和变量:

function add(m, n) {

    function d(x) {
        return x * 2;
    }

    return d(m) + d(n);
}

alert(add(1, 2));//6

调用函数

函数体代码在函数被调用时才会执行。Javascript函数有4中调用方式:

  • 普通的函数调用
  • 方法调用
  • 构造函数调用
  • 通过 call() 和 apply() 间接调用

普通的函数调用

最常用的函数调用方式,如:

alert("hello");

var result = add(1, 2);

方法调用

所谓方法就是将一个函数赋给一个对象的属性:

 1 //定义一个函数
 2 function hello(name) {
 3     alert(‘hello,‘ + name);
 4 };
 5 var user = {};
 6
 7 //赋值给user的sayHi属性
 8 user.sayHi = hello;
 9
10 //方法调用
11 user.sayHi(‘张三‘);

普通的函数调用和方法调用的一个区别:在"普通的函数调用"方式中,函数的调用上下文(this的值),为全局对象(非严格模式)或者undefined(严格模式)。而在"方法调用"方式中,this指向当前对象。利用这一特性,我们可以在方法不需要明确的返回值时,直接返回this,从而实现"方法链"。如jquery中常见的:

$(‘#btn_edit‘).css({color:red}).show();

嵌套函数中的this:嵌套函数中,内层函数不会继承外层函数的this,即当内层函数作为方法调用时,内层函数的this指向当前调用对象;当内层函数作为函数调用时,this的值为全局对象(非严格模式)或者undefined(严格模式)。怎样在内层函数中访问外层函数的this呢?通常将this保存在一个局部变量中,通过变量来访问:

 1 var obj = {
 2     f : function() {
 3         var self = this;
 4         console.log(this === obj);//true,this指向当前对象
 5
 6         f1();
 7
 8         function f1() {
 9             console.log(this === obj);//false,this为全局对象或者unde
10             console.log(self === obj);//true,self指向外层this,即当前对象
11         }
12     }
13 };

构造函数调用

当使用new关键字创建一个对象时,即调用了构造函数。构造函数若没有形参,可以省略圆括号:

var obj = new Object();
//等价于
var obj = new Object;

调用构造函数,创建了一个新对象,这个新对象会成为该构造函数的调用上下文(this的值):

function User(name) {
    this.name=name;
    console.debug(this);
}

var user = new User(‘张三‘);

call() 和 apply() 间接调用

Javascript中函数也是对象,也拥有方法。其中 call() 和 apply() 可以用来间接调用函数。call() 的第一个参数用来指定调用上下文(即this的值),后面的参数是传入调用函数的实参。

 1 var name = ‘A‘;
 2 var user = {
 3     name : ‘B‘
 4 };
 5
 6 function showName() {
 7     alert(this.name);
 8 }
 9
10 showName();//A,this为全局对象
11 showName.call(user);//B,this为user对象

apply() 和 call() 类似,区别在于,后面的实参需要以数组的形式传递(可将当前函数的arguments数组直接传入)。

Javascript读书笔记:函数定义和函数调用,布布扣,bubuko.com

时间: 2024-10-02 22:48:51

Javascript读书笔记:函数定义和函数调用的相关文章

阶乘循环--函数定义、函数调用

#! /bin/bash # using recursion function factorial() { if [ $1 -eq 1 ]; then echo 1 else local temp=$[ $1 -1 ] local result=`factorial $temp` echo $[ $result * $1] fi } read -p "Enter value:" value result=`factorial $value` echo "The factori

Javascript读书笔记:字符串常用方法

concat() 连接多个字符串,返回合并后的字符串. 1 var s1="a"; 2 var s2="b"; 3 var s3="c"; 4 5 console.log(s1.concat(s2,s3));//abc 数组中的concat():将参数添加为数组的元素,返回新的数组. 1 var arr = [1, 2, 3]; 2 console.log(arr.concat(4, 5));//[1,2,3,4,5] indexOf() 查找子

【前端学习笔记】函数定义、函数调用、this

函数定义的三种方式与特点: 1.函数声明:(特点:会被前置:重复定义函数时,最后一次定义有效.) 2.函数表达式: 3.函数实例化:(特点:只能访问本地作用域与全局作用域!!!) /* 对象实例化定义函数的特点 */ var person = {name:"刘德华", age:50}; (function(){ var person = {name:"刘德华", age:30}; (function() { var person = {name:"刘德华&

高性能javascript读书笔记(三.DOM 编程1)

第三章DOM Script DOM编程 读书笔记 访问和修改DOM元素 浏览器通常要求DOM实现和JavaScript保持相互独立. <!-- 例如IE中,被称为JScript的JavaScript实现位于库文件jscript.dll中,而DOM实现位于另一个库mshtml.dll(内 部代号Trident).这种分离技术允许其他技术和语言,如VBScript,受益于Trident所提供的DOM功能和渲染功能.Safari使用Webkit的WebCore处理DOM和渲染,具有一个分离的JavaS

数据结构与算法JavaScript 读书笔记

由于自己在对数组操作这块比较薄弱,然后经高人指点,需要好好的攻读一下这本书籍,原本想这个书名就比较高深,这下不好玩了.不过看着看着突然觉得讲的东西都比较基础.不过很多东西,平时还是没有注意到,故写出读书笔记和诸君共勉! 第二张 2.2.1 创建一个数组 创建数组的方式有?那种比较高效?原因是? 第一种模式 var nums = []; var numbers = [1,2,3,4,5];console.log(numbers.length)//5 第二种模式 var nums = new Arr

Python函数(函数定义、函数调用)用法详解

Python 中,函数的应用非常广泛,前面章节中我们已经接触过多个函数,比如 input() .print().range().len() 函数等等,这些都是 Python 的内置函数,可以直接使用. 除了可以直接使用的内置函数外,Python 还支持自定义函数,即将一段有规律的.可重复使用的代码定义成函数,从而达到一次编写.多次调用的目的. 比如,在程序中定义了一段代码,这段代码用于实现一个特定的功能.问题来了,如果下次需要实现同样的功能,难道要把前面定义的代码复制一次?如果这样做实在太傻了,

数据访问---高性能JavaScript读书笔记(2)

对于任何一种编程语言来说,数据存储的位置关系到访问速度! 在JavaScript中的直接量包括字符串string.数字number.布尔值boolean.对象object.数组array.函数function.正则表达式regular expression.空值null.未定义数组undefined.而数组项则需要通过数组的数字索引来访问,对象通过字符串进行索引来访问其成员(这里顺便提一句因为数组项是通过数字进行索引.对象成员是通过字符串进行索引,所以这也就是为什么访问对象成员比访问数组项更慢的

JavaScript读书笔记(3)-操作符、语句和函数

1.  操作符 (1)       一元操作符 前置递增和递减操作符,变量的值都是在语句被求值以前改变的:后置相反 (2)       位操作符 在ECMAScript中,对数值进行位操作时,会发生以下转换过程:64位的数值被转换为32位数值,然后执行位操作,最后再将32位的结果转换回64位数值: 右移分为有符号右移(>>)和无符号右移(>>>) (3)       布尔操作符-(!)(&&)(||) (4)       全等操作符(===)只在两个操作数未经

《JavaScript高级编程》读书笔记——函数

基本语法如下: function functionName(arg0,arg1,...,argN){ statements } 1. 理解参数 ECMAScript中的参数在内部是用一个数组来表示的,在函数体内可通过arguments对象来访问这个参数数组. 其实,arguments对象只是与数组类似,并不是Array的实例,可以使用方括号语法访问它的每个参数,使用length属性确定传递的参数个数.例如: function sayHi( ){ alert("Hello "+argum