一、ES6的类的继承
1、继承的好处:在父类中定义的属性和方法,子类继承后就可以直接使用。
2、类继承过程中的向上转型:子类对象的类型一定是父类的类型,父类对象的类型不能是子类的类型
(1)typeof:用于判断变量的数据类型(基本数据类型)
typeof 变量名 == ‘数据类型’
(2)instanceof:用于判断变量的数据类型(类类型)
对象名 instanceof 类名
判断”对象”是否是给定的类的对象
二、ES6的模块化管理
1、模块化管理的方式
(1)ES6的方式:一个.js文件就是一个模块。采用”module”方式管理。即用export导出、用import….from导入
(2)Node的方式:采用“CommonJS”方式。即module.exports = ‘变量名’导出,用require导入
2、在VSCode中配置ES6的模块管理环境
(1)在指定文件夹下执行初始化指令:npm init -y 会在文件夹下生成package.json文件
(2)在package.json中加入:“type”:“module”
3、导出 / 导入变量
4、导入 / 导出整个模块:使用*统配符,表示导入所有
5、默认导出(export default):
(1)一个模块只能有一个默认导出,对于默认导出,导入的名称可以和导出的名称不一致。
//export.js文件默认导出
let school = "蜗牛学苑"
let address = "凤城二路"
const obj ={
school,
address
}
export default obj
//import.js文件中导入
import obj from "./export.js"
console.log("--学校:",obj.school)
console.log("--地址:",obj.address)
(2)混合导出
//在export.js文件中使用默认导出:导出一个函数
export default function(){
console.log('愿者上钩')
}
//普通导出:导出变量
export let myName = '姜子牙'
//在import.js文件中导入:默认的导出不能用{},普通导出的变量要用{}
import myFun,{myName } from './export.js'
console.log(myName+'钓鱼')
myFun()
(3)重命名export和import
如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题,为了解决该问题,ES6为提供了重命名的方法,可以这样做:
/******************************test1.js**********************/
export let myName="我来自test1.js";
/******************************test2.js**********************/
export let myName="我来自test2.js";
/******************************index.js**********************/
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1);
console.log(name2);
三、立即执行函数(IIFE):在函数声明后立即调用
1、实现方式
(1)用圆括号将函数的定义包裹起来
//匿名的立即执行函数
(function(){
//函数体
}())
//有函数名的立即执行函数
(function test(){
//函数体
}())
//带参数的立即执行函数
(function test(name){
console.log(name)
}(‘刘备’))
(2)先用圆括号将函数的定义部分包裹起来,然后再加上调用的圆括号
(function(){
//函数体
})()
//带参数的立即执行函数
(function test(id){
console.log(id)
})('1002')
强调:用圆括号包裹的原因是将函数变成一个表达式,这样在页面被加载时、js程序执行时,函数就被立即调用
2、立即执行函数的作用
(1)不需要为函数命名,避免污染全局变量。
(2)创建一个独立作用域,这个作用域里面的变量,外部访问不到,避免变量污染。
3、使用场景
(1)在页面加载完成后,需要立即执行的一些初始化设置,例如时间处理,创建对象等。
(2)在应用中只执行一次的代码
4、返回值
(1)定义变量接收立即执行函数的返回值
(2)立即执行函数返回值是一个函数
let fun = (function(){ //fun接收返回的函数,fun就成一个函数
var num = 888
return function(){ //返回一个函数
return num
}
})()
console.log(fun())
5、带单目运算符的立即执行函数
(1)单目运算符(一元运算符):参加运算的对象的只有一个
+、- 、!、~
(2)在函数定义之后加上圆括号,在function前加上单目运算符,可以使函数变成立即执行函数。单目运算符的作用是进行语法检查
四、函数劫持:即在一个函数运行之前把它劫持下来,添加我们想要的功能。当这个函数实际运行的时候,它已经不是原本的函数了,而是带上了被我们添加上去的功能。这也是我们常见的【钩子函数】的原理之一。
示例:
let _log = console.log //将console.log的原有功能保存到_log中
console.log = function(str){ //对console.log进行劫持:添加新的功能
_log(str + ' 蜗牛学苑') //在console.log原有输出功能之外,加入新的信息
}
console.log('Hello')
1、this关键字的引用劫持:改变this的指向,通过一些特殊的方法来自己指定函数的调用者
(1)通过call()方法劫持this
var obj = {
name: '郭靖',
fun: function(n1,n2){
let age = n1
let height = n2
console.log('姓名:',this.name) //this指向obj
console.log('年龄:',age)
console.log('身高:',height)
}
}
var obj2= {
name: '杨康'
}
obj.fun(21,180) //未劫持
console.log('----------------------')
obj.fun.call(obj2,21,180) //通过调用call函数将fun函数中的this进行劫持,this指向了obj2
(2)通过apply()方法劫持this
var obj = {
name: '郭靖',
fun: function(n1,n2){
let age = n1
let height = n2
console.log('姓名:',this.name) //this指向obj
console.log('年龄:',age)
console.log('身高:',height)
}
}
var obj2= {
name: '杨康'
}
obj.fun(21,'180cm') //未劫持
console.log('----------------------')
obj.fun.apply(obj2,[22,'175cm']) //通过调用apply函数将fun函数中的this进行劫持,this指向了obj2
(3)通过bind()方法劫持this
let obj2 = {
name: '杨康',
age: 20,
height: '180cm'
}
let obj = {
name: '郭靖',
age: 21,
height: '175cm',
fun: function(){
console.log('姓名:',this.name) //this指向obj
console.log('年龄:',this.age)
console.log('身高:',this.height)
}.bind(obj2)
}
obj.fun()
bind()方法就是在函数设计的时候就指定函数的调用者,也就是指定函数中this的指向;其参数传入形式和call方法一样,是直接传入参数。