• 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>
  • 相关阅读:
    centos8上安装中文字符集
    python使用p12个人证书发送S/MIME加密,签名邮件
    linux 下如何获取 cpu 温度
    [官网]Apache Log4j2 最新版安全提示 2.17.0
    电子书下载:Beginning Windows Phone 7 Development
    沙发的含义
    电子书下载:Windows Phone 7 Developer Guide: Building connected mobile applications with Microsoft Silverlight
    电子书下载:The Rails 3 Way, 2nd Edition
    Enfocus Pitstop 7.52 汉化破解版安装
    电子书下载:Professional Flash Mobile Development: Creating Android and iPhone Applications
  • 原文地址:https://www.cnblogs.com/lovely7/p/7205129.html
Copyright © 2020-2023  润新知