ES5-5 参数默认值、递归、预编译、暗示全局变量

1. 参数默认值

  • 默认是undefined
  • 形参可以有默认值,形参、实参哪个有值取哪个ES6,默认值属于ES6的内容,打印出的是符合人性化的结果
  • 形参有默认值,形参、实参无法统一、无论实参传入有值还是undefined(代码表现)
function test(a = 1, b) {console.log(a, b)console.log(arguments[0]) // undefined
}
test(undefined, 1) // 1 1
function test(a = 1, b) {console.log(a, b)// 1 1console.log(arguments[0]) // undefineda = 8console.log(a) // 8console.log(arguments[0]) // undefined
}
test(undefined, 1)
function test(a, b) {console.log(a, b)// 2 1console.log(arguments[0]) // 2a = 8console.log(a) // 8console.log(arguments[0]) // 8
}
test(2, 1)
function test(a, b) {a = 3;console.log(a)  // 3console.log(arguments[0]) // 3
}
test(1, 2)
function test(a = undefined, b) {console.log(a, b)
}
test(1, 1) // 1 1
// 用es5的写法设置默认值
function test(a, b) {a = arguments[0] || 1console.log(a, b) // 1 1
}
test(undefined, 1)
// typeof的方式
function test(a, b) {a = typeof (arguments[0]) === 'undefined'? 1: arguments[0]console.log(a, b)
}
test(undefined, 1) // 1 1

2. 预编译

  1. 检查通篇的语法错误
  2. 预编译的语法错误
  3. 解释一行,执行一行
  • 函数声明,函数整体提升
  • 变量声明,只有声明提升,赋值不提升
    在这里插入图片描述

预编译的流程(函数执行前的步骤)

一、 函数内部

变量优先

  1. 创建AO对象:寻找函数里的形参变量声明提升,添加到AO(活跃对象/函数上下文 activation object)里
  2. 把实参的值赋值给形参
  3. 寻找函数声明,添加到AO
  4. 执行函数(按函数语句走)// 执行时,对于前几步处理过的变量声明、函数声明将跳过
  5. 对于变量重复声明,红宝书的例子(js从来不会告诉你是否多次声明了同一个变量,遇到这种情况,它只会对后续的声明视而不见),不过它执行后续声明中的变量初始化
    =注意-==
function countFn(count) {for (var i = 0; i < count; i++) {console.log(i) // 0 1 2 3 4}var i // 重复 视而不见console.log(i) // 5
}
countFn(5)
function test(a) { // 预编译第一步,将形参添加到AO时var avar aconsole.log(a)  // 1
}
test(1)
// 打印
// f a(){}
// 1
// 1
// f (){}
function test(a) {console.log(a) // fn avar a = 1;console.log(a) // 1function a() { }console.log(a) // 1var b = function () { }console.log(b) // fn function d() { }
}
test(2)
function test(a, b) {console.log(a) // 1c = 0console.log(c) // 0var ca = 5console.log(a) // 5console.log(b) // f b(){}b = 6console.log(b) // 6function b() { }console.log(d) // f d(){}function d() { }console.log(b) // 6console.log(d) // f d(){}
}
test(1)
AO = {a:undefined → 15,b:undefined → f b → 6,c:undefined → 0,d: f d
}

二、全局

  1. 在通篇js执行前,创建GO(global object)全局上下文(即window)
  2. 寻找变量声明
  3. 寻找函数声明
  4. 执行(不要忘记赋值、注意执行顺序)
  • 函数表达式显然是报错,GO里test是变量undefined
    在这里插入图片描述
test()
var test = function () { }
function test2(){}
GO = {test:undefined → f test(){}test2: f test2(){}
}
// 打印
// f a(){}
// undefiendGO = {b:undefineda:fa 
}

在这里插入图片描述
在这里插入图片描述

console.log(b) // undefined
var b = 3;
console.log(b) // 3
console.log(a) // f a(a)
function a(a) {console.log(a) // f a()a() // undefined 5var a = 2;console.log(a) // 2function a() {console.log(b)var b = 5;console.log(b)}
}
a(1)
GO = {b:undefineda:fa(a) 
}
AO = {a:undefined → 1fa()2b:undefined →	
}

在这里插入图片描述

  • 不要混淆:AO内有a,不会再去查找GO里的a
    在这里插入图片描述
  • 预编译不管if语句的,只要有变量声明就要放入AO
  • js中无块级作用域,即使用{}括起来,b也是声明在函数test内部的局部变量,会被添加到执行环境
  • 使用var声明的变量会被自动添加到最接近的环境中
    在这里插入图片描述
