zoukankan      html  css  js  c++  java
  • 《JavaScript-The Definitive Guide》读书笔记:函数定义和函数调用

    定义函数

    使用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为全局对象或者undefined
    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数组直接传入)。

  • 相关阅读:
    【扯淡篇】SDOI2018丶一轮游丶记
    初来乍到, 多多包涵~
    【学术篇】The Xuanku Inversion Magic学习笔记
    【模板篇】树状数组(六)
    【学术篇】CF932E Team Work && bzoj5093 图的价值
    【模板篇】NTT和三模数NTT
    【学术篇】CF833B TheBakery 分治dp+主席树
    【学术篇】NOI2015 品酒大会 后缀数组+并查集
    【模板篇】数论大杂烩~
    【学术篇】SPOJ GEN Text Generator AC自动机+矩阵快速幂
  • 原文地址:https://www.cnblogs.com/luotaoyeah/p/3823294.html
Copyright © 2011-2022 走看看