84yn页面访问升级,厦门seo网络优化公司,网站建设的成本与费用有哪些,京东商城网站建设目标老样子。复制上来的图片都没了#xff0c;想看原版可以移步对应资源下载(资源刚上传#xff0c;还在审核中)
(免费) JS高级笔记https://download.csdn.net/download/m0_58355897/89102910 一些前提概念 一 什么是js高级 js高级是对js基础语法的一个补充说明#xff0c;本质…老样子。复制上来的图片都没了想看原版可以移步对应资源下载(资源刚上传还在审核中)
(免费) JS高级笔记https://download.csdn.net/download/m0_58355897/89102910 一些前提概念 一 什么是js高级 js高级是对js基础语法的一个补充说明本质上还是对ECMAScript语法的进阶与延伸 高级所要学习的语法相比而言没有js基础的多,但是会更加晦涩难懂,更加侧重的是理解 二 什么是面向对象编程 面向对象不是一门技术而是一种解决问题的思维方式 面向对象的本质是对面向过程的一种封装
一 代码段和作用域
一代码段
1.什么是代码段
一个script就是一个代码段
一个js文件也是一个代码段
PS代码块{}之间的就是代码块
2.代码段特点
上面代码段定义的变量 下面的代码段可以使用
下面代码段定义的变量 上面的代码段不可以使用(因为代码从上向下执行)
代码段之间互不影响 一个代码段中的错误 不会影响到另一个代码段
一个html页面中,可以存在多个代码段
二作用域
1.作用域 a.分类
全局变量(直接变量名、function函数体外的包括if/for中的var变量名)的作用范围是全局
局部变量(function函数体中用var声明的变量、function函数的形参)的作用范围是局部
b.主要作用
隔离变量不同作用域下同名变量不会有冲突。
2.作用域链 寻找变量的过程 叫作用域链 链式过程 就近原则--从内向外地冒泡寻找
以下图的代码为例看下作用域链上查找一个变量的查找规则
首先在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2
然后在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3
再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常 二 预解析
一预解析概念 浏览器不会直接执行代码而是加工处理后再执行这个加工处理的过程我们称之为预解析
二预解析期间操作
1.提升操作
加var的变量仅声明提升
(函数内部的局部变量提升到函数体的最前面)
(函数外部的全局变量提升到代码段最前面)
function函数声明赋值提升
(函数内部的子函数提升到函数体的最前面)
(非函数内部的子函数提升到代码段的最前面)
2.代码举例 JavaScript // 预解析前 var a 1; function fn() { console.log(a);//und var a 10 } fn() console.log(a);//1 JavaScript // 预解析后 var a//全局变量 function fn() { var a//局部变量 console.log(a);//und a 10 } a 1 fn() console.log(a);//1
三提升的特殊情况
1.函数表达式的变量提升 var gn function () { console.log(函数); } 函数表达式提升的是var声明的变量而不是后面的function(){} // 如果碰到xxx is not a function // 思考自己调用的位置是变量还是函数
预编译前 JavaScript gn() var gn function () { console.log(函数); }
预编译后 JavaScript var gn; gn() //und() gn is not a function gn function () { console.log(函数); }
2.for循环条件中var i变量的提升 for (var i 0; i 10; i) {} for循环虽然不是函数 但里面var声明的变量依旧会提升
预编译前 JavaScript console.log(i);//undefined for (var i 0; i 10; i) { console.log(i); }
预编译后 JavaScript var i; console.log(i);//undefined for (i 0; i 10; i) { console.log(i); }
3.var声明的变量名和function声明的函数名冲突时的提升 当我们使用var声明的变量名和function声明的函数名 产生冲突的时候 函数的优先级高于var声明的变量 函数属于一等公民 总结 声明冲突时无论先后函数优先(调用的皆是函数)直至变量赋值后同名函数才被同名变量覆盖(函数无法再被调用)
预编译前 JavaScript console.log(value); var value 111; function value() { console.log(我是一个函数); } console.log(value);
预编译后 JavaScript var value; function value() { console.log(我是一个函数); } console.log(value); //函数体 //函数与变量同名函数不会被仅声明的变量覆盖 value 111;//变量赋值 console.log(value);//111 //函数被变量覆盖 value()//报错 value已经不是函数
4.没有var声明直接不提升
报错a is not defined JavaScript console.log(a);//报错 Uncaught ReferenceError: a is not defined a 100; console.log(a); //上面代码报错,代码停止执行
5.let变量声明提升但未初始化
报错Cannot access a before initialization 初始化 JavaScript console.log(a);//Uncaught ReferenceError: Cannot access a before initialization 初始化 let a1; console.log(a); //上面代码报错,代码停止执行
三 执行上下文
一内存的分区
1.数据类型
对内存来说能够合理利用存储空间 基本数据类型 Number String Boolean Null Undefined
引用数据类型 Object Array Function
2.内存分区堆区 栈区
基本数据类型 存放在栈区先进后出
引用数据类型 存放在堆区 堆空间与一个对应的地址 对应的地址仍存在栈区
GO 全局对象
VO 变量对象 用来存放当前执行上下文中创建的数据
二执行上下文 当代码运行时会产生一个对应的执行环境 在这个环境中所有变量会被事先提出来变量提升有的直接赋值有的为默认值 undefined(预解析) 代码从上往下开始执行就叫做执行上下文。
1.执行上下文概念
执行上下文就是js代码执行环境的抽象概念理解
只要代码运行就一定在执行上下文中
2.执行上下文过程 代码被浏览器解析后形成执行上下文ECS 入栈 1)当全局代码执行 产生ECG(鹅蛋) 2)当函数执行的时候 产生ECfn(鸡蛋) 3)ECG 或者 ECfn 放在ECS中,ECS是执行上下文栈 出栈 4)当函数调用完毕之后就出栈内存释放 5)当全局代码没有被引用,就出栈 3.画图分析举例 四 声明变量 var|let|const
一加var与不加var的区别
不管加不加var,创建的是全局变量,都会放在GO中,也就是说可以通过window.xx
加var的变量可能是全局变量, 也可能是局部变量, 通过是否写在函数内区分
局部变量不会挂载在window上
加var的变量在预解析的时候会提升, 不加var不会提升
加var的变量不能用delete()方法删除不加var能
二let声明变量(ES6)
1.产生原因
之前使用var声明, 提升会打乱我们代码的执行顺序
2.特点
let声明的变量不会提升(提升了但是没有初始化)
let会和{} 形成块级作用域
使用let声明的变量不会挂载在window上
使用let声明的变量不能重复声明
3.代码举例 JavaScript //情况1: console.log(a);//Cannot access a before initialization let a 1; //情况2: if (true) { let a 1; console.log(a);//1 和{}形成块级作用域 } console.log(a);//a is not defined //情况3: let a2 1; console.log(window); console.log(window.a2); //情况4: var a; var a; let a; let a;
三const声明常量(ES6)
1.特点
const声明的变量不会提升
和{}会形成块级作用域
不会挂载window上
声明的变量不能修改(常量)
const声明的变量必须赋值,只声明不赋值直接报错
2.代码举例 JavaScript //情况1: const a 100; console.log(a);//100 a 110; console.log(a);//对常量变量赋值 Assignment to constant variable. //情况2: console.log(b);//Cannot access b before initialization const b 120; //情况3: var c; let c;// const c;// // 情况4: const a1 100 console.log(window);
五 高阶函数
一高阶函数定义
一个函数它的参数是函数或者它的返回值是函数,那么这个函数叫高阶函数
二常见的内置高阶函数
数组的一些方法是参数为函数的高阶函数
some() 一真全真
every() 一假全假 JavaScript //some let arr [10, 20, 30, 40, 52]; let flag arr.some(item item 51); console.log(flag); //输出结果true //every let arr [11, 21, 31, 42, 51]; let flag arr.every(item item 51); console.log(flag); //输出结果false
forEach()
map()
filter()
find()
findIndex() JavaScript var arr [1, 5, 2, 3] // 1.arr.forEach() // 作用:遍历数组 不能改变原数组 // 注意:不能对空数组进行检测 // 2.map // 作用:映射/加工 返回值是一个根据映射条件加工后的新数组,不能改变原数组 // 语法: // arr.map(function (item, index, arr) { // }) let res arr.map(function (item, index, arr) { // item:当前元素的值 // index:索引值 // arr:当前数组(可选参数) return item hello }) console.log(arr); console.log(res); // 3.filter // 作用:过滤 把符合条件的元素放在新数组中,返回的新数组 // return 后面是条件 条件为true的时候会返回到新数组当中 let res2 arr.filter(function (item, index) { // return item 2 // return 10 // 10-true return 0 // 0-false }) console.log(res2);//[5,3] console.log(arr); // 4.find // 作用:查找 把符合条件的元素放在新数组中,返回的新数组 // 如果数组中有对应的元素则返回元素,如果没有则返回undefined let res3 arr.find(function (item, index) { // return item 2 return item 0 //undefined }) console.log(arr); console.log(res3); // 5.findIndex // 作用查找数组中是否有某一个元素的索引 // 如果数组中有对应的元素则返回元素的索引值,如果没有则返回-1 let res4 arr.findIndex(function (item, index) { // return item 2 // return item 1 //0 return 0 //-1 }) console.log(res4);
三自定义高阶函数一般不用 JavaScript // 对于高阶函数来说 ,实际上传递的是函数的堆地址 function fn(func) { func() } function gn() { console.log(gn..); } fn(gn) JavaScript // 需要封装一个函数 // 三个参数 这个函数的作用是计算 加 减 乘 function calc(num1, num2, func) { return func(num1, num2) } // 相加 function add(a, b) { return a b } // 相减 function sub(a, b) { return a - b } // 相乘 function mul(a, b) { return a * b } console.log(calc(3, 4, add)); console.log(calc(30, 40, sub));
六 IIFE 立即执行函数表达式 立即调用函数表达式immediately invoked function expression; 主要作用: 立即执行函数
一两种不同写法 JavaScript (function fn1(形参) { console.log(fn1); })(实参) JavaScript (function fn1(形参) { console.log(;fn1); }(实参))
二前面没加;之类会报错
可加 - * / ! ~ ^ JavaScript ;(function fn1() { console.log(;fn1); }()) function fn1() { console.log(fn1); }() -(function fn1() { console.log(-fn1); })() *(function fn1() { console.log(*fn1); })() /(function fn1() { console.log(/fn1); })() ~(function fn1() { console.log(~fn1); })() ^(function fn1() { console.log(^fn1); })() !(function fn1() { console.log(!fn1); })()
七 闭包
一概念和理解 函数执行后返回结果是一个内部函数,并被外部变量所引用 如果内部函数持有被执行函数作用域的变量即形成了闭包。
一个本该被销毁的变量空间
由于其内部对其引用, 导致无法被销毁, 形成闭包
二特点及缺点
1.特点
延长了变量的生命周期
扩大了变量的作用范围
保护变量 个人理解 需注意的tip 可产生多个闭包每个闭包各自独立 同一闭包下的变量固定连续调用闭包函数其中的变量值会累积变化而非重置
2.缺点
导致内存泄漏
(如果写了大量的闭包,产生了多个独立空间但是没有及时销毁,导致内存泄漏)
三代码举例
1.注意变量会累积变化因为同一闭包中的变量被函数连续调用 JavaScript function fn1(a) { function gn() { console.log(a); } return gn } //注意变量会累积变化因为同一闭包中的变量被函数连续调用 //除非重新函数赋值再调用才会重新开始新闭包新闭包中的变量 let fn2 fn1(1)//将a赋值为gnfunction gn() {console.log(a);} a1 fn2()//2 第一次调用gn() fn2()//3 第二次调用gn() let fn3 fn1(1//将a赋值为gnfunction gn() {console.log(a);} a1 fn3()//2 第一次调用gn() fn3()//3 第二次调用gn()
2.不管在哪里调用闭包函数,那么其中所需变量一定是闭包中的变量
(闭包中的i仅服务于y函数) JavaScript var i 0; function A() { var i 10; function X() { console.log(i); } return X } var y A();//此时 这个y实际上是函数x, 因为x函数内部的i使用的是定义出来的i, 所以形成闭包 y()//10 function B() { var i 20; y()//不管在哪里调用y函数,那么这个i一定是闭包中的i(闭包中的i仅服务于y函数) } B()//10
八 this绑定
一this概念及this绑定分类
1.概念 this在不同的位置 指的是不用的东西 this指向的东西 和位置以及调用方式有关系 常见的this指向的是对象 或者是window 或者是其他事件源
2.分类 默认绑定 隐式绑定 显式绑定 new绑定
二默认绑定
默认绑定的this值window对象
直接this
函数独立调用时里面的this JavaScript //1.直接this console.log(this);//window //2.当一个函数独立调用时,此时里面的this是默认绑定,指向是window function fn() { console.log(this); } fn()
三隐式绑定
隐式绑定的this值调用方法的对象
隐式绑定 实际上就是对象打点调用身上的方法
谁打点调用 this就指向谁
两种写法 JavaScript // 写法一: var obj { name: wang, fn: function () { // console.log(fn...); console.log(this); //obj } } obj.fn()//obj JavaScript // 写法二: var obj { name: wang, // fn: fn // key和value的名字一样是,可以省略写一个 fn } function fn() { console.log(this); } obj.fn()//obj
四显式绑定call() apply() bind() 显式绑定 主要是三个函数call() apply() bind() 对象身上的内置方法 一次性1.call() 改变this指向且调用函数 2.apply() 与call()类似 但传参写法不同加[] 可永久3.bind() 仅改变this指向但不调用 调用的话需要再() PS只有apply传参需要加[],call和bind方法不需要 JavaScript function fn(a, b) { this.a a this.b b console.log(this); } //1.call() 作用:1.改变this指向 2.让函数执行 let call { name: call, a: 0, b: 0 } fn.call(call, 1, 2)]//执行了fn函数,将函数中this指向了obj fn()//window 不是永久改变,只改变一次 //2.apply() 作用:1.改变this指向 2.让函数执行 let apply { name: apply, a: 0, b: 0 } fn.apply(apply, [1, 2])//和call使用方式一样 传参方式不同 fn()//window 不是永久改变,只改变一次 //3.bind() 作用:1.改变this指向 let bind { name: bind, a: 0, b: 0 } let bind2 fn.bind(bind, 1, 2)//会返回一个新的绑定好的this指向的函数 bind2()//永久指向 bind2里面的this永久指向bind
五new绑定
1.概念
通过new一个构造器(类),生成一个实例化对象
new一个类,就得到一个对象
对于构造器来说 里面的this默认绑定的是window
当我们使用new的时候 里面的this指向发生了改变 指向是生成的实例化对象
2.new(运算符/操作符做了什么事情) 为什么要使用new呢 因为new可以改变this指向并且执行构造器
创建出了一个实例化对象开辟了一个新的堆空间
让构造器中this指向新的实例化对象(指向了新的堆空间)
执行了构造函数
返回的是一个堆空间的地址把地址给了car
3.代码举例 JavaScript // 1.构造器 function Car(carName, carColor) { this.carName carName this.carColor carColor console.log(this); } Car(车, 绿色)//window--车,绿色 // 2.通过new构造器,得到一个实例化对象 //也算是谁new 构造器this指向谁(类似于隐式绑定的谁调用this指向谁) let car new Car(车, 蓝色)//car这个对象--车,蓝色 console.log(car);//car这个对象--车,蓝色
六this绑定的优先级
this绑定优先级new绑定显示绑定隐式绑定默认绑定
七this指向特殊情况
1.内置函数的this指向
a.事件监听器中的this指向事件源 JavaScript // 1.事件监听器中的this指向事件源 var divEle document.querySelector(div) divEle.onclick function () { console.log(this);//divthis指向/div 也就是divthis指向/div }
b.定时器里的this指向window(无论定时器放在哪都是这样) JavaScript // 2.定时器里的this指向window(无论定时器放在哪都是这样) var obj { fn: function () { console.log(this, 这是定时器外面的this);//obj 隐式绑定 Object setTimeout(function () { console.log(this, 这是定时器里面的this);//Window }, 1000) } } obj.fn()
c.forEach里的this默认window;添加第二个参数时指向它 JavaScript // 3.forEach // 默认Window // 添加第二个参数时改变第一个参数的this var arr [1, 2, 3] // 默认 arr.forEach(function () { console.log(this);//window }) // 添加第二个参数时改变第一个参数的this arr.forEach(function (item) { if (item 2) { this.age 2 } console.log(this);//Window -- { name: 张三,age:2} }, { name: 张三 })
2.箭头函数无this指向 逐级向上查找
箭头函数需要逐级向上找this JavaScript // 箭头函数中没有this,需要逐级向上找this console.log(this);//window var obj { fn: function () { console.log(this);//obj }, gn: () { console.log(this);//window } } obj.fn()//obj obj.gn()//window
箭头函数中没有this JavaScript // 没有办法改变因为箭头函数中没有this let fn () { console.log(this);//window } fn.call(malu)//window
九 创建对象的方式 创建对象方式总结 1.使用字面量的方式直接创建对象 2.使用new关键字使用new关键字通过构造函数创建对象 3.使用工厂模式可根据参数返回不同的对象 4.使用原型模式使用一个原型模式创建新的对象 5.使用Object.create方法 6.使用class关键字ES6提供的class关键字 ps:遍历对象只能用 for(var key in arr){} 不能用for of哦
(一) 字面量方式 JavaScript let obj { name: 名字, fn: function () { console.log(字面量创建对象); } } console.log(obj);
(二) 构造函数方式首字母需要大写
1.内置Object对象构造器 JavaScript //内置对象构造器 var obj1 new Object({ name: 名字, age: 18 }) console.log(obj1);//Object age: 18 name: 名字
2.自定义构造器/类 JavaScript // 自定义Student 构造器/类 注意:首字母需要大写 function Student(sname, sage) { this.sname sname this.sage sage } // new 构造器 构建出来一个实例化对象 let obj2 new Student(学生, 18) console.log(obj2);//Student sage: 18 sname: 学生
(三) 工厂函数方式
在函数中声明局部对象变量并进行属性赋值最后返回该对象变量 JavaScript function Student(name, age) { var obj {} obj.name name obj.age age obj.dohomework function () { console.log(写作业..); } return obj } let stu1 new Student(花花, 12) let stu2 new Student(花, 18) console.log(stu1); console.log(stu2); stu1.dohomework()
十 构造器|原型对象|实例化对象相关
(一) 原型|原型模式|原型对象|原型链概念
原型
一个可以被复制的类通过复制原型可以创建出来一个一摸一样的对象
也就是说 原型就是一个模板
原型模式(一种设计模式)
原型模式指的是用于重复创建的对象既可以重复创建又能保证性能
原型对象
是抽象的 是一个内存中的空间
一个对象的诞生构造器原型对象底层
原型链
当在实例化的对象中访问一个属性时首先会在该对象内部(自身属性)寻找如找不到则会向其__proto__指向的原型中寻找如仍找不到则继续向原型中__proto__指向的上级原型中寻找直至找到或Object.prototype.__proto__为止值为null这种链状过程即为原型链。
(二) 构造器、原型对象、实例化对象及原型链
1.构造器、原型对象、实例化对象关系 在构造器身上有一个prototype属性指向构造器的原型对象(显示原型对象)
在原型对象上有一个属性叫constructor指向这个原型对象对应的构造器
每一个生成的实例化对象都一个属性__proto__指向对应的原型对象(隐式原型对象) JavaScript function Student(name) { this.name name } //打印构造器对象Student console.dir(Student);//f Student(name) // 通过prototype // 打印构造器对象Student的显式原型对象 console.dir(Student.prototype)//Object console.dir(Student.prototype.constructor)//ƒ Student(name) console.dir(Student.prototype.prototype)//undefined // 比较两种方式获得的原型对象 console.log(Student.prototype stu1.__proto__);//true
PSconsole.dir()打印对象
2.原型链(沿之向上寻找)
寻找对象的属性(方法)的机制,就是沿着__proto__形成的链式结构向上寻找
(自己身上没有此属性 - 原型对象 - Object - null) JavaScript let stu1 new Student(张三) //打印实例化对象stu1 console.dir(stu1)//Student // 原型链:寻找属性的机制,就是沿着__proto__形成的链式结构寻找(自己身上没有此属性 - 原型对象 - null) //1.打印实例化对象的隐式原型对象 console.dir(stu1.__proto__.constructor)//ƒ Student(name) //2.Object的原型对象 console.dir(stu1.__proto__.__proto__)//Object(原始真正的Object) //3.null console.dir(stu1.__proto__.__proto__.__proto__)//null
3.对象的私有属性和公有属性
在实例化对象自己身上的 叫私有属性
在原型对象身上 叫公有属性 JavaScript // 共有属性age Student.prototype.age 18 // 私有属性name let stu2 new Student(李四) console.log(stu2.name);//李四 console.log(stu2.age);//18
(三) 一些实例情况
1.__proto__改变--堆地址不同 2.prototype改变--旧原型对象依然是原型链一环 3.实例化对象调用VS原型对象调用 PS:undefined类型转number类型是NaN而NaN任何数都为NaN
4.实例化对象没有某属性沿原型链向上查找 十一 继承
(一) 继承相关概念 继承可以让多个构造函数产生关联便于管理和复用 所谓的继承 就是子类继承父类的属性和方法 举例教师类 教导主任 老师 父类的范围大一些 子类的范围小一些 子类的属性多一点
不使用继承时 JavaScript //学生类 function Student(name, age) { this.name name this.age age } // 班长类 function Mointer(name, age, m_id) { //重复写冗余 this.name name this.age age this.m_id m_id }
(二)私有属性继承--call继承
优点 可以继承私有属性
缺点 没有继承公有属性 // 核心代码--改变this指向并执行函数 Father.call(this, name, age) JavaScript function Father(name, age) { //私有属性 this.name name this.age age } function Son(name, age, father) { // 核心代码--改变this指向并执行函数 Father.call(this, name, age) // 当我们 new Son的时候 // 此时当前位置的this指向的是新的实例化对象 this.father father } let son new Son(小花, 18, 爹) console.log(son);//Son age: 18 father: 爹 name: 小花
(三)公有属性继承
1.原型继承
原型继承 对于私有属性来说 没什么意义,对于公有属性来说 可以继承 // 核心代码--原型继承 Son.prototype new Father() Son.prototype.constructor Son//可写可不写 没大影响 沿原型链查找.prototype.prototype.say JavaScript function Father(name, age) { this.name name this.age age } Father.prototype.say function () { console.log(say...); } function Son(name, age, father) { // this.name name // this.age age this.father father } // 核心代码--原型继承 Son.prototype new Father() Son.prototype.constructor Son let sonnew Son(小花,18,爹) console.log(son);//Son father: 爹 son.say()//say... 沿原型链查找
2.Object.create() 创建一个对象,可指定对象的原型对象-能用于继承公有属性 Object 是一个内置构造器 有一个方法create Object.create 作用:创建一个对象并且可以指定对象的原型对象 //let res Object.create(obj) //核心代码 Son.prototype Object.create(Father.prototype) 可以指定对象的原型对象 JavaScript let obj { name: 张三, say:function(){ console.log(say...); } } // 想把谁当成原型对象在参数里面就写谁 let res Object.create(obj) console.log(res);//Object prototype name: 张三 say:function() res.say()//say... 沿原型链查找 // 可以定义一个没有原型对象的对象 let res2 Object.create(null) console.log(res2);//Object no properties 用于公有属性继承沿原型链查找.prototype.prototype.say JavaScript function Father(name, age) { this.name name this.age age } //公有方法 Father.prototype.say function () { console.log(say...); } function Son(name, age, father) { this.father father } //通过Object.create继承公有属性 Son.prototype Object.create(Father.prototype) let son new Son(小花, 18, 爹) console.log(son);//Object father: 爹 prototype Prototype say:function() son.say()//say... 沿原型链查找
(四)公私有属性继承
1.组合继承call原型继承 function Son(name, age, father) { // call继承私有属性 Father.call(this, name, age) this.father father } // 原型继承公有方法 Son.prototype new Father() 沿原型链查找.prototype.prototype.say JavaScript function Father(name, age) { // 私有属性 this.name name this.age age } //在父类的原型身上添加了一个公有方法 Father.prototype.say function () { console.log(say...); } function Son(name, age, father) { // call继承私有属性 Father.call(this, name, age) this.father father } // 原型继承公有方法 Son.prototype new Father() // Son.prototype.constructor Son let son new Son(小花, 18, 爹) console.log(son);//私有属性 son.say()//公有方法
2.寄生继承callObject.create() function Son(name, age, father) { // call继承私有属性 Father.call(this, name, age) this.father father } //通过Object.create继承公有属性 Son.prototype Object.create(Father.prototype) 沿原型链查找.prototype.prototype.say JavaScript function Father(name, age) { //私有属性 this.name name this.age age } //公有方法 Father.prototype.say function () { console.log(say...); } function Son(name, age, father) { // call继承私有属性 Father.call(this, name, age) this.father father } //通过Object.create继承公有属性 Son.prototype Object.create(Father.prototype) // Son.prototype.constructor Son let son new Son(小花, 18, 爹) console.log(son);//私有属性 son.say()//公有方法
十二 ES6中声明类及继承
(一)声明类class class Xxx{ constructor(xx,xx,...){ // 这里的属性是会挂载在实例化对象上 // 私有属性/方法 this.xxxx this.xxfunction(){} ... } // 在constructor外面写会挂载在原型对象上 // 公有属性/方法 xxxxxx//这里属性仍绑定到实例化对象身上私有属性 xxx(){} } JavaScript class Student { // 在class声明的这个类中有一个函数叫constructor constructor(name, age) { // 这里的属性是会挂载在实例化对象上 // 私有属性/方法 this.name name this.age age this.work function () { console.log(work...); } } // 在constructor外面写just方法会挂载在原型对象上 // 私有属性 a 1 // 公有方法 say() { console.log(say...); } } let stu1 new Student(张三, 18) console.log(stu1); stu1.work()//work... stu1.say()//say...
(二)继承类extends
父类Student JavaScript class Student { constructor(name, age) { // 私有属性/方法 this.name name this.age age this.work function () { console.log(work...); } } // 私有属性 a 1 // 公有方法 say() { console.log(say...) } }
子类Montor
不写constructor(xx){super(xx)}时也继承父类 JavaScript class Montor extends Student { // 1.不写constructor时也继承父类 // 子类私有属性 b 2 // 子类公有方法 talk() { console.log(talk...) } let mon new Monitor(班长, 20, 1) console.log(mon); mon.work()//work... mon.say()//say... mon.talk()//talk...
新增自己属性/方法时写constructor须用super()继承父类 粉-继承父类绿-子类新增 JavaScript class Monitor extends Student { // 2.新增自己属性/方法时写constructor用super() constructor(name, age, id) { //继承父类 super(name, age) //新增子类私有属性 this.id id } // 子类私有属性 b 2 // 子类公有方法 talk() { console.log(talk...) } } let mon new Monitor(班长, 20, 1) console.log(mon); mon.work()//work... mon.say()//say... mon.talk()//talk...
十三 JSON的数据格式及转换
(一)JSON及其数据格式 JSON 作为前端和后端的数据交互的一种格式 JSON数据格式 格式1 hello 需要使用双引号包裹起来 格式2 写成对象的时候 属性名必须添加双引号 如果嵌套对象的时候 嵌套对象也需要使用双引号包裹 格式3 写成数组的时候 当元素是纯数字 可以不添加引号 其余都要添加
字符串 JSON hello
对象 JSON { name: 小花, hobby: [ 踢足球, 打篮球 ], age: 18 }
数组 JSON [ 小花, 18, { name: 小花花 }, [ 1, 2 ] ]
(二)JSON的序列化和反序列化 JSON的序列化 JSON.stringify()--对象变字符串 JSON的反序列化 JSON.parse()--字符串变对象 JavaScript let obj { name: 小花, age: 18, score: [1, 2, 3] } // JSON的序列化 JSON.stringify() console.log(JSON.stringify(obj));//{name:小花,age:18,score:[1,2,3]} // JSON的反序列化 JSON.parse() console.log(JSON.parse(JSON.stringify(obj)));//Object age: 18...
十四 JS中的错误类型及处理
(一)JS中的错误类型 总结5种错误情况 1.xx is not defined 未声明直接使用 2.let 不能再初始化之前使用 Cannot access a before initialization 3.xx is not a function 当你调用函数的时候()前面不是一个函数 4.const声明的变量不能被改变 Assignment to constant variable 5.超出最大执行栈 Maximum call stack size exceeded JavaScript // 1.未声明直接使用 // Uncaught ReferenceError: a is not defined console.log(a); // 2.let在初始化之前使用 // Uncaught ReferenceError: Cannot access b before initialization console.log(b); let b // 3.const不能二次赋值 // Uncaught TypeError: Assignment to constant variable. const c 10 c 11 // 4.调用函数的时候()前面不是一个函数 // Uncaught TypeError: fn is not a function let fn1 fn() // 5.超出最大执行栈(如陷入死循环) // Uncaught RangeError: Maximum call stack size exceeded function f1() { f2() } function f2() { f1() } f1()
(二)try catch处理错误 处理错误(为了使错误不阻塞后面的代码执行) try catch 捕获错误 try和catch须连用 1.默认错误try{}catch(err){console.log(err)} 2.自定义错误类型try{throw xxx}catch(err){console.log(err)}
1.抛出错误并捕获 JavaScript // 抛出默认错误 try { console.log(a);//会产生错误的代码 } catch (err) { console.log(err);//ReferenceError: a is not defined 以字符串的方式抛出 } console.log(try-catch处理异常后报错不影响后面代码执行);//try-catch处理错误后报错不影响后面代码执行
2.抛出自定义错误(throw)并捕获 JavaScript try { let age hhh if (typeof age ! number) { // throw 抛出自定义错误 throw 请输入数字 } } catch (err) { console.log(err);//请输入数字 } console.log(try-catch处理异常后报错不影响后面代码执行);//try-catch处理错误后报错不影响后面代码执行
十五 其他(严格模式等)
(一)用class封装数据存储的工具 JavaScript class Cache { constructor(sort) { this.storage (sort localStorage) ? localStorage : sessionStorage } // 增|改 setItem(key, value) { if (value) { this.storage.setItem(key, JSON.stringify(value)); } } // 查 getItem(key) { let value this.storage.getItem(key); if (value) { return JSON.parse(value); } else { return 仓库中没有; } } // 删 removeItem(key) { if (key) { this.storage.removeItem(key); } } // 清空所有 clear() { this.storage.clear() } } let localCache new Cache(localStorage) let sessionCache new Cache(sessionStorage) HTML !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title script src./cache.js/script /head body script localCache.setItem(stu, { name: 小花, age: 18 }) localCache.setItem(stu2, { name: 小花, age: 18 }) console.log(localCache.getItem(stu)); localCache.removeItem(stu2) // localCache.clear() sessionCache.setItem(stu, { name: 小花, age: 18 }) sessionCache.setItem(stu2, { name: 小花, age: 18 }) console.log(sessionCache.getItem(stu)); sessionCache.removeItem(stu2) // sessionCache.clear() /script /body /html
(二)with和eval和严格模式
1.with--扩展一个语句的作用域链 with语句 作用扩展一个语句的作用域链 优点可以让代码更加简洁(不需要打点查找) 缺点破坏了作用域PS:当传入复杂对象时相较连续多次打点with可以使效率提高 JavaScript //不使用with var obj1 { name1: 张三, obj2: { name2: 李四 } } console.log(obj1.obj2.name2); console.log(obj1.obj2.name2); console.log(obj1.obj2.name2); //使用with with (obj1.obj2) { var newName name2 } console.log(newName); console.log(newName); console.log(newName);
2.eval--字符串转js eval-比较特殊的函数 可以把字符串当成js代码去执行 作用是一种接受字符串作为参数并且可以将接受的字符参数转变成js的表达式且立即执行函数 注意eval的参数是一个字符串 JavaScript var strvar msg哈哈哈;console.log(msg) console.log(str);//var msg哈哈哈;console.log(msg) eval(str)//哈哈哈
3.严格模式--消除js中某些不合理或者不严谨的地方 严格模式消除js中某些不合理或者不严谨的地方 作用提高js的程序运行效率 为以后的js版本做铺垫 在一个js文件中开启use strict 这个文件中写的代码都受严格模式的约束
严格模式时不允许
不能使用不加var或者let的变量
形参的参数不能重名
在严格模式下函数的独立调用不再默认绑定(即this不再指向window) JavaScript use strict // 1.不能使用不加var或者let的变量 // b1; var b 1 let c 2 console.log(b); console.log(c); // 2.形参的参数不能重名 // function fn(a, a, a) { // console.log(a, a, a); // } // fn(1, 2, 3)//Duplicate parameter name not allowed in this context // 3.在严格模式下函数的独立调用不再默认绑定(即this不再指向window) console.log(this);//window setTimeout(() { console.log(this);//window }, 100) function gn() { console.log(this);//und } gn()
(三)柯里化函数和组合函数
1.柯里化函数
只传递给函数一部分参数来调用它, 让它返回一个函数去处理剩余的参数, 这个过程就是柯里化。
PS说白了就是分开参数连续调用新函数 HTML script //没有经过柯里化函数处理 function add(a, b, c) { return a b c } console.log(add(1, 2, 3));//7 /script script // 只传递给函数一部分参数来调用它, 让它返回一个函数去处理剩余的参数, 这个过程就是柯里化。 // 柯里化函数说白了就是分开参数连续调用新函数 function fn1(a) { return function (b) { // b return function (c) { // cb return a b c } } } console.log(fn1(1)(2)(3));//6 // console.log(fn(1)(2)(3)); //10 /script script // 简化版柯里化函数 let fn2 a b c a b c console.log(fn1(1)(2)(3));//6 /script
2.组合函数
组合函数其实就是先执行内参数函数获得返回值作为参数后再执行外函数
即先执行参数函数再执行外函数 JavaScript function fn1(a) { console.log(a); } function fn2(b) { return b } //先执行fn2(1)得到返回值2然后执行fn1(2) fn1(fn2(1))//2