function test() {return a;a = 1;function a() {};var a = 2
}
console.log(test()) // f a(){}AO = {a:undefined  → fa
}
function test() {a = 1;function a() { };var a = 2return a
}
console.log(test()) // 2
function test(e) {function e() { }console.log(e); // f e(){}arguments[0] = 2;console.log(e); // 2if (a) {var b = 3}var c;console.log(a); // undefineda = 4;var a;console.log(b); // undefinedf = 5;console.log(c); // undefinedconsole.log(a); // 4
}
var a
test(1)
console.log(f); // 5GO = {a: undefined test: f test(e){...},f: 5 // 在执行test内函数值
}
// 执行test(1)时创建AO
AO = {e:undefined  → 1 → f e(){}2 b: undefined  → c: undefined  → a: undefined → 4
}

暗示全局变量

  • 未用var 声明的b就是暗示全局变量,是window的属性之一
    在这里插入图片描述
function test() {var a = b = 1
// 1. var a
// 2. b = 1 (赋值,没有在function内部声明,是全局变量,存到window)
// 3. a = b (赋值)
}

在这里插入图片描述
在这里插入图片描述

练习

var a = false + 1;
console.log(a) // 1 隐式类型转换
var b = false == 1;
console.log(b) // false

注意运算符优先级&&低于+
运算符优先级

if (typeof (a) && (-true) + (+undefined) + '') {console.log('通过了')  // 通过了} else {console.log('没通过')
}

在这里插入图片描述

if (1 + 5 * '3' === 16) {console.log('通过了') // 通过了
} else {console.log('没通过')
}

在这里插入图片描述

console.log(!!" " + !!'' - !!false || '没通过') // 1

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251206.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ES5-6 作用域、作用域链、预编译、闭包基础

1. 作用域 上一级在执行时&#xff0c;内部函数被定义&#xff0c;内部函数便生成作用域和作用域链&#xff08;拿上一级的环境&#xff09;&#xff0c;内部函数执行前生成自己的AO&#xff0c;并排在头部函数执行结束时&#xff0c;AO被销毁&#xff08;回到被定义时的状态&…

electron 项目的搭建方式,借助 node 和 npm

1&#xff0c;首先确定安装了 node 和 npm 2&#xff0c;创建一个文件夹&#xff0c;如 aa 3&#xff0c;CMD 命令进入到 aa&#xff0c;用 npm 命令初始化一个项目 4&#xff0c; npm -init 根据提示完成配置 5&#xff0c;安装 electron > npm i -D electronlatest, 这一…

ES5-7 立即执行函数、闭包深入、逗号运算符

1. 立即执行函数 定义在全局的函数只有关闭浏览器或者退出程序才会释放IIFE: Immediately-Invoked Function Expression解决页面加载自动执行&#xff0c;执行完成后立即释放&#xff08;避免了只会执行一次的内容一直存在于全局&#xff09;IIFE用匿名函数或者函数声明&#…

redis安装(linux)

一、redis安装步骤 1、yum install gcc 如果你机器已经安装了编译环境请忽略&#xff0c;否则在使用make编译源码时会报错。 报错信息&#xff1a;make: *** [adlist.o] 2、使用wget命令下载包  wget http://download.redis.io/releases/redis-4.0.6.tar.gz 3、解压tar包 tar…

ES5-8 闭包高级、对象、构造函数、实例化

1. 对象 对象内定义的函数一般称之为方法&#xff0c;在外部的函数声明称为函数对象删除属性使用delete 关键字 var obj {a: 1,b: string } console.log(obj, obj) // {a: 1, b: "string"} delete obj.b console.log(obj, obj) // {a: 1}在对象里&#xff0c;this…

es6 --- 使用生成器交替执行

考虑以下场景: var a 1; var b 2;function foo(){a;b b * a;a b 3; }function bar(){b--;a 8 b;b a * 2; }foo(); bar(); console.log(a, b); // 11 22bar(); foo(); console.log(a, b); // 183 180对于上面的两个函数foo和bar,它们中的任何一个,一旦开始了就会…

ES5-9 【utils】构造函数及实例化原理、包装类

1. 构造函数 调用构造函数实际会经历4步 1 创建一个新对象 2 将构造函数的作用域赋值给对象&#xff08;因此this就指向了这个对象&#xff09; 3 执行构造函数中的代码&#xff08;为这个新对象添加属性&#xff09; 4 返回新对象 在构造函数内部&#xff0c;this指向构造函数…

Mysql5.7.20使用group by查询(select *)时出现错误--修改sql mode

