js17----ES6(箭头函数，类，模块)

realllll
167 阅读6分钟

箭头函数

1.写法

普通函数 ：var fn=function(a){return n}

箭头函数：var fn=a=>n

2.当箭头函数没有参数或者有多个参数时，用（）括起来

没有参数：var fn=（）=>n

多个参数：var fn=（a，b）=>n

3.当箭头函数的执行体只有一个表达式，就是返回值，那么可以省略大括号，读个表达式要用{}括起来

一个表达式：var fn=a=>n

多个表达式：var fn=(a,b)=>{console.log(a*b);return a}

4.不能用作创建对象（不能使用new方法）

			var fn=(a)=>{
				this.a=a
			}
			var f1=new fn(10)

image.png

5.不能指定this（call,apply,bind都不能用）

call：

                        var  fn=()=>{
				console.log(this)
			}
			var obj={name:"karen"}
			fn.call(obj)//不会报错 但是也改变不了内部的this

image.png

bind：

                        var arr=[]
			var obj={
				name:"jack",
				fn:function(){
					console.log(this)
				}.bind(arr),
				fn2:()=>{
					console.log(this)
				}.bind(arr)
			}
			obj.fn()
			obj.fn2()

image.png

6.this的指向（箭头函数没有this，他的this是离它最近的嵌套层级的function/方法这个函数的调用者 ，如果直到顶层都没有，调用者（this）就是window）

                        var obj={
				name:"karen",
				say:function(){
					var fn=(a)=>{
						console.log(this,1111)
						return 100
					}
					fn(2)//fn函数是谁调用者 window
				}
			}
			obj.say()//调用者obj

image.png 分析：obj.say()调用say方法，箭头函数运行，console.log(this,1111)中的this指向的是离箭头函数最近的嵌套层级的function或者方法的调用者。这里say方法离箭头函数最近，因此this指向say方法的调用者obj，因此打印obj这个对象。

7.传入参数个数大于设置参数时，可以用拓展运算符来表示剩余参数：...reset，reset可任意写不固定

注：...reset只能写在形参后面，并且用逗号隔开

                                var fn=(a,...x1)=>{
				console.log(a)
				console.log(x1)
				
			}

image.png

面试题：你对箭头函数的理解

  • 要有个箭头
  • 箭头的前面是小括号，放形参，只有一个形参的时候可以省略小括号；
  • 箭头的后面是函数体；
  • 如果函数体只有一个语句，没有{}，此时的返回值不需要return；
  • 箭头函数里面的this总是指向最靠近的function 内部的this；
  • 对象里面的方法，尽可能不要使用箭头函数；
  • 箭头函数里面没有arguments，可以使用…reset，接收过来就是数组类型，接收的是形参之外的所有的实参；

类class

类的写法（类名大写）

1.声明类（写类名）

			class Person{				
			}
			let p1=new Person()
			console.log(p1)

image.png

2.匿名类（不写类名）

                        var fn=class{				
			}
			var f1=new fn()
			console.log(f1)

image.png

constructor方法（创建对象时调用）

每个类的内部都可以写一个constructor方法，用这个类创建对象时就会运行构造函数，并且变量写在constructor方法中。如果不写constructor方法，内部会默认生成一个空的constructor方法。

			class Person{
				
				constructor(a,b,c){
					console.log(666666)

					this.x=a//添加变量
					this.b=b
				}
				
			}
			
			var p1=new Person(10,20,30)
			
			console.log(p1,p1.x,p1.b)

image.png

类的原型方法与静态方法

原型方法：不需要使用function关键字，通过“对象.原型方法”调用。

