js语言基础练习（二）---------------函数的高级（了解），类和对象（重点）

函数基本知识总结：

1函数就是可以重复执行的代码

2.组成：参数、功能、返回值

3为什么要用函数，因为一部分代码的使用次数会汗多，封装起来，需要的时候调用

4函数不调用不执行

5同名函数会覆盖，后面的会覆盖前面的

6函数名等于整个函数

7 加载函数的时候只加载函数名，不加载函数体

8参数相当于局部变量

9两个平级的函数中变量不会相互影响

10 预解析：函数在解释文档的时候会被整体提到文档的最前面

函数高级+对象

目标：会自己定义一个构造函数，创建自定义对象。

函数高级    不需要重点记忆

1.

匿名函数（了解）

没有名字的函数，不需要定义函数名的时候，书写简便。有自己的调用方法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    //匿名函数。 只定义不执行会报错？
   // (function (){
   //     console.log(1);
   // })

    //调用方法：（了解）
    //1.直接调用
    (function (){
        console.log(1);
    })();

    //2.绑定事件，会经常用到
    document.onclick = function () {
        alert(1);
    }

    //3.定时器 
    setInterval(function () {
        console.log(444);
    },1000);

</script>
</body>
</html>

2.

函数是一种类型（了解）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //函数也是一种数据类型。但是，归根结底，他还是属于object。
    var str = "abc";
    var num = 111;
    var boo = true;
    var aaa;
    var bbb = null;//对象类型
    var arr = [];//对象类型

    function fn(){
        alert(1);
//        return 111;
    }

    console.log(typeof str);
    console.log(typeof num);
    console.log(typeof boo);
    console.log(typeof aaa);
    console.log(typeof bbb);
    console.log(typeof arr);
    console.log(typeof fn);
    // function
    console.log(typeof fn());
    // undefined ，fn（）是函数执行的返回值

</script>
</body>
</html>

3.

递归（了解）就是函数自己调用自己，必须有跳出条件。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //递归是一种思想：类似于我们的计数器，开闭原则。
    //递归的实质就是函数自己调用自己。
    //递归注意点：递归必须有跳出条件，否则是死循环。
    var i = 1;

    fn();

    function fn(){
//        alert("从前有座山，山里有座庙...");
//        i++;
//        alert(i);
//        if(i>3){
//            return;
//        }
//        fn();
        alert("从前有座山，山里有座庙...");
        i++;
        alert(i);
        if(i<3){
            fn();
        }
    }


</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script>

    //用递归求1+100和。
    alert(getSum(100));

    function getSum(n){
        //跳出条件
        if(n<1){
            return 0;
        }
        //累加
        return n + getSum(n-1);
    }

//    getSum(100) = 100 + 99 + 98+ ...+1+0;

//    function getSum(n){
//        //跳出条件
//        if(n<1){
//            return 0;
//        }
//        //累加
//        return 100 + 99+...+1+0;
//    }

</script>


</body>
</html>

4.

函数作为参数 （会用）回调函数，经常用

传递规则的时候使用回调函数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    //执行函数就等于：函数名+();   整个函数+();
//    fn();
//    (function(){})()

    fn(test);
    //回调函数:函数作为参数进行传递和使用。函数调用别的函数
    // 传递函数名，就是传递整个函数
    function fn(demo){
        demo();
        // 函数名（）代表执行函数
//        test();
    }

    function test(){
        console.log("我是被测试的函数！");
    }


</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //什么情况下，使用回调函数？
    //回调函数一般是用于定义一个规则来使用的。
    //规则的传递只能通过函数实现。通过变量无法达成。所以我们需要传递规则的时候必须使用回调函数。
    console.log(fn(10,5,test1));
    console.log(fn(10,5,test2));
    console.log(fn(10,5,test3));
    console.log(fn(10,5,test4));


    function fn(num1,num2,demo){
        return demo(num1,num2);
    }

    //定义四个规则：加减乘除
    function test1(a,b){
        return a+b;
    }
    function test2(a,b){
        return a-b;
    }
    function test3(a,b){
        return a*b;
    }
    function test4(a,b){
        return a/b;
    }


</script>
</body>
</html>

 1.学习对象的好处

为什么使用对象：方便

把大象装冰箱