使用select * from 表 group by 字段 时报错错误信息说明&#xff1a; 1055 - Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column haha_db.staff.id which is not    functionally dependent on columns in GROUP BY clause; this…

ES5-10 原型、原型链、闭包立即执行函数、插件开发

重学第六章 1. 原型 实例内属性和原型上属性重名时&#xff08;屏蔽&#xff09; function Test(name) {this.name name } Test.prototype.name hhh let tObj new Test(yyy) console.log(tObj.name) // yyy tObj.name null console.log(tObj.name) // null delete tObj.…

性能优化杂记

webpack 开发、生产环境配置不同的webpack配置文件 生产环境删除devServer&#xff08;不需要启webpack devServer&#xff09; 告诉webpack&#xff0c;生产、开发分别要对应哪个配置文件 开发环境下也能看到打包的结果 npm run dev:build npm run dev 只会把打包生产…

算法 --- 冒泡排序、选择排序、插入排序的js实现

冒泡排序: function bubbleSort(arr){let i arr.length;while(i >0){for(let j 0; j< i; j) {let pos 0;if(arr[j] > arr[j1]) {pos j;let temp arr[j];arr[j] arr[j1];arr[j1] temp;}}i pos;}return arr; } var arr [3,44,38,5,47,15,36,26,27,2,46,4,19,5…

appium--每次启动会重新安装的问题(没试过)

有人说加这个 最后 大神说 在appium哪里就可以设置了 对&#xff0c;第一个不勾选就不会安装了【经理】[Java]大连●Messi_Z(726862194) 15:54:10把这些东西全去掉就好了转载于:https://www.cnblogs.com/kaibindirver/p/8205031.html

爬虫从入门到放弃 - 纯新手学习-爬虫基本原理

1.什么是爬虫&#xff1f; 请求网站并提取数据的自动化程序 请求&#xff1a;客户端向服务端发送请求获得网页资源&#xff0c;是一段html代码&#xff0c;包含html标签和一段信息。 提取&#xff1a;提取出想要的信息&#xff0c;然后将结构化的数据存储到文本 自动化&#xf…

ES5-11原型与原型链深入、对象继承

原型 谁调用&#xff0c;this就指向谁&#xff0c;当实例对象有该属性时&#xff0c;不会去原型上查找 创建对象的两种方法&#xff1a;字面量、new Object&#xff08;&#xff09;一般不用后面的二者创建出来的对象没有差异 Object.create() var 实例 Object.create(对象…

算法 --- 希尔排序、归并排序、快速排序的js实现

希尔排序: function shellSort(arr) {let len arr.length;let temp, gap 1;while(gap < len/3) {gap gap*3 1}while(gap >1) {for(let i gap;i< len; i) {temp arr[i];for( var j i-gap; j> 0 && arr[j] > temp; j - gap) {arr[j gap] arr[j];}…

ES5-12 【utils】继承深入、call、apply、圣杯模式、模块化

继承深入 这两种方式继承不够合理&#xff08;为什么&#xff09; 将实例作为子类的原型 在子类的构造函数内部借用父类的构造函数 将父类的原型作为子类的原型&#xff08;会修改父类的原型&#xff09; css圣杯布局&#xff08;左右宽度固定、中间自适应&#xff09…

vue实现星级评价效果

希望对你们有用&#xff0c;已经自己试过可以的才发布出来的 效果如下&#xff1a; html&#xff1a; <template> <div class"evaStar"> <ul class"star"> <li v-for"(itemClass,index) in itemClasses" :class"itemC…

算法 --- 二叉树查找树的先序(中序、后序)遍历的js实现

结点: function Node(data, left, right) {this.data data;this.left left;this.right right;this.show show; }显示树的数据: function show(){return this.data; }二叉查找树: // Binary Search Tree function BST(){this.root null;this.insert insert; }添加结点到…

ES5-13 对象属性遍历、this、callee、caller

链式调用 在每个函数内部return this 访问对象属性 点语法[]中括号内是字符串或是变量 数组是特殊的对象 对象属性遍历 for in(遍历对象或数组) - 不必再用Object.keys那么麻烦了 for(var key in obj){console.log(obj[key])// obj.key返回undefined// 因为js引擎会转换为…

算法 --- 顺序查找、二分查找的js实现

顺序查找: function seqSearch(arr, data) {for(let i 0; i< arr.length;i) {if(data arr[i]) {return i;}}return -1 } var arr[3,44,38,5,47,15,36,26,27,2,46,4,19,50,48]; console.log(seqSearch(arr, 15))二分查找: function binSearch(arr, data) {let low 0;let…