JS学习day04--this初认识和函数初认识

break 与 continue

• break 与 continue 都是在循环中，终止循环的操作。
• break 是结束循环，后面的循环都不再执行（本次break后面的代码也不再执行）。
• continue 是结束本次循环，即本次循环中 continue 以后代码都不再执行，直接执行下一次循环。

1、this

this存在于任何地方，它的指向不是在定义的时候确定的，而是在调用的时候确定的

var box = document.getElementById('box');

// 如果函数是被某个元素调用的，这个函数中的this就是这个元素
box.onclick = function () {
  console.log(this); // box
}

2、自定义属性

自定义属性是指给标签添加已有属性的以外的属性，例如div标签id、class这些属性都是已有的，如果再添加一个tag属性，这就是自定义的。

• 自定义属性

var img = document.querySelector('img');
img.tag = true; // 自定义属性

img.onclick = function () {
    // console.log(img.tag);

    if (img.tag) {
        // 开灯
        img.src = 'img/on.png';
    } else {
        // 关灯
        img.src = 'img/off.png';
    }
    img.tag = !img.tag;
}

• 自定义下标

// 一组列表，点击列表项，打出它的下标

var li = document.getElementsByTagName('li');

for (var i = 0; i < li.length; i++) {
    li[i].index = i; // 自定义的属性

    li[i].onclick = function () {
        console.log(this.index);
    }
}

3、函数

1、函数定义

函数声明

// 1、函数声明：function 函数名(){ 代码块 }
// 调用：函数名();

function fn1() {
    console.log('平头哥');
}
fn1();
fn1();

函数表达式

// 2、函数表达式：var 函数名 = function(){ 代码块 }
// 调用：函数名();

var fn2 = function () {
    console.log('平头妹');
}
fn2();

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

// 区别：函数声明可以在声明的前面或后面调用，函数表达式只能在定义的后面调用
fn1();
function fn1() {
    console.log('abc');
}


var fn2 = function () {
    console.log('def');
}
fn2();

2、函数的参数

如果在函数中，出现不能确定的、可变的值，我们会使用函数参数来实现。

• 定义：function 函数名(形参1, 形参2, …) { 要执行的代码 }

• 调用：函数名(实参1, 实参2, …);

• 定义：var 函数名 = function (形参1, 形参2, …) { 要执行的代码 }

• 调用：函数名(实参1, 实参2, …);

形参相当于函数中声明的变量，实参即值

// 如果实参比形参多，则多的也白多，如果实参比形参少，则没有匹配上的形参值为undefined
function fn(a, b) {
    console.log(a, b);
}
fn(3, 5);
fn(7, 8);
fn(4, 5, 6, 7);
fn(10);

3、arguments

arguments : 是函数实参的集合，它是一个对象（类数组、伪数组），有长度，可以通过下标获取某一个

arguments和形参是一一对应的关系。

function fn(a, b) {
    console.log(arguments);
    console.log(arguments[0], a, a === arguments[0]); // 3 3 true
    console.log(arguments[1], b, b === arguments[1]); // 4 4 true
    console.log(arguments.length);
}

fn(3, 4);

案例：求不定参数的和

4、函数中的问题

1、形参和实参个数的问题

• 如果实参比形参少，没有匹配上的形参，值为undefined。
• 如果实参比形参多，超过的实参忽略了。

function fn(a, b) {
    console.log(a);
    console.log(b);
}
fn(2, 3);
fn(2);
fn(2, 5, 6, 7);

2、如果函数同名，后面的覆盖前面的

function fn() {
    console.log(1);
}
fn();

function fn() {
    console.log(2);
}
fn();