ES6笔记

let const

1. var 出了块级作用域有效, let 出了块级作用域无效
2. var 具有变量提升的能力, let不具备
3. var 可以重复声明一个变量, let不可以
4. let 更适合局部变量
5. 在一个区块内部,只要使用了let声明,这个区域就形成了封闭的作用域
6. 如果在let声明前使用变量,这段区域被称为'临时锁区(或暂时性锁区)',临时死区,使用typeof也会报错
7. 在循环中,var与let的区别尤为明显,var 全局有效,导致后续使用i会引起干扰,而let不会
8. 如果在循环体内设置函数方法,体外输出var会得不到预期数值
1. const声明的作用是:创建一个只读的常量,一旦声明不可改变
2. 与let 声明一样,const声明的常量无法提升, 也存在临时死区
3. 和elt 声明不同的是,const 声明常量后必须立刻赋值,否则会报错
   const PI = 3.14;
   console.log(PI); // 常量约定俗成大写

块级作用域

1. ES6之前只有全局作用域与函数作用域,并没有块级作用域
2. 循环体和条件体就是块级作用域,{} 中
3. 如果在块级作用域里不使用 let ,就会造成全局变量污染的问题
4. {{{...}}}块级作用域支持多层嵌套,每一层均是封闭的,只作用于此
5. 在ES6之前,采用自我执行匿名函数的方式来防止变量污染
   (function (){
   	var vaule = 10;
   }());
   console.log(value)  //报错
   
   {
	 let value = 10;
   }
6. 块级作用域内的函数声明,在全局作用域内依旧可以访问
7. 解决方式是:使用函数表达式的方式创建
  {
	let fun = function(){};
  }

数组与对象的解构

1. 为何要解构操作?  	JSON格式的普及,导致大量数据提取工作
2. 数组解构赋值:1.分行解构,2.单行解构
	let info = ['Mr.z', 100, '男'];
	let [name, age, gender] = info;
	console.log(name)
	console.log(age)
	console.log(gender)
	
	let [name, age, gender] = ['Mr.z', 100, '男'];
	
3. 无论是单行还是分行解构,都必须一一匹配
   //数组层次也需要匹配
   let [name, [age, gender]] = ['Mr.z', [100, '男']];
   
   //用逗号作为占位符不赋值
   let [, , gender] = ['Mr.z', 100, '男'];
4. 在变量解构时,可以在数组的元素中设置一个默认值
   let [name, age, gender='男'] = ['Mr.z', 100];
   
5. 还有一种 ...var 的语法,可以将没有赋值的内容都赋值给这个变量
   let [name, ...other] = ['Mr.z', 100, '男'];
1. 对象解构,与数组解构相似
   let obj = {
   	name: 'Mr.z',
   	age: 100
   };
   let {name, age} = obj
   
2. 对象解构也可以设置一个默认值
   let obj = {
	 name: 'Mr.z'
   };
   let {name, age = 100} = obj;
   
3. 如果不想要对象属性名作为解构变量,可以通过键值对的方式改变属性名
   let obj = {
   	name: 'Mr.z'
   };
   let {name:myname} = obj
   
4. 嵌套对象--解构可以通过键值对方式
   let obj = {
   	name: 'Mr.z',
   	info: {
   		age: 100,
   		gender: '男'
   	}
   };
   let {name, info:{age, gender}} = obj
   
5. 对象的解构也支持单行简写
   let {name, age} = {'Mr.z', 100}

1. 其它解构--常用解构
   普通变量的 值交换
   let key = 1;
   let value = 'Mr.z';
   // 解构操作,变量互换
   [key, value] = [value, key];
   
2. 如果函数的返回值是一个数组或对象, 直接将函数进行赋值解构
   function fun(){
   	return ['Mr.z', 100, '男']
   }
   let [name, age, gender] = fun();
   
3. 当函数进行参数传递时,可以进行数组和对象字面量方式的传参
   function fun([name, age, gender]){
   	console.log(name)
   }
   fun(['Mr.z', 100, '男']);

4. 字符串的解构
   let [x, y, z] = 'abc';
   
   let {length:len} = 'abc';

函数的传参

