day10
2021/11/5 6:12:17
本文主要是介绍day10,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
01.返回值.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> /* * 创建一个函数,用来计算三个数的和 * * 可以使用 return 来设置函数的返回值 * 语法: * return 值 * * return后的值将会作为函数的执行结果返回, * 可以定义一个变量,来接收该结果 * * 在函数中return后的语句都不会执行 * * 如果return语句后不跟任何值就相当于返回一个undefined, * 如果函数中不写return,则也会返回undefined * * return后可以跟任意类型的值 * */ function sum(a , b , c){ //alert(a + b +c); var d = a + b + c; return d; //return undefined; } //调用函数 //变量result的值就是函数的执行结果 //函数返回什么result的值就是什么 var result = sum(4,7,8); var result = alert("hello"); console.log("result = "+result); </script> </head> <body> </body> </html>
02.练习.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 定义一个函数,判断一个数字是否是偶数,如果是返回true,否则返回false */ function isOu(num){ return num % 2 == 0; } var result = isOu(15); //console.log("result = "+result); /* * 定义一个函数,可以根据半径计算一个圆的面积,并返回计算结果 * 3.14*r*r */ function mianji(r){ return 3.14*r*r; } result = mianji(5); //console.log("result = "+result); /* * 创建一个函数,可以在控制台中输出一个人的信息 * 可以输出人的 name age gender address * * 实参可以是任意的数据类型,也可以是一个对象 * 当我们的参数过多时,可以将参数封装到一个对象中,然后通过对象传递 */ function sayHello(o){ //console.log("o = "+o); console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人"+",我住在"+o.address); } //sayHello("猪八戒",28,"高老庄","男"); //创建一个对象 var obj = { name:"孙悟空", age:18, address:"花果山", gender:"男" }; //sayHello(obj); /* * 实参可以是一个对象,也可以是一个函数 */ function fun(a){ console.log("a = "+a); //a(obj); } fun(sayHello); // fun(function(){alert("hello")}); // fun(mianji(10)); /* * mianji() * - 调用函数 * - 相当于使用的函数的返回值 * * mianji * - 函数对象 * - 相当于直接使用函数对象 */ </script> </head> <body> </body> </html>
03.return.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function fun(){ alert("函数要执行了~~~~"); for(var i=0 ; i<5 ; i++){ if(i == 2){ //使用break可以退出当前的循环 //break; //continue用于跳过当次循环 //continue; //使用return可以结束整个函数 //return; } console.log(i); } alert("函数执行完了~~~~"); } //fun(); /* * 返回值可以是任意的数据类型 * 也可以是一个对象,也可以是一个函数 */ function fun2(){ //返回一个对象 return {name:"沙和尚"}; } var a = fun2(); //console.log("a = "+a); function fun3(){ //在函数内部再声明一个函数 function fun4(){ alert("我是fun4"); } //将fun4函数对象作为返回值返回 return fun4; } a = fun3(); //console.log(a); //a(); //fun3()(); /* * 此处如果直接调用fun4,则会报错 */ </script> </head> <body> </body> </html>
04.立即执行函数.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //函数对象() /* * 立即执行函数 * 函数定义完,立即被调用,这种函数叫做立即执行函数 * 立即执行函数往往只会执行一次 */ /*(function(){ alert("我是一个匿名函数~~~"); })();*/ (function(a,b){ console.log("a = "+a); console.log("b = "+b); })(123,456); </script> </head> <body> </body> </html>
05.对象.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 创建一个对象 */ var obj = new Object(); //向对象中添加属性 obj.name = "孙悟空"; obj.age = 18; //对象的属性值可以是任何的数据类型,也可以是个函数 obj.sayName = function(){ console.log(obj.name); }; function fun(){ console.log(obj.name); }; //console.log(obj.sayName); //调方法 obj.sayName(); //调函数 //fun(); /* * 函数也可以成为对象的属性, * 如果一个函数作为一个对象的属性保存, * 那么我们称这个函数是这个对象的方法 * 调用这个函数就说调用对象的方法(method) * * 但是它只是名称上的区别,没有其他的区别 * */ var obj2 = { name:"猪八戒", age:18, sayName:function(){ console.log(obj2.name); } }; obj2.sayName(); </script> </head> <body> </body> </html>
06.枚举对象中的属性.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> // var obj = { // name:"孙悟空", // age:18, // gender:"男", // address:"花果山" // }; //枚举对象中的属性 //使用for ... in 语句 /* * 语法: * for(var 变量 in 对象){ * * } * * for...in语句 对象中有几个属性,循环体就会执行几次 * 每次执行时,会将对象中的一个属性的名字赋值给变量 */ // for(var n in obj){ // console.log("属性名:"+n); // // console.log("属性值:"+obj[n]); // } for(var n in document){ console.log("属性名"+n); console.log("属性值"+document[n]); } </script> </head> <body> </body> </html>
07.作用域(Scope).html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 作用域 * - 作用域指一个变量的作用的范围 * - 在JS中一共有两种作用域: * 1.全局作用域 * - 直接编写在script标签中的JS代码,都在全局作用域 * - 全局作用域在页面打开时创建,在页面关闭时销毁 * - 在全局作用域中有一个全局对象window, * 它代表的是一个浏览器的窗口,它由浏览器创建我们可以直接使用 * - 在全局作用域中: * 创建的变量都会作为window对象的属性保存 * 创建的函数都会作为window对象的方法保存 * - 全局作用域中的变量都是全局变量, * 在页面的任意的部分都可以访问得到 * * 2.函数作用域 * */ var a = 10; var b = 20; //var c = "hello"; //console.log(window.c); function fun(){ console.log("我是fun函数"); } //window.fun(); //window.alert("hello"); var obj={ name:"宋世炜", sex:"男", age:21 } // console.log(window.obj.name); </script> </head> <body> </body> </html>
08.变量的声明提前.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 变量的声明提前 * - 使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值), * 但是如果声明变量时不使用var关键字,则变量不会被声明提前 * * 函数的声明提前 * - 使用函数声明形式创建的函数 function 函数(){} * 它会在所有的代码执行之前就被创建,所以我们可以在函数声明前来调用函数 * 使用函数表达式创建的函数,不会被声明提前,所以不能在声明前调用 */ /*console.log("a = "+a); var a = 123;*/ //fun(); //函数声明,会被提前创建 function fun(){ console.log("我是一个fun函数"); b=5; } //函数表达式,不会被提前创建 var fun2 = function(){ console.log("我是fun2函数"); a=3; }; // 试一下:此处如果不调用fun2,则后面console.log(a);会不会报错? 答案:会! // 试一下:此处如果不调用fun,则后面console.log(b);会不会报错? 答案:会! fun2(); fun(); console.log(a); console.log(b); </script> </head> <body> </body> </html>
09.函数作用域.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 函数作用域 * - 调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁 * - 每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的 * - 在函数作用域中可以访问到全局作用域的变量 * 在全局作用域中无法访问到函数作用域的变量 * - 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用 * 如果没有则向上一级作用域中寻找,直到找到全局作用域, * 如果全局作用域中依然没有找到,则会报错ReferenceError * - 在函数中要访问全局变量可以使用window对象 */ //创建一个变量 var a = 10; function fun(){ var a = "我是fun函数中的变量a"; var b = 20; //console.log("a = "+a); function fun2(){ console.log("a = "+window.a); } fun2(); } //fun(); // console.log("b = "+b); /* * 在函数作用域也有声明提前的特性, * 使用var关键字声明的变量,会在函数中所有的代码执行之前被声明 * 函数声明也会在函数中所有的代码执行之前执行 */ function fun3(){ fun4(); //console.log(a); var a = 35; function fun4(){ alert("I'm fun4"); } } fun3(); var c = 33; /* * 在函数中,不使用var声明的变量都会成为全局变量 */ function fun5(){ //console.log("c = "+c); //c = 10; //d没有使用var关键字,则会设置为全局变量 d = 100; } fun5(); //在全局输出d //console.log("d = "+d); var e = 23; /* * 定义形参就相当于在函数作用域中声明了变量 */ function fun6(e){ alert(e); } fun6(); </script> </head> <body> </body> </html>
10.debug.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> alert(d); var a = 10; var b = "hello"; c = true; function fun(){ alert("hello"); } var d = 35; </script> </head> <body> </body> </html>
11.this.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 解析器在调用函数每次都会向函数内部传递进一个隐含的参数, * 这个隐含的参数就是this,this指向的是一个对象, * 这个对象我们称为函数执行的 上下文对象, * 根据函数的调用方式的不同,this会指向不同的对象 * 1.以函数的形式调用时,this永远都是window * 2.以方法的形式调用时,this就是调用方法的那个对象 */ function fun(){ //console.log("a = "+a+", b = "+b); console.log(this.name); } //fun(); //创建一个对象 var obj = { name:"孙悟空", sayName:fun }; var obj2 = { name:"沙和尚", sayName:fun }; //console.log(obj.sayName == fun); // true var name = "全局的name属性"; //obj.sayName(); //以函数形式调用,this是window //fun(); //以方法的形式调用,this是调用方法的对象 //obj.sayName(); obj2.sayName(); </script> </head> <body> </body> </html>
12.this.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //创建一个name变量 var name = "全局"; //创建一个fun()函数 function fun(){ console.log(this.name); } //创建两个对象 var obj = { name:"孙悟空", sayName:fun }; var obj2 = { name:"沙和尚", sayName:fun }; //我们希望调用obj.sayName()时可以输出obj的名字 //obj.sayName(); obj.sayName(); </script> </head> <body> </body> </html>
13.对象.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 创建一个对象 */ var obj = { name:"孙悟空", age:18, gender:"男", sayName:function(){ alert(this.name); } }; /* * 使用工厂方法创建对象 * 通过该方法可以大批量地创建对象 */ function createPerson(name,age,gender){ //创建一个新的对象 var obj = new Object(); //向对象中添加属性 obj.name = name; obj.age = age; obj.gender = gender; obj.sayName = function(){ alert(this.name); }; //将新的对象返回 return obj; } /* * 用来创建狗的对象 */ function createDog(name , age){ var obj = new Object(); obj.name = name; obj.age = age; obj.sayHello = function(){ alert("汪汪~~"); }; return obj; } var obj2 = createPerson("猪八戒",28,"男"); var obj3 = createPerson("白骨精",16,"女"); var obj4 = createPerson("蜘蛛精",18,"女"); /* * 使用工厂方法创建的对象,使用的构造函数都是Object * 所以创建的对象都是Object这个类型, * 就导致我们无法区分出多种不同类型的对象 */ //创建一个狗的对象 var dog = createDog("旺财",3); console.log(dog); console.log(obj4); </script> </head> <body> </body> </html>
14.构造函数.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <script type="text/javascript"> /* * 创建一个构造函数,专门用来创建Person对象的 * 构造函数就是一个普通的函数,创建方式和普通函数没有区别 * 不同的是构造函数习惯上首字母大写 * * 构造函数和普通函数的区别就是调用方式的不同 * 普通函数是直接调用,而构造函数需要使用new关键字来调用 * * 构造函数执行流程: * 1.立刻创建一个新的对象 * 2.将新建的对象设置为函数中的this,在构造函数中可以使用this来引用新建的对象 * 3.逐行执行函数中的代码 * 4.将新建的对象作为返回值返回 * * 使用同一个构造函数创造的对象,我们称为一类对象,也将一个构造函数成为一个类 * 我们将通过一个构造函数创建的对象,称为是该类的实例 * * this的情况 * 1.当以函数的形式调用时,this是window * 2.当以方法的形式调用时,谁调方法,this就是谁 * 3.当以构造函数的形式调用时,this就是新创建的那个对象 */ function Person(name ,age ,gender){ this.name=name; this.age=age; this.gender=gender; this.sayName=function(){ alert(this.name); } } function Dog(){ } var dog = new Dog(); var per = new Person("孙悟空",18,"男"); var per2 = new Person("玉兔精",16,"女"); var per3 = new Person("奔波霸",38,"男"); console.log(per.name); // console.log(per); // console.log(dog); /* * 使用instanceof可以检查一个对象是否是一个类的实例 * 语法: * 对象 instanceof 构造函数 * 如果是,则返回true,否则返回false */ //console.log(per instanceof Person); //console.log(dog instanceof Person); /* * 所有的对象都是Object的后代 * 所以任何对象和Object做instanceof检查时都会返回true */ //console.log(per instanceof Object); //console.log(dog instanceof Object); </script> </head> <body> </body> </html>
这篇关于day10的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)