JavaScript基础 三

发布于 2020-11-11  54 次阅读


函数

/*
function [函数名]([参数1,参数2,。。。。]){
    // 函数体 代码块
    

[return 值]

} */ /* 1. 函数声明 function 函数名(){} 2. 函数表达式 var 变量名 = function [函数名](){} */ function fn1 (){ console.log(1); } var fn2 = function(){ console.log(2); } fn1(); fn2(); /* 调用: 函数名() 直接调用函数(非事件调用) el.onclick = 函数名; 事件调用 */ /* el.onclick = function(){} //匿名函数 */

函数传参

/* fn 函数 计算两个数值的结果 */
function fn(a,b){
    console.log(a,b);
}
fn(1,2);
/*
    function fn(a,b){ //形参 定义函数中要接收的数据

    }
    fn(1,2);



形参
    形式上的参数
    函数定义的时候,写在小括号中
    形参的命名规则,要符合变量的命名规则
    形参是在函数的内部声明的变量,默认值为undefined
    形参用来接收实参的值
    形参只能在函数中使用


实参
    实际参入的参数
    在调用函数时,写在小括号中
    把实参赋值给形参
*/

// 什么情况下需要用到传参
// 当我们要执行的代码中,有两段(及以上)代码块,功能和结构相似,就可以把他们写到一个函数中,然后把不一样的地方,抽离使用参数传递进去

//不定参
/* 计算商品总价格 */
function fn(){
    var nub = "";
    for(var i = 0; i < arguments.length; i++){
            nub += arguments[i];    
    }
    console.log(nub);
}    
fn("a","b","c","b");
/*
arguments 不定参(可变参)
    实参的个数不固定,不确定的时候
    arguments是函数实参的集合、类数组

类数组
        和数组有一些相同的特性,不具备数组的全部的特性
        相同特性:
            结构相同 []
            具有length属性 
            使用下标获取
        不相同特性:
            类数组没有数组的方法

*/

//返回值
function fn(){
    var a = 10;
    return a; 
}    
var b = fn();
console.log(b);
/*
    函数的执行结果就是函数的返回值

    每一个函数被调用后都有一个返回值
    1. 调用后默认为undefined
    2. 使用return返回值

*/

function fn(){
    var a = 10;
    return function(){
        return a;
    }; 
}    
var b = fn()();
console.log(b);


//使用 return注意事项
function fn(){
    return 10;
    alert(1);
}    
fn();
/*
    关键字return
        a. 只能在函数中使用
        b. 函数调用后返回return后面的值
            如果return后没有值,函数返回值为undefined
        c. return之后的代码终止执行
*/

函数的调用

function fn(){
    var a = 0;
    a++;
    console.log(a);
}

fn();// 1 
fn();// 1
fn();// 1
// 注意函数的每次调用执行,就相当于新写了一个函数和上次 没有任何关系

获取计算后样式

function id(id){
    return document.getElementById(id);
}

var box =id("box");

console.log(getComputedStyle(box)["backgroundColor"]);
/*
    getComputedStyle() //获取计算后样式

    接受参数:是要获取样式的对象
    返回值:    object,计算后样式的集合对象
        如果要获取具体的样式可以使用 属性获取
*/    
function id(id){
    return document.getElementById(id);
}

var box =id("box");

function getStyle(el,attr){
    return getComputedStyle(el)[attr];
}
console.log(getStyle(box,"width"));

js预解析

var a;
/*
    js预解析

        var js 正常解析之前,会先快速把 script(或者function) 中的 var 声明,及声明的名字,提升到代码块(作用域)的最前边

        function 正常解析之前,会先快速把 script(或者function) 中的 function 及内容,提升到代码块(作用域)的最前边,跟在 var 声明之后.

    预解析之后,js 再会从上到下 一行一行去执行
*/    
alert(a);
a = 0;
function a() {
    alert(1);
}

/*
被预解析之后的样式:
    var a;
    var a;
    function a () {var b = 1;}
    console.log(a);
    a = 10;
    console.log(a);
    console.log(a);
    a = function(){var b = 2;}
    console.log(a);
*/

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

作用域

/*
    作用域
        作用域(scope),程序设计概念,通常来说,一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性,增强程序的可靠性,减少名字冲突

    作用域,一条数据可以使用的范围,就是这条数据的作用域
        全局作用域(window)
        局部作用域(函数作用域)

        块级作用域(ES6新增)
*/

局部作用域

/*
    局部作用域(函数作用域):
        声明在函数内部的数据(参数,函数,变量),就只能在这个函数内部进行调用和修改,那这些数据我们就叫做这个函数的局部数据(或者私有数据),同样,对于这些数据他们起作用的范围也只是这个函数内部,这数据的作用范围是局部,所以又叫做局部作用局或者函数作用局
*/
function fn(b){
    var a = 0;
    console.log(a);
    a = 10;
    console.log(a);
}
function fn2(){
    alert(a);
}
fn();
fn2();

全局作用域

var a = 0;

function fn(){
    a = 10;
}    
function fn2(){
    console.log(a);
}
fn();
fn2();
/*
    声明在任何函数之外,那这条数据,就可以在全局的任意地方使用,它的作用范围时全局的,所以叫全局作用域,这条数据我们也叫全局变量
*/

function fn(){
    a = 10;
    /* 当一个变量,没有声明,js会认为 它是 window 的属性 */
}    
function fn2(){
    console.log(a);
}
fn();
fn2();

window

a = 10;
console.log(window.a);
/*
    在 js 中,在调用 window 的属性时,window 可以省略不写

    代码中任何地方都能访问到的拥有全局作用域,有以下情况:
        1.  声明在任何函数之外,那这条数据,就可以在全局的任意地方使用,它的作用范围时全局的,所以叫全局作用域,这条数据我们也叫全局变量
        2.  不使用var声明直接赋值的变量拥有全局作用域
        3.  所有 window 对象的属性拥有全局作用域
*/    

一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。