1. ES6之前,函数是无法给参数设置默认值的, ES6支持了这一特性
   function fun(number = 100,age = 111){
   	console.log(number); // 123
   	console.log(age);  // [ 111, 222 ]
   }
   fun(123,[111,222]);
   
2. 如果只想传递第二往后的参数值,可以使用 undefined 占位
   function fun(number = 100,age = 111){
   	console.log(number);
   	console.log(age);
   }
   fun(undefined, 222);
   
3. 支持参数使二使用参数一的值作为默认值,反之不可以
   function fn(x, y=x){}

4. 解构变量有不确定元素,那么函数的传参也可以有不定参数
   function fn(x, ...y){}
   
5. name属性  用于获取函数名
   function fn(){}
   let fn2 = function(){};
   let obj = {
   	fn3: function(){}
   };
   console.log(fn.name)
   console.log(fn2.name)
   console.log(obj.fn3.name)
   console.log((new Function()).name)   // anonymous 匿名函数
   

箭头函数和this

1. 箭头函数
   let fn = name => name;
   console.log(fn('Mr.z'))
   
   function fn(name){
   	return name
   }
   
2. 箭头函数也可以传递两个或以上的参数,并实现运算后返回
   let fn = (x, y) => x+y;
   
3. 定义的函数不需要传参的话,可以直接用()
   let fn = () => '123';
   
4. 如果函数体需要更复杂的操作,箭头函数右侧使用传统函数体
   let fn = (x, y) =>{
	   return x + y;
   }
   
5. 自执行函数也可以用箭头函数创建
   ((age) => {
   	console.log(age)
   })('22');
   
   (function(age){
	   console.log(age)
   })('22');
 
1. 绑定this  ES中的典型问题,this指向问题,当对象中包含了类似setTimeout函数内部,this的指向就会发生问题
   let obj = {
   	name: 'Mr.z',
   	age: 22,
   	fn: function(){
   		setTimeout(function(){
   			console.log(this.name + ',' + this.age);  // 此时this指向window
   		}, 500)
   	}
   }
   obj.fn();  // 输出 undefined,undefined
   
   解决方式: 1.将this在setTimeout外部进行赋值保存  2.箭头函数,箭头函数中的this是最外层的函数绑定,不受内部影响
   let obj = {
   	name: 'Mr.z',
   	age: 22,
   	fn: function(){
   		_this = this;          // 将this在setTimeout外部进行赋值保存
   		setTimeout(function(){
   			console.log(_this.name + ',' + _this.age); 
   		}, 500)
   	}
   };
   obj.fn();
   
   let obj = {
   	name: 'Mr.z',
   	age: 22,
   	fn: function(){
   		_this = this;
   		setTimeout(() => console.log(_this.name + ',' + _this.age), 500)    //使用箭头函数
   	}
   };
   obj.fn();
   
箭头函数扩展与尾调用

1. 箭头函数也支持一些内置函数的使用,比如 sort排序
   let arr = [3, 2, 1].sort((a, b) => a-b);
   console.log(arr)
   
2. 箭头函数不支持arguments绑定,请直接使用...other模式 
   let fn = (...other) => {
   	return other[0] + other[1];
   }
   console.log(fn(1,2))
   
3. 箭头函数和普通函数一样,可以用typeof 和 instanceof 验证

4. 尾调用:即在一个函数的最后可执行的一步调用了其他函数
   尾调优化:原因: 每次尾调用都会创建栈帧,如果尾调次数过多,则可能会出现程序问题
   必须满足下面条件,才可执行严格模式下的优化
   1. 尾调用必须 return 返回
   2. 尾调用 return 返回不得含其他操作
   'use strict'
   
   function fn (x) {
   	if (x<=1) {
   		return 1;
   	}
   	return fn(x - 1);
   }
   console.log(fn(10))
   

字符串的扩展与改进

新增方法
1. 处理超过两个字符(四字节)的异体字, ES6新增了 codePointAt() 方法
2. 对于超过两个字符的,可以通过ES6新增的 String.fromCodePoint() 
  console.log(String.fromCodePoint(134071));
   
3. ES6提供的 normalize() 方法用于有音标的符号组合形成统一
4. ES6提供了三种判断字符串的方法 includes(), startWith(), endsWith(),若找到返回true
   console.log('abc'.includes('a'))   // true
   console.log('abc'.startsWith('a'))  // true
   console.log('abc'.endsWith('c'))  // true
   
