本文介绍了JavaScript中的函数，包括函数的目的、形参和实参、返回值及其特点。深入讨论了作用域，包括全局变量和局部变量、作用域链以及ES6中的块级作用域。接着解释了预解析的概念，包括变量和函数的提升。最后，文章讲解了JavaScript对象，包括创建对象的多种方式和new关键字的工作原理。
JS 函数
- 能够说出为什么需要函数
- 能够根据语法书写函数
- 能够根据需求封装函数
- 能够说出形参和实参的传递过程
- 能够使用函数的返回值
- 能够使用 arguments 获取函数的参数
函数：封装了一段可以被重复执行调用的代码块
目的：让大量代码可以被重复使用
- 形参和实参
//声明函数 function
function cook(aru) { //形参是接受实参的 aru = '酸辣土豆丝' 形参类似一个变量
console.log(aru);
}
cook('酸辣土豆丝');
| 参数个数 | 说明 |
|---|---|
| 实参等于形参个数 | 输出正确结果 |
| 实参多于形参个数 | 值取到形参的个数 |
| 实参个数小于形参个数 | 多的形参定义为 undefined ，结果为 NaN |
- 函数的返回值return
- 函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名()
- 只要函数遇到 return 就把后面的结果返回给函数的调用者
//正确的函数写法
function getResult() {
return 666;
}
getResult(); // getResult90 = 666
console.log(getResult());
//求任意两数和
function getSum(num1, num2) {
return num1 + num2;
}
console.log(getSum(1, 2));
//求数组中的最大值
function maxfun(arr) { //arr接受一个数组
var max = arr[0];
for (i = 1;i < arr.length;i++) {
if (max < arr[i]) {
max = arr[i];
}
}
return max;
}
//实参送一个数组过去
//用一个变量来接收 函数的返回结果
var re = maxfun([5, 22, 99, 101, 67, 77]);
-
return终止函数
- 后面的代码不会被执行
- 只能返回最后一个值
- 可使用数组返回多个值return [num1 + num2, num1 - num2]
- 函数都有返回值，有 return 则返回对应的值，否则返回 undefined -
break continue return 的区别
- break ：结束当前的循环体（如 for while）
- continue ：跳出本次循环，继续执行下次循环 （如 for while）
- return ： 不仅可以退出循环，还能返回 return 语句中的值，同时还可以结束当前的函数体内的代码
200423补充：
csdn - break continue return exit区别
csdn - 循环结构中break、continue、goto、return和exit的区别
对于return另做研究了 – 累
arguments 的使用
只有函数有arguments 对象
当不确定有多少个参数传递时可以使用 arguments 来获取，它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，存储了所有实参。
- arguments 是一个为数组 可以按照数组的方式进行遍历
- 具有数组的 length 属性
- 按照索引的方式进行存储
- 没有真正数组的一些方法 pop() push() 等
i < arguments.length;
案例
function reversfun(arr) {
var newarr = [];
var j = 0;
for (i = arr.length - 1;i >= 0;i--) {
newarr[j] = arr[i];
// 写复杂了 直接newarr[newarr.length] = arr[i];
j++;
}
return newarr;
}
var giao = reversfun([5, 22, 99, 101, 67, 77]);
//判断是否闰年
function yearsfun(year) {
if (year % 4 == 0 && year %100 != 0 || year %400 == 0) {
return true;
}else{
return false;
}// 或者直接var flag = false; 符合条件则执行flag = true;否则直接返回flag
}
var runnian = yearsfun(1991);
//函数的互相调用
function backDay() {
var year = prompt('nian');
if (yearsfun(year)) {
alert('29');
} else {
alert('28');
}
}
backDay();
- 函数的两种声明方式
- ① 利用函数关键字自定义函数（命名函数）function fn() { } fn();
- ② 函数表达式（匿名函数）
var 变量名 = function() {};
var fun = function(aru) {
console.log('我是函数表达式');
console.log(aru);
}
fun('pink老师');
- fun 是变量名 不是函数名
- 函数表达式声明方式和声明变量差不多，自会不过变量里面存的是匿名函数
- 函数表达式也可以进行传递参数
JavaScript作用域
目标
- 能够说出 js 的两种作用域
- 能够区分全局变量和局部变量
- 能够说出如何在作用域链中查找变量的值
作用域 : 代码名字（变量）在某个范围内起作用和效果 目的是减少命名冲突
-
全局作用域 整个script 标签或者一个单独的js文件
-
局部作用域（函数作用域） 在函数的内部
-
全局变量 在全局作用下使用
在局部变量内没有声明的变量也是全局变量 -
局部变量 在局部作用下（在函数内部），只能在函数内部使用
函数的形参也是局部变量
两个变量的区别
- 全局变量只有在浏览器关闭时才会销毁，比较占内存资源
- 局部变量 当程序执行完毕就会销毁 节约资源
扩展： js 在es6 中新增块级作用域 花括号包裹即为块级作用域
- 作用域链 内部函数访问外部函数表变量采取链式查找的方式 概括为就近原则
JavaScript预解析
目标
- 能够知道解析器运行JS分为哪两部
- 能够说出变量提升的步骤和运行过程
- 能够说出函数提升的步骤和运行过程
JS 解析器在运行js代码时分为两步： 预解析和代码执行。
- 预解析：js 引擎把 js 中所有的 var 和 function 提升到当前作用域的最前面
① 变量预解析（变量提升）：把所有变量声明提升到当前的作用域最前面，不提升赋值操作
console.log(num); //undefined
var num = 10;
//相当于执行了以下代码
var num;
console.log(num);
num = 10;
//函数表达式
fun(); // 报错
var fun = function() {
console.log(22);
}
//相当于执行以下代码
var fun;
fun();
fun = function() {
console.log(22);
}
② 函数预解析（函数提升）：把所有函数声明提升到当前作用域最前面 不提升函数
- 代码执行： 按照代码书写顺序从上往下执行
案例
var num = 10;
fun();
function fun(){
console.log(num); //undefined
var num = 20;
}
看到弹幕里有些扩展 声明变量的三种用法const let varr 下面的评论也很有意思……
https://www.cnblogs.com/ksl666/p/5944718.html
案例预解析 cool~
f1();
console.log(c); // 9
console.log(b); // 9
console.log(a); // undefined
function f1() {
var a = b = c = 9;
//相当于 var a = 9; b = 9; c = 9;
//b 和 c 直接赋值 没有 var声明 作全局变量
//集体声明应用逗号隔开 var a = 9, b = 9, c = 9;
console.log(a); // 9
console.log(b); // 9
console.log(c); // 9
}
JavaScript 对象
目标
-
能够说出为什么需要对象
-
能够使用字面量创造对象
-
能够使用构造函数创建对象
-
能够说出 new 的执行过程
-
能够遍历对象
-
对象 一个具体的事物
对象是一组无序的相关属性和方法的集合，所有事物都是对象，例如字符串、数值、数组、函数等
- 属性 ：事物的特征，在对象中用属性来表示（常用名词）
- 方法： 事物的行为，在对象中用方法来表示（常用动词） -
创建对象的三种方式
- 利用字面量
- 利用 new Object
- 利用构造函数
案例 利用字面量创建对象var coco = { // 属性或方法采用键值对的形式 键 属性名 ： 值 // 多个属性间用逗号隔开 // 方法冒号后面跟的是一个匿名函数 name: 'coco', type: '阿拉斯加', age: 5, color: '棕红色', skills: function() { console.log('hi~'); console.log('showFilm'); } } console.log(coco.age); // 调用对象的属性 对象名.属性名 理解为 的 console.log(coco['type']); // 对象名['属性名'] coco.skills(); // 调用对象的方法 对象名.方法名() 不要遗漏小括号 }
变量 属性 函数 方法 的区别
变量: 单独声明并赋值 使用时直接写变量名
属性： 在对象里不需要声明 使用时必须是 对象.属性
函数：单独声明并且调用 函数名() 单独存在
方法：在对象里 调用时对象.方法
// 变量和属性相同点：都是用来存储数据
// 函数和方法相同点： 都是实现某种功能 做某件事
var num = 10;
var obj = {
age: 18,
fn: function() {
}
}
function fn() {
}
console.log(obj.age);
案例 利用 new Object 创建对象
var obj = new Object(); // 创建了一个空对象
obj.hname = '高东满';
obj.sex = '男'; // 利用等号 = 赋值的方法添加对象的属性和方法，每个属性和方法之间用分号结束
obj.age = '22';
obj.niceM = function() {
console.log('love himself');
}
console.log(obj.hname);
console.log(obj['age']);
obj.niceM();
构造函数：利用函数的方法，重复相同的代码
这个函数与别的不同，因为里面封装的是对象而非普通代码，是把对象中的相同属性和方法抽离出来封装
- 构造函数名首字母要大写
- 构造函数不需要 return 就可以返回结果
- 调用构造函数必须使用 new
- function 构造函数名() {
this.属性 = 值;
this.方法 = function() {}
}
new 构造函数名(); //调用方法
function SuperStar(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.song = function(song) {
console.log(song);
}
}
var gd = new SuperStar('GD', 1988, 'man'); // 调用构造函数 返回的是一个对象
console.log(typeof gd);
案例 利用构建函数创建对象
//构造函数 明星 泛指一大类
function Wangzhe(wname, wtype, wblood, wattack) {
this.name = wname;
this.type = wtype;
this.blood = wblood;
this.attack = wattack;
}
// 对象 特指 具体的事物 某一个
var lianpo = new Wangzhe('廉颇', '力量型', '500血', '近战');
var houyi = new Wangzhe('后裔', '射手型', '100血', '远程');
console.log(lianpo.attack);
console.log(houyi['attack']);
构造函数:如Star()，抽调对象的公共部分封装，泛指一大类（class）
创建对象：过程也称为对象的实例化
- new 关键字
new 在执行函数时会做四件事
- 1. 在内存中创建一个新的空对象
- 2. 让 this 指向这个对象
- 3. 执行构造函数内的代码，给新对象添加属性和方法
- 4. 返回这个新对象（所以构造函数里不需要 return ）
（hhh故事版1. 他俩生了个宝宝；2. 宝宝是亲生的 this 指向；3. 教宝宝读书一肚子墨水；4. 长大挣钱汇报父母。）
- 遍历对象
var obj = {
name: 'pink老师',
age: 18,
sex: 'man',
fn: function (){}
}
// for (变量 in 对象)
for (var k in obj) {
console.log(k); // k 变量 输出得到属性名
console.log(obj[k]); // obj[k] 得到属性值
//按顺序依次输出 属性名 属性值
}
语法：for (变量 in 对象){} 使用 for in 里面的变量一般写 k 或者 key
- 对象小结
- 对象可以让代码结构更清晰
- 对象复杂数据类型 object
- 本质就是一组无序的相关属性和方法的集合
- 构造函数泛指某一大类 如苹果（无论红绿统称苹果）
- 对象示例特质一个事物（如这个苹果）
- for… in 语句用于对对象的属性进行循环操作
偷懒好多天aaaaaaa
扫一扫
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
