JavaScript学习02-函数

函数

函数简介

//特殊的可以执行的对象
//执行函数后，函数内部会形成函数作用域
function change(a, b) {

}
change.name = 'guo';
change.fn = function() {};

//函数作为表达式赋值 可匿名
var fn = function() {

};

//function1只能在fn内部访问到
var fn = function function1() {

};
// 如下执行找不到function1
// console.log(function1);

var a = 12; //赋值语句
function test() {}
//语句不会产生值 例如 if-else while ...
//表达式 会产生一个值
test(12);
//表达式
// <%= a <= b %>

传参

//函数参数
function test(a, b) {
    console.log(a, b);
}
test(1);

//函数内部自动生成的类似数组的对象，
//可用来接受所有传递给该方法的参数
function arg(a, b = 3, obj) {
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    a = '2';
    obj.name = 'guoyunhao';
}
//b的默认值会被覆盖，如果不想覆盖传undefined
a = '1';
obj = {
    name: 'guo'
};

arg(a, 2, obj, 4);
//值传递 number str 而对象是传引用
console.log(a);
console.log(obj);
//匿名函数
(function() {})();

var let作用域

//var *函数级作用域* 不会受代码块影响 let会受影响
//连续var 声明同一个变量是不对的，但是不会报错
//只要有var变量声明的地方，无论放在.js的哪里，都会先声明出来该变量，叫做var变量的提升

var a = 1;
var a = 2;
(function fa() {
    console.log(a);
})();
console.log(a);

//报错
//整个js相当于一个大的函数作用域, 里面的var声明会先加载
//而如果在内部有函数，内部函数内部有var声明，外部是不会得到的
// function fa2() {
//     var k = 2;
// }
// console.log(k);

// let 会受代码块的影响
let b = 3; {
    let b = 2;
    console.log(b);
}
{
    let c = 5;
}
console.log(c);//访问不到

this

//this
//严格模式下 this 不等于全局
// "use strict";

function test() {
    //console.log(this);
    console.log(this == global);
}
test();

//谁调用了函数，函数内this就指向谁
//1.
obj = {
    name: 'guo'
};
obj.fn = test;
obj.fn();
//2.
function fn2(a, b) {
    console.log(this, a, b);
}
//通过函数的call或者apply方法指定this的指向
fn2.call(obj, 1, 2);
fn2.apply(obj, [3, 4]);


//函数的bind方法能生成一个新的函数对象与bind方法参数中的对象绑定
//原函数不会变，只是会被新对象借用调用。
const newFn = fn2.bind(obj);
newFn();


//自定义实现bind函数的效果
fn2.custom_bind = function(context) {
    var fun = this;
    return function() {
        fun.apply(context);
    };
};
const customNewFn = fn2.custom_bind(obj);
customNewFn();


obj2 = {
    name: 'wang'
};
//已经绑定好了，就算再赋值给其他对象也不会改变
//以下函数的this仍然是obj
obj2.fn = customNewFn;
obj2.fn();
const newFn3 = customNewFn.bind(obj2);
newFn3();

返回值

//返回值
//所有函数都有返回值 如果不自定义会隐性返回undefined
function f() {
    return 1;
}
var result = f();
console.log(result);

函数诞生时，即可记住所能记住的一切

//重要！！！：函数诞生时，会记住所能记住的一切

function test() {
    var x = 12;
    return function() {
        console.log(x);
    };
}
//记住了x
let fn = test();
fn();

//函数每次执行都会创建一个全新的作用域
function f(a) {
    let x = --a;
    return function() {
        return x;
    };
}
//f每次调用都是全新的
let n1 = f(12);
let n2 = f(11);
console.log(n1());
console.log(n2());
console.log(n1());
console.log(n2());

箭头函数开个头

//箭头函数

let a = () => console.log("箭头函数");
let b = (a, b) => console.log(a, b);
a();
//相当于c函数 return a + b;
let c = (a, b) => a + b;
let res = c(1, 2);
console.log(res);

let d = a => a + 1;

var obj = {
        name: "guo",
        fun() {
            // return function() {
            //     return this;//全局
            // }
            return () => this;
            //等同于
            // return function() {
            //     return this;
            // }.bind(this);
        }
    }
    //这里的f调用后里面的this 因为用了箭头函数所以是obj本身
    //但是如果用上面的普通的函数返回方法会返回全局
　　 //箭头函数在这里类似bind方法的功能
let f = obj.fun();
console.log(f());

 动态生成函数

//动态生成函数
function fn(a, b，name) {
    console.log(a + b, name);
}

var f = new Function("a", "b", "console.log(a + b);"); //这个方式没法加name，捕获不到上下文

f(1, 2);
fn(1, 2);
var name = 'guo';