zoukankan      html  css  js  c++  java
  • javascript第二弹——函数

    什么是函数

    函数是一块javascript代码,被定义一次,就可以执行调用多次;函数也是js对象,所以也可以像对象那样操作和传递;所以我们也把函数称之为函数对象;

    创建函数的几种方法

    一、函数声明

    function a(){
        //代码
    }
    

    二、函数表达式

    1、自调用函数(立即执行)

    (function(){
        //代码
    })(); 
    

    2、 匿名函数表达式(将函数赋值给变量)

    var a = function(){
        //代码
    }
    

    3、作为返回对象

    return function(){
        //代码
    }
    

    三、函数构造器(不常用)

    var fun = new Function();
    var fun = Function();
     // 这两种方法等价
    

    函数的调用方法

    1、直接调用

    fun();
    

    2、作为对象方法调用

    obj.fun();
    

    3、作为构造函数调用

    new fun();
    

    4、call/apply/bind(未开发)

    func.call();
    

    函数声明和函数表达式的区别

    函数声明会被前置

    function a(){};<-------|    //相当于函数声明提前了
    a();    //1            |
    function a(){--------->|
        var b = 1;
        console.log(b);
    };
    

    函数表达式的变量会被提前

    var a;<-----------------------------------------|    //变量被前置 值为undefined
    a();    //TypeError: a is not a function        |
    var a = function(){---------------------------->|
        var b = 1;
        console.log(b);
    }
    

    函数的参数是什么

    函数的参数是用一个数组来表示的,可以在函数内部通过arguments对象来访问,但是arguments不是一个Array实例;

    形参和实参

    function person(name,age){   //name,age为形参
            return '名字:'+name+'年龄:'+age;
    }
    person('wyang',26);    //实参
    

    如上面代码中的name,age没有具体的值的,但是可以在函数体内进行一系列逻辑处理的参数就是形参,再调用函数时传入的参数如上面代码中的wyang,26是实实在在存在值的就是实参;

    函数传参

    • 通过值传递参数

    在函数中调用的参数是函数的参数。
    如果函数修改参数的值,将不会修改参数的初始值(在函数外定义)。
    函数参数的改变不会影响函数外部的变量(局部变量)。

    • 通过对象传递参数

    在JavaScript中,可以引用对象的值。
    因此我们在函数内部修改对象的属性就会修改其初始的值。
    修改对象属性可作用于函数外部(全局变量)。

    this

    全局中的this指向的是window,函数内的this也是指向window
    对象方法中的this指向该方法。

    函数对象赋值给对象属性的时候,this指向的是该对象

    var obj = {
        name:'wyang'
    }
    function person(){
        return this.name;
    }
    obj.sayNma = person;
    obj.person();    //wyang
    

    对象原型链上的this

    var obj = {
        sayPro:function(){
            return  '名字:'+this.name+'年龄:'+this.age;
        }
    }
    var o = Object.create(obj);
    o.name = 'wyang';
    o.age = 26;
    console.log(o.sayPro());    //名字:wyang年龄:26
    

    回调函数

    一、在理解回调函数之前先理解下javascript里面call()这个方法;
    语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
    参数
    thisObj
    可选项。将被用作当前对象的对象。
    arg1, arg2, , argN
    可选项。将被传递方法参数序列。
    说明
    call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

    如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj

    上面的一堆我们用代码来简单梳理下:

    function person(){
        var name = 'wyang'; 
        var age = 26;
        console.log(name+','+age);
    }
    function one(){
        var name = 'wangyang'; 
        var age = 27;
        console.log(name+','+age);
    }
    person.call(one);    //wyang,26
    

    上面的例子是personone替换掉了。所以输出的就是wyang26;

    下面我们用call方法做一个继承的例子。

    function person(){
        this.name = 'wyang'; 
        this.age = 26;
    }
    function one(){
        person.call(this);
        console.log(this.name);
    }
    one();    //wyang,age
    

    上面例子person本身作为对象定义一个值为wyang的属性name;然后在one函数里通过call方法把person的属性继承给自己。调用one函数输出wyang

    二、通过call方法实现的回调函数

    function  person(callback){
        console.log(name);
        callback.call(this);
    }
    function one(){
        var name = 'wyang';
        console.log(name);
    }
    person(one);    //wyang;wyang
    

    上面例子中的person定义一个形参为callback
    通过call方法把形参callback替换掉自己;
    函数one中命名一个变量name并设定值为wyang
    然后调用person函数,并把one函数作为参数传进去。
    可以看到输出两次wyang;这说明在函数person里面接收到了one函数里面的name变量的值;
    one函数作为参数在person函数内通过call方法把person替换掉,在调用person函数的时候,one函数也被成功调用,然后成功输出;

    三、通过普通方式的回调

    function  person(callback){
        console.log(name);
        callback();
    }
    function one(){
        var name = 'wyang';
        console.log(name);
    }
    person(one);    //wyang;wyang
    

    上面例子中我们把call方法去掉,直接在函数person内部调用参数callback
    然后把one函数作为参数传递进去;

    需要注意的是:javascript中的函数是对象,one作为一个函数名是对Function对象的引用,所以在person函数内部调用callback参数时,要加‘()’;不然传递的只是一个函数名而已,并不是函数对象本身;

    【版权所有,转载请注明原文链接】文章中有错误或者不妥的地方请指出!!! 我是一个要成为前端架构师的人呢。
  • 相关阅读:
    构建账户系统
    我的vim配置
    document.readyState和xmlhttp.onreadystatechange
    RSA非对称算法实现HTTP密码加密传输
    css3动画学习资料整理
    H5缓存机制学习记录
    [leetcode]3Sum Closest
    [leetcode]Word Ladder II
    [leetcode]Two Sum
    [leetcode]Regular Expression Matching
  • 原文地址:https://www.cnblogs.com/wyangnb/p/4942187.html
Copyright © 2011-2022 走看看