静态方法：使用static修饰，调用时不需要创建对象，直接通过“类名.静态方法”来调用

			class Person{
				
				constructor(a,b,c){
					console.log(666666)

					this.x=a
					this.b=b
				}
				//对象的属性
				life=50//给实例对象添加属性
				//对象的原型对象的方法
				say1(){
					console.log(111,this.x)
				}//给实例对象添加方法
				//类的静态属性
				static life=200//不是给变量赋值 给Person类添加静态属性
				//类的静态方法
				static say2(){
					console.log(222)					
				}//给Person类添加静态方法
			}
			var p1=new Person(10,20,30)//实例，new创建的对象
			console.log(p1,p1.x,p1.b)
			p1.say1()
			console.log(Person.life)
			console.log(Person.say2)

image.png 分析：只有对象的原型方法是直接加在实例对象的原型链上.对象的属性:life=50,通过（对象.属性名）p1.life调用。因为类的静态方法与对象是添加在Person类上的，因此通过类名.静态方法/属性名来调用

类的继承

  • 解决代码的复用
  • 使用extends关键字实现继承
  • 子类可以继承父类中所有的方法和属性（不论动态方法还是静态方法）
  • 子类只能继承一个父类（单继承），一个父类可以有多个子类
  • 子类的构造方法中必须有super() 来指定调用父类的构造方法，并且位于子类构造方法中的第一行
  • 子类中如果有与父类相同的方法和属性，将会优先使用子类的（覆盖）

父类：

			class Person {
				life = 1
				constructor(name) {
					this.name = name
					this.makeMoney = function() {
						console.log(this.name + "赚钱")
					}
				}
				run() {
					console.log(this.name + "跑步")
				}
				static URL = "www"
			}
			var p1 = new Person("karen")
			var p2 = new Person("jack")
			console.log(p1, p2, Person.URL, 11111)

image.png

子类：通过extends关键字继承 （class 子类 extends 父类）

                                class Student extends Person {
				constructor(name) {
					super(name) //让Person类的构造函数的逻辑去帮我们构建对象空间
					this.age = 20
					this.book = "书名"
				}
			}
			var s1 = new Student("marry")
			console.log(s1, Student.URL, 222)

image.png

模块

（1）概述

  • ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。
  • ES6 的模块化分为导出（export） 与导入（import） 两个模块。

（2）特点

  • ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict; 。
  • 模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
  • 每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
  • 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

1.导出：export（写在js文件中）

单独导出：

单独导出的，必须用导出的标识符来按需导入,可以有多个单独导出，导出时变量需要声明。

var obj={name:"karen"}//私有变量
export var num=100
export function  tool () {return obj}

默认导出：

默认导出,在这个文件中只能有一个或者0个,与default关联使用

var obj={name:"karen"}
export var num=100
export function  tool () {return obj}
var a=20
var arr=[100,203,4]
var fm=()=>{}
export default {a,arr,fm,num,tool}//默认导出，将需要导出的数据放在一个对象中

2.导入：import（写在html文件中）

  • 与from关联使用，此时script标签的type必须设置为module
  • 单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import

按需导入：import {num,tool} from "./src/model1.js"，按需导入单独导出，有多个需要导入的单独导出，用花括号{}括起来，并且用逗号隔开

导出
var obj={name:"karen"}
export var num=100
export function  tool () {return obj}

导入
<script type="module">
			// 按需引入 按需导入
			import {num,tool} from "./src/model1.js"
			console.log(num)
			console.log(tool)
			console.log(obj)//没用export导出，会报错
</script>

image.png 分析：

含默认导出的情况：

导出
var obj={name:"karen"}
export var num=100
export function  tool () {return obj}
var a=20
var arr=[100,203,4]
var fm=()=>{}
export default {a,arr,fm,num,tool}//默认导出


导入
<script type="module">
			// 按需引入 按需导入
			import x,{num,tool} from "./src/model1.js"
			console.log(num)
			console.log(tool)
			// console.log(obj)
			var re=tool()
			console.log(re)
			console.log(x.arr)
			
		</script>

image.png 分析：import x,{num,tool} from "./src/model1.js"，x（可以随意写）代表导入默认导出，必须写在单独导出的前面，用逗号隔开；console.log(x.arr)调用其中的数组，调用用点语法

avatar
文章
阅读
粉丝