5. repeat() 重复字符串, padStart() 补全字符串头部, endStart() 补全字符串尾部
   console.log('x'.repeat(2))  // xx
   console.log('x'.padStart(2,'0'))   // 0x 前补0,补全后一共两位
   console.log('x'.padEnd(2,'0'))  // x0 尾补0,补全后一共两位

模板字符串
1. 反引号实现变量解析--可用于字符串拼接
   let name = 'Mr.z',
       age = 22;
   console.log(`名字: ${name}, 年龄: ${age}`)
2. 支持表达式
   console.log(`${1+1}`)
   
3. 支持嵌套
   console.log(`${true ? (true ? `${2}` : `${3}`) : 'false' }`)
   
4. 可用String.raw来得到原生字符串
   console.log(String.raw`我\n是`);
   

正则的扩展改进

1. ES6提供了u修饰符, 对占两个字符特殊字进行正则识别
   /?{2}/.test('')  // false
   /?{2}/u.test('')  // true
   
2. ES6提供了 y 修饰符,它的作用是匹配过一次后继续往下匹配
   let text = 'xxx_xx_x_';
   let patt = /x+_/y;
   console.log(patt.exec(text))  // [ 'xxx_', index: 0, input: 'xxx_xx_x_', groups: undefined ]
   console.log(patt.exec(text))  // [ 'xx_', index: 4, input: 'xxx_xx_x_', groups: undefined ]
   console.log(patt.exec(text))  // [ 'x_', index: 7, input: 'xxx_xx_x_', groups: undefined ]
   console.log(patt.flags)   // y
   
3. 对于 y 修饰符, ES6提供了 stikcy 属性来检测是否存在 y 修饰符
   console.log(patt.stikcy)
   
4. ES6提供了 flags 属性,用于返回正则使用的修饰符名称
   
5. .表示匹配所有,除了终止符。换行\n,等使用 s 修饰符匹配
   let text = 'a\nbc';
   let patt = /x.+bc/s;
   console.log(patt.test(text));
   
6. ES6支持修饰符替换,之前会报错
   let regex = new RegExp(/xyz/iu, 'g');
   console.log(regex.flags)  // g
   

数值扩展

1. ES6明确二进制,八进制, 十六进制分别用 0b, 0o, 0x作为前缀
   console.log(Number('0b11'));
   console.log(Number('0o11'));
   console.log(Number('0x11'));
   
2. ES6提供了 Number.isFinitel(), Number.isNaN() 判断数值与NaN
3. ES6提供了 Number.parseInt(), Number.parseFloat() 转换整型与浮点型
4. ES6提供了Number.isInteger(), 来判断参数是否是一个整形
5. ES6提供了一个常量,值特别小,用于判断是否得到正确结果  Number.EPSILON
6. ES6新增了一个指数运算符 ** ,并且可以进行赋值运算
   console.log(2 ** 2)

7. Math对象新增了一些方法, .trunc(), .sign() 等
   console.log(Math.trunc(5.55));    // 去掉小数部分
   console.log(Math.sign(10));  // 判断正负,0,NaN  正数返回1,负数返回-1  0返回0, NaN返回NaN
   

数组的扩展与改进

扩展运算符
1. ES6提供了(...) 三点符号将数组转换为逗号分割
   function fn(x, y) {
   	return x + y;
   }
   
   console.log(fn(...[1,2]))
   
2. 扩展用法,
   console.log(Math.max(...[3,2,1]))   // 求最大值
   console.log([...[1,2],...[3,4]])    // 合并数组
   
方法的扩展
1. ES6提供了Array.of()方法,主要目的是弥补Array的不足
   let arr1 = Array(3);
   let arr = Array.of(3);
   console.log(arr)   // [ 3 ]  
   console.log(arr1)  //[  <3 empty items> ]  3位的空数组
   
2. ES6提供了 Array.from() 方法,将类似数组的对象或者遍历转换为真正的数组
   转换数组的要求比较严格:1. key必须是数值或者字符串  2. length设置长度, 而且key在范围内
   var obj = {
   	0: 'name',
   	1: 'age',
   	2: 'gender',
   	length: 3
   }
   
   console.log(Array.from(obj))  // [ 'name', 'age', 'gender' ]
  
