JavaScript高级 笔记
1. 预编译
1.1 全局对象(GO对象) window
js引擎会整合所有<script>标签中的内容, 产生window对象
全局变量: 全局对象的一个属性
全局函数: 全局对象的一个方法
1.2 局部对象AO/活动对象AO
函数被调用时产生,保存当前函数内部的执行环境。方法执行完后, 局部对象就消失
局部变量: 是局部对象的一个属性
局部函数: 是局部对象的一个方法
1.3 全局预编译
全局环境下(script标签下),js引擎的预处理方式
步骤
1. 生成GO对象(window对象)
2. 查找所有变量的声明,变量名作GO对象属性名,值为undefined
3. 查找所有函数的声明,函数名作GO对象属性名,属性值为function
同名的变量和函数,函数的优先级高
1.4 函数预编译
调用函数之前会做一个函数的预编译
步骤
1. 调用那一刻,为函数生成一个AO对象
2. 查找函数形参和局部变量的声明,作为AO属性名,值为undefined
3. 实参值赋给形参
4. 找到局部函数的声明,函数名作AO对象属性名,属性值为function
局部函数 > 实参 > 形参和局部变量
2. 作用域
2.1 全局作用域
script标签产生的区域,window对象管控的区域
全局的变量和函数浏览器关闭的时候销毁
2.2 局部作用域 function () { }
函数对象 管控区域
局部变量和函数 在函数执行完成后销毁
2.3 块级作用域 { let a = 1; }
if、for 管控的 {} 区域
let
2.4 作用域链
内部可以访问外部
使用数组存放,栈结构(上端进出,元素压栈进去,先产生的在下面)
本质
是一个数据结构,函数内部可以嵌套函数,每一次嵌套形成一个作用域,串起来就形成作用域链
每个函数内部都的【scopes】属性,代表函数的作用域链,代表函数执行时所存在的执行环境(含每个作用域中的变量、局部函数)
console.dir(a); //打印函数内部结构(含scopes属性)
分别代表:
0 bAO
1 aAO
2 GO
断点调试
2.5 变量取值原则
就近原则,当前作用域中没有 就找上一层,依次往上找,都没有就报错
3. 原型
实例成员 this添加的成员
静态成员 在构造函数本身上添加的成员,通过构造函数名访问
原型对象prototype: 构造函数的一个静态成员属性 Star.prototype
对象的原型: 对象的一个属性 ldh.__proto__
原型对象与对象的原型,指向同一个对象,都有一个属性constructor(指向构造函数本身)
原型链
概念
实例对象的__proto__属性,指向的构造函数的原型对象。
(也是一个对象,也有__proto__属性),再一层一层往上找就形成原型链
作用
1. 当实例对象调用方法,先在自身的this中的方法找
2. 没有的话,通过__proto_找原型对象,看原型对象里有无定义
3. 没有的话,通过原型对象的__proto__再到上一层
4. 一直找到object都没有,则报错
__proto__ 对象原型的存在,就是为对象成员的查找机制提供了一个方向
this指向
构造函数和原型对象中的this 都指向当前创建的对象
应用(为js数组Array扩展sum方法)
Array.prototype.sum = function(){console.log(this); //this代表这个数组对象var total = 0for(var i=0; i<this.length; i++){//当前数组长度total += this[i] //当前数组某个值}return total
}
4. 函数进阶
4.1 定义总结
- 命名函数
function f1() { }
- 匿名函数
var f2 = function () { }
new Function(参数1,参数2,函数体)
var f3 = new Function('num1','num2','console.log(num1+num2)')
4.2 调用总结
命名函数 函数名调用 function f1() { }
匿名函数 变量名调用 var f2 = function (){ }
对象的方法 对象
var obj = { eat: function(){ } }
obj.eat();
构造函数 对象
function Student() { }
var stu1 = new Student()
绑定事件函数 事件对象调用 btn.onclick = function(){ }
定时器函数 自动调用 setInterval(function(){ }, 1000)
立即执行函数 立即调用
(function(num){
console.log('ccc'+num);
})(100)
4.3 this的指向总结
命名函数 window
匿名函数 window
对象的方法 实例对象
构造函数 实例对象
构造函数和原型对象 实例对象
绑定事件函数 事件对象(事件所在的标签对象)this === e.target
定时器函数 window
立即执行函数 window
箭头函数 window
4.4 call
可以调用函数 函数名.call()
可以改变函数内this的指向
function add(num1, num2){console.log(this);console.log(num1 + num2);
}
var obj = { name:'张三', age:23 }
add.call(obj, 3, 4) //this变成了obj
4.5 高阶函数
函数作为参数或者返回值 的函数
案例
function f(num1, num2, fn){console.log(num1 + num2);fn && fn() //fn有值就调用(&&可短路,提高效率)
}
//调用函数
f(1, 2, function(){console.log('执行了fn');
})
5. 闭包
5.1 概念
是有权访问另一个函数作用域中变量的【函数】,延伸变量的作用范围
(一个作用域可以访问另外一个函数内部的局部变量)
5.2 应用(立即执行函数)
for (var i = 0; i < lis.length; i++) {(function(i) {setTimeout(function() {console.log(lis[i].innerHTML);}, 3000)})(i);
}
6. let和const
let
let不能重复声明
防止循环变量变为全局变量
let不会变量提升(有暂时性死区)
let声明的变量只在所处于的块级有效
使用场景
let一般用于定义变化的数据(基本数据类型)
const一般用于定义引用数据类型
优先选用const。如果数据后面要修改,就选用let
const
不可以被修改
无变量提升
块级作用域
优先级:const > let > var
7. 类和继承
7.1 类
class作为对象的模板,本质是function,也是ES6语法糖。
可以通过 class 关键字定义类
7.2 继承
class A extends B {}
7.3 静态属性、方法
使用static修饰
直接用类名调用
工具类,全部用静态来写、类名调用,如Math
例子
class Student extends People{static graduation = "school";static speak() {}; //静态成员//构造函数constructor (name, age){this.name = name;this.age = age;}
}
Student.speak(); //调用静态方法
8. 解构赋值
更方便的提取数组或对象的值
8.1 数组
const[变量列表] = 要解构的数组
var arr = [1, 2, 3];
var [num1, num2, num3] = arr;
console.log(num1, num2, num3);
8.2 对象
const{变量列表} = 要解构的对象
var obj = {name: "小明",age: 18,
};
var { name, age } = obj;
console.log(name, age);
8.3 别名
var { name: stuName, age: stuAge } = obj;
console.log(stuName, stuAge);
9. 箭头函数
(参数1, 参数2) => { 函数体 }
省略:参数 => 函数体
省略:参数 => 返回值
10. Promise
10.1 概念
- 本质就是一个对象,有两个属性和一个方法
- 状态属性、结果属性,then方法
- 成功与否与接收值无关,与上一个promise调用的方法(第一个或第二个)中是否异常(出错)有关。如果上一个promise是第一个,只有reject,则认为是异常
- then 方法将返回一个 resolved 或 rejected 状态的 Promise 对象。then的返回值为下一个then的参数
10.2 创建
const p = new Promise((resolve, reject) => {reject("promise的失败参数"); //失败
});
const then = p.then((value) => { //前面成功,执行console.log("Promise成功:", value);return "then的成功参数";},(value) => { //前面失败,执行。执行出错则自己状态失败console.log("Promise失败:", value);return "then的失败参数"; //传递给下一个then的参数}
);
10.3 属性
状态属性 PromiseState
默认值是 pending 准备状态,初始状态
调用resolve()
方法,可以将状态改成完成状态
调用reject()
方法,可以将状态改成拒绝状态
结果属性 PromiseResult
默认值是 undefined
调用方法的时候传一个参数,可以将参数保存在结果属性中
10.4 then方法
接收两个函数,如果p的状态是成功的,就会调用第一个函数,如果是失败的,就会调用第二个函数
then() 方法只有在状态发生改变的时候才会调用
给 then 方法中的函数加一个参数,就可以拿到结果属性中的值
10.5 then返回值
又是一个新的promise对象,可以继续调用then方法,进而实现链式编程
链式编程能够执行的前提条件:第一个promise对象,状态不是pending,必须要发生改变
*. 使用
//管理(增删改)
function exec(sql) {return new Promise((resolve, reject) => {con.query(sql, (err, data) => {//有错,把失败的数据带回去if (err) reject(err);//将获取到的数据带回去resolve(data);});});
}
app.get("/users", async function(req, res) {let sql = 'select * from student';const data = await exec(sql);//执行SQL语句res.send(data);//发给浏览器
})
例题
2 2,var改为let,则 0 1
解释:
let:对应 console.dir(arr[0])
i 的值先到AO找,没有再到GO找
JavaScript高级 笔记相关推荐
- JavaScript高级笔记_002_构造函数和原型
JavaScript高级笔记_002_构造函数和原型 构造函数和原型 构造函数和原型 概述 构造函数 构造函数的问题 构造函数原型`prototype` 对象原型`__proto__` (四个下划线) ...
- JavaScript 高级笔记
JavaScript 高级笔记 1. 基础总结深入 1.1 数据类型 1.1.1 数据类型分类 1.1.2 数据类型判断 1.1.3 数据类型相关问题 1.2 数据.变量与内存 1.2.1 什么是数据 ...
- JavaScript高级笔记
今日内容: 1. JavaScript:1. ECMAScript:2. BOM:3. DOM:1. 事件 DOM简单学习:为了满足案例要求 * 功能:控制html文档的内容 * 获取页面标签(元素) ...
- JAVAWeb学习笔记2020/5/15——JavaScript高级笔记
第一章 DOM简单学习:为了满足案例要求 1. 功能:控制html文档的内容 2. 获取页面标签(元素)对象:Element document.getElementById("id值&quo ...
- 《javascript高级程序设计》笔记:内存与执行环境
上一篇:<javascript高级程序设计>笔记:继承 近几篇博客都会围绕着图中的知识点展开 由于javascript是一门具有自动垃圾收集机制的编程语言,开发者不必担心内存的分配和回收的 ...
- 《javascript高级程序设计》笔记:变量对象与预解析
上一篇:<javascript高级程序设计>笔记:内存与执行环境 上篇文章中说到: (1)当执行流进入函数时,对应的执行环境就会生成 (2)执行环境创建时会生成变量对象,确定作用域链,确定 ...
- 《Javascript高级程序设计》读书笔记之对象创建
<javascript高级程序设计>读过有两遍了,有些重要内容总是会忘记,写一下读书笔记备忘 创建对象 工厂模式 工厂模式优点:有了封装的概念,解决了创建多个相似对象的问题 缺点:没有解决 ...
- 《javascript高级程序设计》笔记:原型图解
文章直接从原型图解开始的,如果对一些概念不太清除,可以结合后面几节查看 1. 图解原型链 1.1 "铁三角关系"(重点) function Person() {}; var p = ...
- JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
最新文章
- 6、Java Swing JTextField:单行文本框组件
- 信息系统项目管理知识--项目时间管理
- iOS中NSLog输出格式大全
- mysqlplus 批量插入_ibatis结合oracle批量插入三种方法的测评
- 给iOS 模拟器“安装”app文件
- IdentityServer4系列 | 简化模式
- 实现输入框小数多 自动进位展示,编辑时实际值不变
- 4大JVM性能分析工具详解,及内存泄漏分析方案
- JAVA WEB篇3——JSP
- Atitit 动态按钮图片背景颜色与文字组合解决方案
- python蓝屏_plt.绘图()导致windows出现蓝屏
- 计算机图片处理是什么应用,计算机图像处理技术及其应用领域
- Nelder-Mead(内德-米德)算法
- `MD`语法技巧Typora
- [iOS基础控件 - 6.2] LOL英雄列表 UITableView单项显示
- 服务器虚拟机6的安装教程,VMware vCenter 6.7 安装过程(图文教程)
- Linux 中的 EOF 到底是什么?
- 弦振动 matlab,特殊弦振动问题的MATLAB仿真.doc
- 华为云-容器引擎CCE-基本概念
- grok正则解析mysql slowlog
热门文章
- 一文读懂软件测试的常见分类
- UUID是什么及其获取方式
- python字符集-编解码一纸禅unicode,utf-8,ascii
- 理解js中的面向对象
- ubuntu20.04软件安装和配置python环境
- js 数组 字符串基础方法
- 91-blockchain入门
- mysql+存储一段文字_mysql怎么存储大段文字
- mac使用终端连接服务器错误:RSA host key for 10. . . has changed and you have requested strict checking.已解决
- lucene 4.3 ansj分词演示