JavaScript函数

2021/7/25 20:36:23

本文主要是介绍JavaScript函数,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

4、函数

4.1定义函数

定义方式一

  1. 绝对值函数

     function abs(x) {
            if (x>0){
                return x;
            }else {
                return -x;
            }
        }
    

    一旦执行到return,代表函数结束,返回结果

    如果没有执行return,函数执行完也会返回结果,结果就是undefined

定义方式二

var abs = funcion(x){
    if (x>0){
        return x;
    }else {
        return -x;
    }
}

function(x){…}这是一个匿名函数,但是可以把结果赋值给abs,通过abs就可以调用函数

调用函数

abs(10)
>10

abs(-10)
>10

参数问题,js可以传任意参数,也可以不传递参数

参数进来是否存在的问题,规避方法:

手动抛出异常

function abs(x) {
        if (typeof x != 'number'){
            throw 'Not a Number';
        }
        if (x>0){
            return x;
        }else {
            return -x;
        }
    }

arguments

arguments代表传递进来的所有参数,是一个数组
在这里插入图片描述

4、函数

4.1定义函数

定义方式一

  1. 绝对值函数

     function abs(x) {
            if (x>0){
                return x;
            }else {
                return -x;
            }
        }
    

    一旦执行到return,代表函数结束,返回结果

    如果没有执行return,函数执行完也会返回结果,结果就是undefined

定义方式二

var abs = funcion(x){
    if (x>0){
        return x;
    }else {
        return -x;
    }
}

function(x){…}这是一个匿名函数,但是可以把结果赋值给abs,通过abs就可以调用函数

调用函数

abs(10)
>10

abs(-10)
>10

参数问题,js可以传任意参数,也可以不传递参数

参数进来是否存在的问题,规避方法:

手动抛出异常

function abs(x) {
        if (typeof x != 'number'){
            throw 'Not a Number';
        }
        if (x>0){
            return x;
        }else {
            return -x;
        }
    }

arguments

arguments代表传递进来的所有参数,是一个数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cElRoVSk-1627212156342)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20210719094531894.png)]

问题arguments包含所有参数,想使用多余的参数进行操作,需要排除已有的参数

if(arguments.length == 1){
    
}else(arguments.length == 2){
    
}

rest

ES6引入的新特性,获取除了已经定义的参数之外的所有参数

 function aaa(a,b,...rest) {
        console.log("a=>"+a);
        console.log("b=>"+b);
        console.log("rest=>"+rest);
    }

a=>1
b=>2
rest=>23,3,153,1,54,341,21,541

rest参数只能写在最后边,用…标识

4.2 变量的作用域

在js中,var 定义的变量实际是有作用域的