3. ES6提供了	find() 和 findIndex() 方法,用于查找数组中第一个匹配的值
   // 参数是一个回调函数,可以使用箭头函数
   let arr = [10,20,30,40,50];
   console.log(arr.find(value => value === 20))  // 20
   console.log(arr.find(value => value > 20))  // 30
   console.log(arr.findIndex(value => value === 20))  // 1
   
4. ES6提供了 fill() 方法,可以填充重写数组中的元素值
   let arr = [1,2,3,4,5];
   console.log(arr.fill('a'))  // [ 'a', 'a', 'a', 'a', 'a' ]
   
   let arr = [1,2,3,4,5];
   console.log(arr.fill('a',1,3))  // [ 1, 'a', 'a', 4, 5 ]  从第2位开始到第4位结束 替换为 a  [1,3)
   
5. ES6提供了 copyWithin 方法, 从数组内部赋值, 然后粘贴到指定位置
   let arr = [1,2,3,4,5];
   // 从0开始复制  值从索引2开始粘贴  参数3设置结束粘贴索引值
   console.log(arr.copyWithin(2,0))  // [ 1, 2, 1, 2, 3 ]
   

对象的简写改进

1. ES6初始属性简写
   function fn(name , age){
   	return {name, age}
   }
   
   console.log(fn('Mr.z',10))
   
2. ES6 对象中方法的简写
   let obj = {
   	// ES6的写法
   	fn (){
   		return 'es6'
   	}
   }
   
   console.log(obj.fn())

表达式方案
1. ES6允许对象字面量,使用表达式进行属性名称的拼装操作
   let obj = {
   	['user' + 'name'] : "Mr.z"
   }
   
   console.log(obj.username)
   
2. ES6支持动态属性名称
   let myName = 'name';
   let obj = {
   	[myName] : "Mr.z"
   }
   console.log(obj[myName])
   console.log(obj.name)
   
3. ES6在对象字面量方法上,也支持拼装
   let obj = {
   	['f'+'n'](){
   		return 'es6'
   	}
   };
   console.log(obj.fn())
   

对象的新增方法

1. ES6中提供了 Object.is() 来处理 ===(恒等)中的一些缺点
   console.log(Object.is(NaN, NaN))   // true
   console.log(Object.is(+0, -0))  // false
   
2. ES6提供了 Object.assign() 方法可以合并指定对象至目标对象内部
   
3. ES6提供了 Object.getPrototypeOf() 和 Object.setPrototypeOf()方法
   var obj = {
   	fn(){
   		return 'fn'
   	}
   }
   
   let f = {};
   Object.setPrototypeOf(f,obj)  // 设置f的原型对象为 obj
   console.log(f.fn())
   console.log(Object.getPrototypeOf(f) === obj)   // 检测obj是否是f的原型对象
   
4. ES6提供了super关键字,用于原型方法中的继承功能
   var obj = {
   	fn1(){
   		return 'fn1'
   	}
   }
   
   let f = {
   	fn(){
   		return super.fn1() + ', extend'
   	}
   };
   Object.setPrototypeOf(f,obj)  // 设置f的原型对象为 obj
   console.log(f.fn())  // fn1, extend
   

Symbol类型和属性

Symbol类型
1. ES6新增了Symbol基础数据类型,表示独一无二的值,类似ID
   let str1 = Symbol();   // 不支持new Symbol
   let str2 = Symbol();
   console.log(str1 === str2)  // false
   
2. 在Symbol()中的参数,是对变量的描述,程序无法访问,只能日志打印
   let str1 = Symbol('字符串');
   console.log(str1)  // 输出: Symbol(字符串)
   
Symbol属性
1. 最常用的是作为对象属性
   let a = Symbol();
   let b = Symbol();
   
   let obj = {
   	[a]: 'name1',
   	[b]: 'name2'
   }
   console.log(obj)   // { [Symbol()]: 'name1', [Symbol()]: 'name2' }
   console.log(obj[a])  // name1
   

Set数据集合

