+pink老师的JS教程笔记2+函数 作用域 预解析 对象

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.geek-share.com/detail/2687064800.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

• 点赞
• 收藏
• 分享
• 文章举报

还没吃饱吗 发布了5 篇原创文章 · 获赞 0 · 访问量 359 私信 关注