JavaScript【函数】

4.函数

4.1、定义函数

绝对值函数

定义方式一：

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

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

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

定义方式二：

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

function(x){...}这是一个匿名函数。但是可以吧结果赋给abs，通过abs就可以调用函数

方式一和方式二等价

调用函数

//打开浏览器F12进入开发者模式，进入控制台
abs(10)
//10
abs(-10)
//10

参数问题：javaScript可以传任意个参数，也可以不传递参数

参数进来是否存在问题，假设不存在参数，如何规避？

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

arguments

arguments是一个JS免费赠送的关键词

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

var abs = function(x){
    console.log("x=>"+x);
    for(var i=0;i<arguments.length;i++){
    console.log(arguments[i]);
}
    if(x>=0){
    return x;
}else{
    return -x;
    }
}

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有的参数

rest

以前要使用未使用过的参数：

if(arguments.length>2){
    for(var i=2;i<arguments.length;i++){
        //
    }
}

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

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

rest参数智能卸载最后面，必须使用...标识

4.2、变量的作用域

在javascript中，var定义变量实际是有作用域的

假设在函数体中声明，则在函数体外不可以使用（闭包）

function jiangyou(){
    var x=1;
    x=x+1;
}

x=x+2; //报错，不能够在外部使用内部函数成员

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

function jiangyou(){
    var x=1;
    x=x+1;
}

function jiangyou2(){
    var x='A';
    x=x+1;
}

内部函数可以访问外部函数的成员，反之则不行

function jiangyou(){
    var x=1;
    function jiangyou2(){
        var y = x+1;
    
    }
    var z=y+1; //报错，不能够使用，y is not defined
}

假设，内部函数变量和外部函数的变量，重名 

function jiangyou(){
    var x=1;
    function jiangyou2(){
        var x='A';
        console.log('inner:'+x);
    }
    console.log('outer'+x)
    jiangyou2()
}

jiangyou()

 假设在JavaScript中函数查找变量从自身函数开始，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function jiangyou(){
    var x="x"+y;
    console.log(x);
    var y='y';
}
//结果：xundefined

说明：js执行引擎，自动提升了y的声明，但不会提升变量y的赋值

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

这个是在JavaScript建立之初就存在的特性，养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护

function jiangyou2(){
    var x= 1,
        y=x+1,
        z,i,a;//undefined

//之后就随意使用
}

全局函数

//全局变量
x=1;
function f(){
    console.log(x);
}
f();
console.log(x);

全局对象window

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

alert()函数本身也是一个window变量

var x='xxx';

window.alert(x);
var old_alert=window.alert;

window.alert=function(){

};//重写alert函数
//发现alert()失效
window.alert(123);

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

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错 RefrenceError  

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的Js文件，使用了相同的全局变量，则会发生冲突，如果能够减少冲突？

//唯一全局变量
var JiangApp={}

//定义全局变量
JiangApp.name='jiangyou';
JiangApp.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除了工作域仍然可以使用
}

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

function aaa(){
    for(let i=0;i<100;i++){
    console.log(i);
    }
    console.log(i+1);//报错
}

 建议使用 let 去定义局部作用域的变量

常量const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量，建议不要修改这样的值

var PI='3.14'

console.log(PI);
PI='213';//可以改变这样的值，没有强制规定
console.log(PI);

在ES6引入了常量关键字 const

const PI='3.14'//只读不改

console.log(PI);
PI='213';//直接报错，无法修改

4.3、方法 

定义方法

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

  var jiangyou={
            name:'酱油',
            birth:2000,
            //方法
            age: function () {
                //今年-出生的年
                var now =new Date().getFullYear();//返回本地时间表示
                return now-this.birth;
            }
        }

//属性
jiangyou.name
//方法，一定要带()
jiangyou.age()

this代表什么，以上代码拆分后

function getAge() {
            //今年-出生的年
            var now =new Date().getFullYear();//返回本地时间表示
            return now-this.birth;
        }

        var jiangyou={
            name:'酱油',
            birth:2000,
            //方法
            age: getAge
        }

this是无法指向的，是默认指向调用它的那个对象

apply

在 js中可以控制指向

function getAge() {
            //今年-出生的年
            var now =new Date().getFullYear();//返回本地时间表示
            return now-this.birth;
        }

        var jiangyou={
            name:'酱油',
            birth:2000,
            //方法
            age: getAge
        };

getAge.apply(jiangyou,[]);//this,指向了jiangyou，参数为空

---

摘录自遇见狂神说，仅供自己学习使用