js基础(函数)

 

函数一种对象,函数中可以封装功能,使用typeof检查一个函数对象的时候,会返回function

 

创建一个函数对象

var function = new Function();

可以将要封装的代码以字符串的形式传递给构造函数

var function = new Function("console.log('xxxxxxxx');");;

调用函数的语法:函数对象(),function()

 

使用函数声明来创建一个函数

语法:

  function 函数名称(形参列表){

    函数体;

  }

 

使用函数表达式来创建一个函数:

语法:

  var fun = function(形参列表){

    函数体;

  }

 

调用函数时候,解析器不会检查实参的类型,也不会检查实参的数量,多余的实参不会被赋值,实参个数小于形参的个数,没有赋值的形参将是undefined

 

return 后面不写,相当于返回undefined,如果不写return 语句,则也会返回一个undefined

return的返回值可以是任何类型,可以是对象,也可以是函数

function fun3(){
    //在函数内部再声明一个函数
    function fun4(){
        alert("我是fun4");
    }         
        //将fun4函数对象作为返回值返回
    return fun4;
}

a = fun3();
//a();
fun3()();    

立即执行函数:

function(){
    alert("xxxxxx");
}
//以上是错误写法
(function(){
    alert("xxxxxx");
})();
//立即执行

 

枚举对象中的属性

for(var n in obj){
    console.log("属性名:"+n);            
    console.log("属性值:"+obj[n]);
}

 

全局作用域:直接编写在script标签中的js代码,都是全局作用域,在页面打开创建,在页面关闭销毁,在全局作用域中有一个全局对象window(代表浏览器的一个窗口,由浏览器创建)

    在全局作用域中,创建的变量都会作为window对象的属性保存

    使用var声明的的代码,会在所有的代码之前被声明,但是不会赋值(变量的声明提前)

    函数的声明提前:     

//fun();
//fun2();//这行报错,此时的fun2=undefined;            
            
//函数声明,会被提前创建
function fun(){
    console.log("我是一个fun函数");
}
            
//函数表达式,不会被提前创建
var fun2 = function(){
    console.log("我是fun2函数");
};
            
fun2();

       使用函数声明形式创建的函数function,会在所有的代码执行之前就被创建,所以可以在函数声明之前进行调用

       使用函数表达式创建的函数不能被创建

    全局作用域中的变量都是全局变量,在页面的任意部门都可以进行访问

函数作用域:调用函数时候创建函数作用域,函数执行完毕后,函数作用域被销毁,每调用一次就会创建一个新的函数作用域,他们之间是相互独立的

    在函数作用域中可以访问到全局作用域的变量,在全局作用域中无法访问到函数作用域中的对象

    当在函数作用域中操作一个变量时候,首先在函数作用域中进行寻找,知道找到全局作用域中,如果全局作用域中也没有,则会报错

    在函数作用域中要访问全局变量,可以使用window对象

  在函数作用域也有声明提前的特性:使用var关键字声明的变量,会在函数中所有的代码执行之前被声明,函数声明也会在函数中的所有代码之前执行

var c = 33;
function fun5(){
    console.log("c = "+c);
    var c = 10;
}
            
fun5();//输出undefined
var c = 33;
function fun5(){
    console.log("c = "+c);
    c = 10;
       //d没有使用var关键字,则会设置为全局变量
    d = 100;
}
            
fun5();
            
//在全局输出c
console.log("c= "+c);   //10
console.log("d= "+d);//100 

 

解析器在调用函数每次都会向函数传递一个隐含的参数,这个隐含的参数就是this,this指向的是一个对象,这个对象称为函数执行的上下文对象,根据函数的调用方式的不同,this会指向不同的对象

function fun(){
    //console.log("a = "+a+", b = "+b);
    console.log(this.name);//window
}

以函数的方式调用,this代表window,  以方法的形式的调用,this就是调用方法的哪个对象

<script type="text/javascript">
          
          function fun(){
                    //console.log("a = "+a+", b = "+b);
                    console.log(this.name + "=====" + this);
          }
                              
          //fun();
          
          //创建一个对象
          var obj = {
                    name:"Tom",
                    sayName:fun
          };
          
          var obj2 = {
                    name:"jacky",
                    sayName:fun
          }; 
          console.log(obj.sayName == fun);  //true
          obj.sayName();//以方法的形式调用,this是调用方法的对象       Tom=====[object Object]
          fun();//以函数形式调用,this是window  ===》window.fun()     =====[object Window]
