JavaScript函数及面向对象

JavaScript函数及面向对象

4.1、函数定义及变量作用域

定义方式一

绝对值函数

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

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

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

定义方式二

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

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

方式一和方式二等价！

调用函数

abs(10)  //10
abs(-10) //10

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

参数进来是否存在的问题？

假设不存在参数，如何规避

function abs(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(typeof x!=='number'){
    
    
        throw 'Not a number';
    }
    if(x>=0){
    
    
        return x;
    }else{
    
    
        return -x;
    }
}

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

rest

以前：

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

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

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

rest参数只能写在最后面，必须用…标识。

4.2、变量的作用域

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

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

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

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

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

养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；

全局函数

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

全局对象window

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

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

4.3、方法

定义方法

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

var kuangshen={
    
    
    name:'秦疆',
    birth:2020,
    //方法
    age:function(){
    
    
        //今年 - 出生的年
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}
//属性
kuangshen.name
//方法，一定要带（）
kuangshen.age()

this.代表什么？才开代码来看看

 function getAge(){
    
    
          //今年 - 出生的年
          var now = new Date().getFullYear();
          return now - this.birth;
  }
var kuangshen={
    
    
    name:'秦疆',
    birth:2020,
    //方法
    age:getAge
}

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

apply

在js中可以控制this指向

 function getAge(){
    
    
          //今年 - 出生的年
          var now = new Date().getFullYear();
          return now - this.birth;
  }
var kuangshen={
    
    
    name:'秦疆',
    birth:2020,
    //方法
    age:getAge
}

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