把100万头大象装冰箱

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //1.生活中。（找对象）
    //2.编程中。(封装信息)
    function printStuInfo(name,age,address){
        console.log(name);
        console.log(age);
        console.log(address);
    }

    function printStuInfo(student){
        console.log(student.name);
        console.log(student.age);
        console.log(student.address);
    }
</script>
</body>
</html>

面向过程：

面向对象：广义、

狭义封装成一个个的小对象，传递数据

 2.什么是对象

对象：生活中具有唯一性的事物。

属性+方法

对象中的变量，对象中的函数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    //生活中。一类事物和对象的区别。（对象是指具有唯一性的事物）
    //游戏中。有特指的事物是对象。
    //程序中。

    var hero = new Object();
    //自定义属性--状态
    hero.money = 10000;
    hero.level = 6;

    //方法---行为。
    hero.attack = function () {
        console.log("攻击了水晶！");
    }

    console.log(hero);
    console.log(hero.money);
    console.log(hero.level);
    hero.attack();

    //属性和方法：状态（名词）和行为（动词）。

</script>
</body>
</html>

3.构造函数创建对象，重点。

 a）自定义对象（单个对象）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    //需求：单个自定义对象。
    //缺点：传单单个对象的时候还好，创建多个多线的时候变得非常繁琐
    //for循环创建多个对象不能修改名字的值。函数也可以创建多个对象。
    var student = new Object();

//    console.log(student);
    student.name = "张三";
//    student.age = 18;
//    student.address = "辽宁省铁岭市莲花乡池水沟子";
    student.sayHi = function () {
        console.log(this.name+"说：大家好！");
        // 对象中的this代表对象本身
    }

    console.log(student.name);
    student.sayHi();


</script>
</body>
</html>

b）自定义对象（多个对象）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    //需求：多个自定义对象。
    //缺点：代码冗余，方式比较low。当我们创建空白对象的时候：new Object();
    //利用构造函数自定义对象。

    var stu1 = createSudent("张三");
    var stu2 = createSudent("李四");
    console.log(stu1);
    stu1.sayHi();
    console.log(stu2);
    stu2.sayHi();
    //创建一个函数
    function createSudent(name){
        var student = new Object();
        student.name = name;
        // student的属性   局部变量（形参的name）
        student.sayHi = function () {
            console.log(this.name+"说：大家好！");
        }
        return student;
    }


</script>
</body>
</html>

3.自定义对象（利用构造函数）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    //需求：多个自定义对象。
    //缺点：代码冗余，方式比较low。当我们创建空白对象的时候：new Object();
    //利用构造函数自定义对象。

    var stu1 = new Student("王五");
    // new stu（）创建一个对象，不需要return
    var stu2 = new Student("赵六");

    console.log(stu1);
    stu1.sayHi();

    console.log(stu2);
    stu2.sayHi();

//    console.log(typeof stu1);
//    console.log(typeof stu2);

    //创建一个构造函数，首字母大写。创建对象终极版
    function Student(name){
        //构造函数中的对象指的是this。
        this.name = name;
        this.sayHi = function () {
            console.log(this.name+"说：大家好！");
        }
    }
</script>
</body>
</html>

4.this和new

this
一、this只出现在函数中。
二、谁调用函数，this就指的是谁。
三、new People(); People中的this代指被创建的对象实例。等同于把this设置为当前对象

var aaa = new Object();
new
1.开辟内存空间，存储新创建的对象（ new Object() ）
2.把this设置为当前对象
3.执行内部代码，设置对象属性和方法
4.返回新创建的对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    var aaa = new stu();
    // 存储新创建的对象，返回新创建的对象
    console.log(aaa);
    aaa.say();

    function stu(){
        this.say = function () {
            console.log(this);
            //2.把this设置为当前对象 把this指向当前对象
        }
    }


</script>
</body>
</html>

5.属性绑定，扩展

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

    var stu = new Object();
    var aaa = "age";
// 属性绑定1；对象名.属性  2.对象名[变量/字符串/值]

    //对象名.属性
    stu.name = "拴柱";
//    stu.aaa = 19;  绑定的是aaa stu{name：拴住，aaa：19}
    //对象名[变量]   对象名[值]
    stu[aaa] = 20;
    // stu{name：拴住，age}
    stu[0] = "你好";
    // stu{0：你好；name，age}

    console.log(stu);

//    var　arr = [1,2,3];
//    arr[0] = 4;


</script>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lovely7/p/7205129.html