1.ES6新提供了Set集合, Set集合是一种无重复元素的列表 使用 new Set() 方法创建 Set 集合
   let arr = new Set();
   arr.add(1);
   arr.add(2);
   arr.add(2);
   arr.add('2');
   console.log(arr)  // Set { 1, 2, '2' }
   console.log(arr.length)  // undefined
   console.log(arr.size)  // 3
   
2. 使用 hash() 方法查找是否存在指定元素
   console.log(arr.has(2))  // true
   
3. 使用 delete() 删除指定元素, clear() 清空元素
   console.log(arr.delete(2))  // true
   console.log(arr)  // Set { 1, '2' }
   
   console.log(arr.clear())  // Set {}
   
4. 使用 ... 将 Set集合转换为数组
   console.log([...arr])
   
5. Set集合还提供了针对对象的Weak Set 集合,添加非对象类型会报错
6. Weak Set集合支持 add(), has(), delete() 方法
7. Weak Set不支持遍历, 内部隐藏(不支持查看), 不支持foreach和size
8. 对于应用场景来说, 存放对象的弱引用, 不用担心对象被回收后引发的问题
 

Map数据集合

1. ES6提供了Map数据集合, 是一种以键值对存储的有序列表
   let map = new Map();
   map.set('name', 'Mr.z');
   map.set('age', 22);
   console.log(map);  // Map { 'name' => 'Mr.z', 'age' => 22 }
   console.log(map.get('name')) // Mr.z
   
2. 可以使用 has() 检测, delete() 删除, clear() 清空等对Map集合的操作

3. foreach遍历
   map.foreach((value, key, m) => {});
   
4. Map集合还提供了针对对象的Weak Map 集合,添加非对象类型会报错
5. Weak Map集合支持 set(), has(), delete() 方法
6. Weak Map不支持遍历, 内部隐藏(不支持查看), 不支持foreach和size
7. 对于应用场景来说, 存放对象的弱引用, 不用担心对象被回收后引发的问题

迭代器和生成器

迭代器
1. 迭代器(Tterator),用于给数据结构提供统一的访问遍历的机制
2. 生成器
   function *cit(){
   	yield 1;
   	yield 2;
   	yield 3;
   }
   
3. 迭代对象的 .next() 方法, 类似指针,每次执行将下移一行
   let it = cit();
   console.log(it.next());  // { value: 1, done: false }
   console.log(it.next());  // { value: 2, done: false }
   console.log(it.next());  // { value: 3, done: false }
   console.log(it.next()); // { value: undefined, done: true }
   
4. 生成器配合循环
   function *fn(arr){
   	for(let i=0; i<arr.length; i++){
   		yield arr[i];
   	}
   }
   
   let it = fn([1,2,3])
   console.log(it.next().value)  // 1
   console.log(it.next().value)  // 2
   console.log(it.next().value)  // 3
   
默认迭代接口
1. Array, Map, Set 等拥有默认迭代接口
2. 对于Array数组类型, 提供了 keys(), values(), entries()
   let arr = [1,2,3,4,5]
   console.log(arr.keys())  // Object [Array Iterator] {}
   console.log(arr.values())  // Object [Array Iterator] {}
   console.log(arr.entries())  // Object [Array Iterator] {}
   
3. for...of 迭代遍历
   let arr = [1,2,3,4,5]
   for(let i of arr.entries()){
   	console.log(i)
   }
   // [ 0, 1 ]
   // [ 1, 2 ]
   // [ 2, 3 ]
   // [ 3, 4 ]
   // [ 4, 5 ]
   

异步Promise

1. Promise: 异步通信编程的一种解决方案
   let p = new Promise((resolve, reject) => {
   	if(true){
   		resolve('执行成功')
   	}else{
   		reject('执行失败')
   	}
   });
   
   p.then((value) => {
   	console.log(value);
   }).catch((reason) => {
   	console.log(reason)
   });
   或
   p.then((value) =>{
   	console.log(value);
   },(reason) => {
   	console.log(reason)
   });
   
实例测试
let p1 = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve('1.异步')
	}, 3500)
});

let p2 = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve('2.异步')
	}, 800)
});

let p3 = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve('3.异步')
	}, 1500)
});

