zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Bit Manipulation
    218. The Skyline Problem
    Template : Two Pointers & Hash -> String process
    239. Sliding Window Maximum
    159. Longest Substring with At Most Two Distinct Characters
    3. Longest Substring Without Repeating Characters
    137. Single Number II
    142. Linked List Cycle II
    41. First Missing Positive
    260. Single Number III
  • 原文地址:https://www.cnblogs.com/lovely7/p/7205129.html
Copyright © 2011-2022 走看看