</script> 
//创建一个name变量
          var name = "全局";
          
          //创建一个fun()函数
          function fun(){
              console.log(name);//永远都是"全局"
              console.log(this.name);
          }
          
          //创建两个对象
          var obj = {
              name:"Tom",
              sayName:fun
          };
          
          var obj2 = {
               name:"Jacky",
               sayName:fun
          };
        
          obj.sayName();
          obj2.sayName();

 

使用工厂方法创建对象:使用工厂方法创建对象,使用的构造函数都是Object,所以创建的对象都是Object类型,导致我们无法区分出多种类型的对象

      /*
           * 使用工厂方法创建对象
           *        通过该方法可以大批量的创建对象
           */

function createPerson(name , age ,gender){ //创建一个新的对象 var obj = new Object(); //向对象中添加属性 obj.name = name; obj.age = age; obj.gender = gender; obj.sayName = function(){ alert(this.name); }; //将新的对象返回 return obj; }

 

构造函数和普通函数的区别:

构造函数使用new关键字进行调用,普通函数直接调用

function Person(){

}
var preson = Person();
var person2 = new Person();
console.log(preson);    //undefined
console.log(person2);   //Person {}

构造函数的执行流程:

1、立即创建一个新的对象

2、将新建的对象设置为this,在构造函数可以使用this来引用新建的对象

3、逐行执行构造函数的对象

4、将新建的对象返回

通过构造函数创建的一类对象称为实例

console.log(typeof person2);   // object
console.log(person2 instanceof Person); //true //instanceof 可以检验一个实例是否属于某个类   
console.log(person2 instanceof Object);//true

 

 call()和apply()这两个方法都是函数的方法,需要通过函数进行调用,当对函数调用call()和apply()方法,都会执行函数,可以将一个对象指定为第一个参数,此时this将称为指定的参数对象

function fun() {
          console.log(this.name);
}

fun.call({name:"Tom"});//Tom
fun.call({name:"Jacky"});//Jacky
function fun2() {
          console.log(this.name);
}
function fun(a,b) {
          console.log("a = "+a);
          console.log("b = "+b);
}
/*
 * call()和apply()
 *        - call()方法可以将实参在对象之后依次传递
 *        - apply()方法需要将实参封装到一个数组中统一传递
 * 
 *        - this的情况:
 *                  1.以函数形式调用时,this永远都是window
 *                  2.以方法的形式调用时,this是调用方法的对象
 *                  3.以构造函数的形式调用时,this是新创建的那个对象
 *                  4.使用call和apply调用时,this是指定的那个对象
 */
fun.apply({name:"Tom"},[2,3]);
fun.call({name:"Jacky"},2,3);

arguments参数:

/*
 * 在调用函数时,浏览器每次都会传递进两个隐含的参数:
 *        1.函数的上下文对象 this
 *        2.封装实参的对象 arguments
 *                  - arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度
 *                  - 在调用函数时,我们所传递的实参都会在arguments中保存
 *                  - arguments.length可以用来获取实参的长度
 *                  - 我们即使不定义形参,也可以通过arguments来使用实参,
 *                            只不过比较麻烦
 *                            arguments[0] 表示第一个实参
 *                            arguments[1] 表示第二个实参 。。。
 *                  - 它里边有一个属性叫做callee,
 *                            这个属性对应一个函数对象,就是当前正在指向的函数的对象
 *                  
 */
function fun() {
       console.log(arguments);  //Arguments(2) ["hello", "world", callee: ƒ, Symbol(Symbol.iterator): ƒ]
       console.log(arguments instanceof Array);  //false
       console.log(arguments.length); //2
       console.log(Array.isArray(arguments));  //false
       console.log(arguments.callee);
       /*
                 ƒ fun() {
                           console.log(arguments);  //Arguments(2) ["hello", "world", callee: ƒ, Symbol(Symbol.iterator): ƒ]
                           console.log(arguments instanceof Array);  //false
                           console.log(arguments.…
       */
}

fun("hello", "world");

    

原文地址:https://www.cnblogs.com/lzb0803/p/9015753.html