p1.then((value) => {
	console.log(value);  // 调用p1
	return p2;
}).then((value) => {
	console.log(value);  // 调用p2
	return p3;
}).then((value) => {
	console.log(value)  // 调用p3
});
//1.异步
//2.异步
//3.异步

Promise状态特点

1. Promise解决了异步多层回调混乱的问题
2. Promise对象异步操作的三种状态
   Pending(进行中)
   Fulfilled(已成功)
   Rejected(已失败)
3. 当异步操作执行后, 它得到的结果来决定其状态,其他任何操作都无法改变
4. Pending -> Fulfilled -> Resolve
   Pending -> Rejected -> Resolve
   
5. Promise提供了一个 all() 方法,可以简化多个实例调用的输出排序
   let p = Promise.all([p1,p2,p3]) // 参数为数组
   
   p.then((value) => {
   	console.log(value)  // [ '1.异步', '2.异步', '3.异步' ]
   });
   
6. Promise提供了 race() 方法, 只输出第一个改变状态的实例
   let p = Promise.race([p1,p2,p3])  // 参数为数组
   p.then((value) => {
   	console.log(value)  // 2.异步
   });
   
7. Promise提供了 resolve() 和 reject() 直接返回一个成功或者失败的案例
   let p1 = Promise.resolve('成功');
   let p2 = Promise.reject('失败')
   p1.then((value) => {
   	console.log(value)
   });
   p2.then((value) => {
   	console.log(value)
   });
   

代理Proxy

1. 什么是代理? 即 给目标对象封装一层拦截, 外界访问必须通过这层拦截
   let obj = {
   	name: 'Mr.z',
   	age: 22,
   	gender: '男'
   }
   
   let p = new Proxy(obj, {  //参数一 拦截的目标对象, 参数二 拦截行为
   	get(target, property){
   		// return 'fail';
   		if(property === 'age'){
   			return target[property];
   		}else{
   			return 'fail';
   		}
   	}
   });
   
   console.log(p.name)  // fail
   console.log(p.age)  // 22
   
2. 如果代理对象展示合适的值,可以通过 get() 的两个参数实现(可以进行验证与修改等)
   get(target, property){
   	if(property === 'age'){
   		return target[property] - 20;
   	}
   }
   
3. 也可以通过 set() 方法来对代理对象的属性进行赋值
   set(target, property, value){
   	if(property === 'age'){
   		target[property] = value;
   	}
   }
   
   p.age = 30;
   console.log(p.age);  // 30

小结
1. 代理并不是复制目标对象, 只是拦截目标对象, 更改默认行为
2. 代理可以使用 set() 和 get() 方法,对目标对象的数据进行过滤和验证
3. 代理对象中任何未公开或者不存在的属性, 可自定义返回内容
4. 代理可以阻止赋值的默认行为, 直接 return false

异步async

1. async也是处理异步的, 是对 Promise 的一种扩展, 让异步更加方便
2. 优势: async是基于Promise 的, 虽然是异步操作, 但看上去像同步
   let as = async() => {
   	let result = await p2;
   	console.log(result)
   };
   
   as();
  
3. 三个异步需要队列输出
   async function as(){
   	let r1 = await p1,
   	    r2 = await p2,
   	    r3 = await p3;
   		
   	console.log(r1);
   	console.log(r2);
   	console.log(r3);
   }
   
   as();
   // 1.异步
   // 2.异步
   // 3.异步
   
   对比 Promise, 没有then, 精简许多
   p1.then((value) => {
   	console.log(value);  // 调用p1
   	return p2;
   }).then((value) => {
   	console.log(value);  // 调用p2
   	return p3;
   }).then((value) => {
   	console.log(value)  // 调用p3
   });
   
4. await关键字只能在 async 函数内部, 否则不可识别
    
5. 批量异步队列, 类似Promise.all()
   async function as(){
   	let all = [await p1, await p2, await p3];
   	console.log(all)   // [ '1.异步', '2.异步', '3.异步' ]
   }
   
   as();
   
6. async如果设置了返回值, 这个值是 Promise 对象
   async function as(){
   	return 'async'
   }
   
   console.log(as())  // Promise { 'async' }
   
   // 可以通过then() 得到
   as().then((value) => {
   	console.log(value)   // async
   });
   

类class实现