假设在函数体中声明,则在函数体外不可以使用(闭包

 function qj() {
    var x = 1;
    x = x + 1;
    }
    x = x + 2;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的函数名,只要在函数内部,就不冲突

 function a() {
    var x = 1;
    x= x + 1;
    }
    function b() {
        var x = 1;
        x = x + 1;
    }

提升变量的作用域

 function qj() {
        var x = "x" + y;
        console.log(x);
        var y = 'y';
    }

结果:xundefined

说明js的执行引擎,自动提升了y是声明,但是不会提升y的赋值

    function qj() {
      //  var a,b,c,d....
      //把所有变量提到前面统一定义
        
        var x = "x" + y;
        console.log(x);
    }

这是在js建立之初就存在的特性。

规范:所有的变量定义都放在函数的头部,不要乱放,便于代码的维护

全局变量

var x = 1;
function f(){
    console.log(x)
}
f();
console.log(x);

>1
>1

全局对象 window

var x = 'xxx';
alert(x);
alert(window.x);//默认所有的全局对象,自动绑定在window对象下

alert()本身也是window的变量

var x = 'xxx';

window.alert(x);

var old_window = window.alert();

//old_alert(x);

window.alert =  function () {

}
//alert() 失效了
window.alert(123);

//恢复
window.alert() = old_window;
window.alert(456);

js实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数的作用范围内找到,就会向外查找,如果在全局作用域都没有找到:

window.alert(x);

则会报错==ReferenceError==

规范

由于我们所有的全局变量都会绑定到window,如果不同的js文件,使用了相同的全局变量,就会产生冲突。免冲突的方法:

 //唯一全局变量
    var ChuanqiApp = {};
    
    //定义全局变量
    ChuanqiApp.name = 'chuanqi';
    ChuanqiApp.add = function (a,b) {
        return a + b;
    }

把自己的代码放入自己定义的唯一空间名字中,降低全局命名冲突的问题

==jQuery 》$()

局部作用域 let

  function aaa() {
        for (var i = 0; i < 100; i++) {
            console.log(i);
        }
        console.log(i+1);//i = 101
    }
//问题:i出了这个作用域还可以继续使用

ES6 let 关键字,解决局部作用域冲突的问题

//改进
  function aaa() {
        for (let i = 0; i < 100; i++) {
            console.log(i);
        }
        console.log(i+1);//i is not defined
    }

所以使用let定义局部作用域

常量

ES6之前,用大写字母定义常量

ES6引入常量关键词const

const PI = '3.14';//只读变量

PI = '123';//报错

问题arguments包含所有参数,想使用多余的参数进行操作,需要排除已有的参数

if(arguments.length == 1){
    
}else(arguments.length == 2){
    
}

rest

ES6引入的新特性,获取除了已经定义的参数之外的所有参数

 function aaa(a,b,...rest) {
        console.log("a=>"+a);
        console.log("b=>"+b);
        console.log("rest=>"+rest);
    }

a=>1
b=>2
rest=>23,3,153,1,54,341,21,541

rest参数只能写在最后边,用…标识

4.2 变量的作用域

在js中,var 定义的变量实际是有作用域的

假设在函数体中声明,则在函数体外不可以使用(闭包

 function qj() {
    var x = 1;
    x = x + 1;
    }
    x = x + 2;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的函数名,只要在函数内部,就不冲突

 function a() {
    var x = 1;
    x= x + 1;
    }
    function b() {
        var x = 1;
        x = x + 1;
    }

提升变量的作用域

 function qj() {
        var x = "x" + y;
        console.log(x);
        var y = 'y';
    }

结果:xundefined

说明js的执行引擎,自动提升了y是声明,但是不会提升y的赋值

    function qj() {
      //  var a,b,c,d....
      //把所有变量提到前面统一定义
        
        var x = "x" + y;
        console.log(x);
    }

这是在js建立之初就存在的特性。

规范:所有的变量定义都放在函数的头部,不要乱放,便于代码的维护

全局变量

var x = 1;
function f(){
    console.log(x)
}
f();
console.log(x);

>1
>1

全局对象 window

var x = 'xxx';
alert(x);
alert(window.x);//默认所有的全局对象,自动绑定在window对象下

alert()本身也是window的变量

var x = 'xxx';

window.alert(x);

var old_window = window.alert();

//old_alert(x);

window.alert =  function () {

}
//alert() 失效了
window.alert(123);

//恢复
window.alert() = old_window;
window.alert(456);

js实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数的作用范围内找到,就会向外查找,如果在全局作用域都没有找到:

window.alert(x);

则会报错==ReferenceError==

规范

由于我们所有的全局变量都会绑定到window,如果不同的js文件,使用了相同的全局变量,就会产生冲突。免冲突的方法:

 //唯一全局变量
    var ChuanqiApp = {};
    
    //定义全局变量
    ChuanqiApp.name = 'chuanqi';
    ChuanqiApp.add = function (a,b) {
        return a + b;
    }

把自己的代码放入自己定义的唯一空间名字中,降低全局命名冲突的问题

==jQuery 》$()

局部作用域 let

  function aaa() {
        for (var i = 0; i < 100; i++) {
            console.log(i);
        }
        console.log(i+1);//i = 101
    }
//问题:i出了这个作用域还可以继续使用

ES6 let 关键字,解决局部作用域冲突的问题

//改进
  function aaa() {
        for (let i = 0; i < 100; i++) {
            console.log(i);
        }
        console.log(i+1);//i is not defined
    }

所以使用let定义局部作用域

常量

ES6之前,用大写字母定义常量

ES6引入常量关键词const

const PI = '3.14';//只读变量

PI = '123';//报错

4.3方法

定义方法

方法就是把函数放在对象里面,对象只有两个东西:属性和方法

   var chuanqi = {
        name : 'chuanqi',
        birth:2020,
        //方法
        age: function () {
            //今年-出生的年
            var now = new Date().getFullYear();
            return now-this.birth;
        }
    }
   
   //属性
   chuanqi.name
   >chaunqi 
   //调用方法,注意带()
    chuanqi.age()
    >1

拆开后

function getAge{
     //今年-出生的年
            var now = new Date().getFullYear();
            return now-this.birth;
}
 

var chuanqi = {
        name : 'chuanqi',
        birth:2020,
        //方法
        age: getAge
    }

chuanqi.age()
>1

getAge
>NaN

getAge.apply(chuanqi,[])
>1

apply

在这里插入图片描述

在这里插入图片描述

this指向chuanqi,参数为空



这篇关于JavaScript函数的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程