首页 > 代码库 > js语言基础练习（二）---------------函数的高级（了解），类和对象（重点）
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>
js语言基础练习（二）---------------函数的高级（了解），类和对象（重点）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。