1. 在ES6之前, javascript没有完整的类支持
2. ES6之前采用了原型链实现面向对象的功能, ES6开始, 提供了真正的类语法
3. 本质上内部实现和原型链还是一样的
   class Person {
   	// 构造函数(构造方法)
   	constructor(arg) {
   	    // this.arg是类的属性
   		// 参数赋值给属性
   	    this.arg = arg; 
   	}
   	
   	// 普通方法
   	run(){
   		return '输出:'+this.arg;
   	}
   }
   
   // 实例化一个Person对象
   let p = new Person('Mr.z');
   console.log(p.run());  // 输出:Mr.z 
   console.log(p.arg);  // Mr.z
   console.log(p instanceof Person);  // true
   console.log(typeof Person);  // function 说明 Person 本质上还是一个函数
 
getter和setter
1. 根据面向对象的三大定律中成员属性, 我们需要对它进行封装, 变成私有属性
2. 目前的 this.arg, 基本是对外公开的, 可以在类外取值和赋值
   class Person {
   	#arg   // 私有声明
   	// 构造函数(构造方法)
   	constructor(arg) {
   	    this.#arg = arg;  //私有属性, 类外无法访问
   	}
   	
   	// 普通方法
   	run(){
   		return '输出:'+this.arg;
   	}
   }
   
   // 实例化一个Person对象
   let p = new Person('Mr.z');
   console.log(p.run());   // 输出:undefined
   
3. 添加 getter setter 方法
   class Person {
   	#arg   // 私有声明
   	// 构造函数(构造方法)
   	constructor(arg) {
   	    this.#arg = arg;  //私有属性, 类外无法访问
   	}
   	
   	get arg(){
   		return this.#arg;
   	}
   	
   	set arg(value){
   		this.#arg = value;
   	}
   	
   	// 普通方法
   	run(){
   		return '输出:'+this.arg;
   	}
   }
   
   // 实例化一个Person对象
   let p = new Person('Mr.z');
   p.arg = 'Mr.x';
   console.log(p.arg);   // Mr.x
   

类class继承

1. ES6也支持子类继承父类, 使用 extends 关键字实现
2. 当子类继承父类, 实例化子类后, 就可以直接拥有父类的构造, 属性和方法
   class Person {
   	constructor(arg) {
   	    this.arg = arg; 
   	}
   	
   	run(){
   		return '输出:'+this.arg;
   	}
   }
   
   class Children extends Person{
   	
   }
   
   let c = new Children('Mr.hahaha');
   console.log(c.arg);   // Mr.hahaha
   console.log(c.run());  // 输出:Mr.hahaha
   
3. 继承之后, 一般来说,我们需要覆写父类, 然后对子类进行增强
   super 作为函数时, 调用父类构造, 作为对象时, 	在普通方法返回指定父类方法.    
   class Person {
   	constructor(arg) {
   	    this.arg = arg; 
   	}
   	
   	run(){
   		return '输出:'+this.arg;
   	}
   }
   
   class Children extends Person{
   	constructor(arg, age) {  // 覆写构造
   		super(arg);  // 执行父类构造并传参
   		this.age = age;
   	}
   	
   	run(){  //覆写方法
   		return super.run() + this.age;  // 执行父类方法并返回内容
   	}
   }
   
   let c = new Children('Mr.hahaha', 22);
   console.log(c.run());   // 输出:Mr.hahaha22
   
4. 可以使用 Object.getPrototypeOf() 判断子类是否继承了父类
   console.log(Object.getPrototypeOf(Children) === Person)  // true
   
5. ES6的类支持静态属性和方法, 也支持静态被子类继承(静态属性与方法可以直接调用, 不用实例化)
   class Person {
   	static gender = '男';
   
   }
   
   class Children extends Person{
   
   }
   
   console.log(Person.gender)  // 男
   console.log(Children.gender)  //男
   
   覆写静态
   class Person {
   	static gender = '男';
   
   }
   
   class Children extends Person{
   	static gender = '女';   // 覆写静态
   }
   
   console.log(Person.gender)  // 男
   console.log(Children.gender)  //女
   

Moudle模块化

1. 浏览器加载, Node加载 
   区别: 导入 浏览器加载(import * as obj from '/...js')
             Node加载(commonJS规范, require('/...js'))  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值