Javascript 函数创建与调用

关于JS中的函数主要总结了以下几个方面:

  1. 函数的创建:主要有以下三种方法,
    函数声明:

    function add(a,b){
    	return a+b;
    }
    

    解析器会先读取函数声明,并使其在执行任何代码之前可以访问;意味着可以把函数声明放在调用它的语句之后。
    如:

    sum1(1,2);   //输出3
    function sum1(n1,n2){
    	return n1+n2;
    }
    

    函数表达式(函数字面量):

    var add=function(a,b){
    	return a+b;
    }
    

    函数表达式必须等到解析器执行到它所在的代码行才会真正被解释执行。当函数调用在声明之前的话则会报错,例如:

    sum1(1,2);  
    var sum1=function (n1,n2){
    	return n1+n2;
    }
    

    在这里插入图片描述
    函数表达式中,创建的函数叫做匿名函数,因为function关键字后面没有标识符,下面的例子是一个立即执行的匿名函数:

    (function(a,b){
    	console.log(a+b);
    })(1,2);
    

    构造函数Function,此时参数必须加引号:

    var add=new Function(‘a’,’b’,’return a+b’);
    

    这种方式有个缺点就是不能获取局部变量,只能获取到全局变量:

    var gobalVal=’GobalValue’;
    (function(){
    	var localVal=’LocalValue;
    	var newfunc=new Function(‘console.log(localVal)’);
    	newfunc();
    })();
    

    在这里插入图片描述
    若改为 var newfunc=new Function(‘console.log(gobalVal)’);
    在这里插入图片描述
    总结一下三种创建方式的区别:如下表,

函数声明函数表达式函数构造器
前置
允许匿名
立即调用
没有函数名
  1. 函数的调用方式
    直接调用:
    作为一个函数去调用,函数名+();如foo();

    function myFunction() {
       console.log('Hello!')
    }
    myFunction();   //Hello!
    

    作为对象方法来调用:

    var obj={
    	one:'first',
    	two:'second',
    	func:function(){
    		return this.one + ' '+this.two;
    	}
    };
    obj.func();
    

    在这里插入图片描述
    作为构造器:

    function Person(name,age){
    		this.name=name;
    		this.age=age;
    }
    var person=new Person(‘John’,27);
    

    在这里插入图片描述
    使用call/apply/bind方法:
    call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

    function sum1(n1,n2){
    	return n1+n2;
    }
    var obj;
    obj =sum1.call(obj,1,2);
    //obj =sum1.apply(obj,[1,2]);
    //var newfunc=sum1.bind(obj,1,2);//生成新函数
    //newfunc();
    
  2. 作用域:
    JS中的作用域分为以下:全局作用域、函数作用域;在ES6中新增了块级作用域。
    全局作用域:变量在函数体外定义,为全局变量,此时具有全局作用域,所有函数均可使用该变量。
    局部作用域:变量在函数内声明,只能在函数内部访问。
    块级作用域:在ES6中,提供了let和const关键字,这两种关键字把变量限制在当前代码块中,形成了块级作用域。使用const声明的是常量,其值一旦被设定便不可被更改。let 声明的变量只在其声明的块或子块中可用。var声明的变量的作用域是整个封闭函数。

    function test() {
      if (true) {
    	   let x=1;
        console.log(x);
      }
      console.log(x);
    }
    test();
    

    在这里插入图片描述
    若改为var x=1,则效果就不一样了:如下,
    在这里插入图片描述

  3. arguments:
    arguments是一个对应于传递给函数的参数的类数组对象。使用 arguments.length来确定传递给函数参数的个数即实参个数;使用arguments.callee指向当前执行的函数。

  4. this的指向性:
    在全局作用域下的this指的是全局对象,如果在浏览器中指的是window对象;如:
    在这里插入图片描述
    作为对象方法的函数中的this:
    指向调用该对象方法的对象;如上面第2部分函数调用中的例子,func方法是一个函数,隶属于对象obj,实例中this的值就是obj对象。

    var obj={
    	one:'first',
    	two:'second',
    	func:function(){
    		return this;
    	}
    };
    obj.func();
    

    在这里插入图片描述
    构造器上的this:

    function Person(name,age){
    this.name=name;
    	this.age=age;
    }
    var p=new Person('John',27);
    

    构造函数中 this 关键字没有任何的值。this 的值在函数调用实例化对象(new object)时创建。如上,this指的是p。
    call/apply与this:
    call()或apply()方法可以设置 this 的值。在JavaScript严格模式(strict mode)下, 在调用函数时第一个参数会成为this 的值, 即使该参数不是一个对象。在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是null或undefined, this将指代全局对象。

    function func(){
    	return this;
    }
    function Person(name,age){
    	this.name=name;
    	this.age=age;
    }
    var p=new Person('John',27);
    obj = func.call(p);
    

    在这里插入图片描述

    function func(){
    	return this;
    }
    obj = func.apply(null);
    

    在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值