zoukankan      html  css  js  c++  java
  • JavaScript基础内容中的函数详解

    函数

    函数:即方法

    函数就是一段预先设置的功能代码块,可以反复调用,根据输入参数的不同,返回不同的值。

    为什么使用函数:

    1.方便调用

    2.代码重用,利于维护

    3.便于修改,便于重构

    4.简化逻辑,利于编程

    1、声明函数

    声明函数 Function Declaration 的三种方法

    1)function 命令

    function print(s) {
        document.write(s+"<br/>");
    }

    2)函数表达式

    var printStr =function(str){
        document.write(str+"<br/>");
    }

    这种写法将一个匿名函数赋值给变量。这时,这个匿名函数又称函数表达式(Function Expression),因为赋值语句的等号右侧只能放表达式。

    3)Function 构造函数 : 入门级别用的不多….

    var add = new Function('x','y','return (x + y)');

    // 等同于

    function add(x, y) {
        return (x + y);
    }
    var foo = new Function(
        'return "hello world"'
    );

    // 等同于

    function foo() {
        return "hello world";
    }

    注意:不能在条件语句中声明函数

    函数名的提升

    JavaScript 引擎将函数名视同变量名,所以采用 function 命令声明函数时,整个函数会像变量声明一样,被提升到代码头部。所以,下面的代码不会报错。

    f();
    function f() {}

    表面上,上面代码好像在声明之前就调用了函数 f。但是实际上,由于“变量提升”,函数 f 被提升到了代码头部,也就是在调用之前已经声明了。但是,如果采用赋值语句定义函数,JavaScript 就会报错。

    f();
    var f = function (){};// TypeError: undefined is not a function

    2、函数的调用

    函数的调用:圆括号运算符

    函数名([实参]);

    存在返回值可以变量接收

    print()
    printStr("goodgoodstudy");
    var result =add(1,2);

    3、参数

    参数: 形参与实参 函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数。"种瓜得瓜种豆得豆",使用时实参可以省略。

    function square(x) { //x 为形参
        return x * x;
    }

    square(2) // 4 2 为实参

    square(3) // 9

    function f(a, b) {
        return a;
    }
    //实参可以省略
    f(4, 2, 3) // 1
    f(10) // 1
    f() // undefined

    同名参数:取最后的一个

    function f(a, a) {
        console.log(a);
    }

    f(1, 2) // 2

    默认值:使用 || 或运算

    function f(a){
        a = a || 1;
        return a;
    }

    f('') // 1
    f(0) // 1

    //更精确写法
    function f(a){
        (a !== undefined && a !== null) ? a = a : a = 1;
        return a;
    }

    值传递(passes by value):值的副本

    var box= 2;
    function f(a) {
        a = 3;
    }

    f(box);
    console.log(box) // 2 没有改变
    //思考 对象值的改变
    var obj = {p: 1};
    function f(o) {
        o.p = 2;
    }
    f(obj);
    console.log(obj.p) // 2

    //思考
    var obj = [1, 2, 3];
    function f(o){
        o = [2, 3, 4];
    }

    f(obj);
    console.log(obj) // [1, 2, 3]

    arguments 对象: 获取所有的参数,可以看成数组。由于 JavaScript 允许函数有不定数目的参数,所以我们需要一种机制,可以在函数体内部读取所有参数。这就是 arguments 对象的由来。

    var f = function(a) {
        for(var i in arguments){
            console.log(arguments[i]);
        }
    }

    f(1,2,3);

    了解: callee

    var add =function(){
        //获取调用者
        console.log(arguments.callee === add); //是否为自己调用
    }
    add();

    4、 return 语句

    是函数的返回值。return 语句不是必需的,如果没有的话,该函数就不返回任何值,或者说返回 undefined。

    5、递归( recursion)

    函数自己调用自身

    函数头:尽头 函数体:重复执行

    function print(num){
        if(num==10){ //递归头
            return ;
        }
        //递归体
        console.log(num);
        print(num+1);
    }

    print(1);

    6、函数的地位

    函数的地位是第一等公民

    函数与其他数据类型完全是平等的,所以又称函数为第一等公民

    function add(x, y) {
        return x + y;
    }

    // 将函数赋值给一个变量
    var operator = add;

    // 将函数作为参数和返回值
    function a(op){
        return op;
    }

    a(operator)(1, 1)// 2

    7、函数的属性和方法

    name:函数名

    length:参数个数

    toString(): 返回源码

    8、函数作用域

    函数作用域:全局(global variable)和局部(local variable)

    var a =1; //全局变量
    function display(){
        var b=2; //局部变量
        c =3; //没有 var 为全局变量 ,调用完成后 c 就存在了
        console.log(a+"-->"+b);
    }

    display();
    //b 不能访问
    console.log(a+"-->"+c);

    就近原则:

    var v = 1;

    function f(){
        var v = 2;
        console.log(v);
    }

    f(); // 2
    console.log(v); // 1

    变量提升

    function foo(x) {
        if (x > 100) {
            var tmp = x - 100;
        }
    }

    //等同于

    function foo(x) {
        var tmp;
        if (x > 100) {
            tmp = x - 100;
        };
    }

    函数本身的作用域:函数本身也是一个值,也有自己的作用域。它的作用域绑定其声明时所在的作用域。

    var a = 1;

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

    function f(){
        var a = 2;
        x();
    }

    f() // 1

    9、方法的调用

    方法的调用: apply call :调用一个对象的一个方法,以另一个对象替换当前对象。二者的区别在于参数是否为数组

    function Animal(age){
        this.name = "Animal";
        this.showName = function(){
               alert(this.name);
        }
    }

    function Cat(){
        this.name = "Cat";
    }

    var animal = new Animal();

    var cat = new Cat();

    //通过 call 或 apply 方法,将原本属于 Animal 对象的 showName()方法交给对象 cat 来使用了。

    //输入结果为"Cat"

    animal.showName.call(cat,"10");
    // 等同于apply方法中参数为数组
    animal.showName.apply(cat,[10]);

    10、 eval

    执行字符串,将字符串当作语句执行。

    eval('var a = 1;');
    alert(a); // 1

    了解 jsonp 的使用:

    var jsonp = 'foo({id:42})';

    var f = new Function( "foo", jsonp );

    // 相当于定义了如下函数
    /*
    function f(foo) {
        foo({id:42});
    }*/

    //业务处理

    var print=function(json){
        console.log( json.id ); // 42
    }

    f(print);
    //相当于
    function f(print){
        json = {id:42};
    //    print(json);
        console.log(json.id);
    }

    上面代码中,jsonp 是一个字符串,Function 构造函数将这个字符串,变成了函数体。调用该函数的时候,jsonp 就会执行。这种写法的实质是将代码放到函数作用域执行,避免对全局作用域造成影响。(上海尚学堂,原文首发至:公众号 嗨码歌)

  • 相关阅读:
    毕业设计过程复盘
    关于理想
    Python之网络模型与图形绘制工具networkx
    Python之Numpy:二元函数绘制/三维数据可视化/3D
    JavaScript之参数传递方式
    Python之滑动窗口
    [转] JavaScript 原型理解与创建对象应用
    [转] JavaScript 和事件
    [转] 三步将你的 React Native 项目运行在 Web 浏览器上面
    [转] Webpack 入门指迷
  • 原文地址:https://www.cnblogs.com/shsxt/p/11387549.html
Copyright © 2011-2022 走看看