这篇博客深入总结了ES6的关键特性，包括对象的扩展，如object方法、set和get属性，以及symbol的使用。接着详细讲解了Promise的基础和应用，如异步加载图片、catch、all和race方法。此外，还介绍了Proxy的拦截功能及其实例，Set和Map数据结构，以及async和class的语法，最后讨论了模块系统。
ES6全集基础总结（下）
一：对象的扩展
1：object方法的扩展
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//Object() 将参数变成对象
console.log(Object(1)); //Number当前实例
console.log(Object(true)); //Boolean当前实例
// console.dir(Object);Object的方法
//Object.is方法:判断两个值是否相等
//=== NaN和NAN不等 -0===true true 其他跟===一致
console.log(NaN == NaN); //false
console.log(-0 === 0); //true
console.log(Object.is(NaN, NaN)); //true
console.log(Object.is(-0, 0)); //false
//Object.assign 合并对象
//Object.assign(obj1,obj2)将obj2合并到obj1上，并返回obj1;
let obj1 = {name: "瑶瑶"};
let obj2 = {age: 10};
console.log(Object.assign(obj1, obj2)); //{name: "瑶瑶", age: 10} Object实例
//Es7中提供了对象的扩展运算符
let sch = { ...obj1,...obj2};
console.log(sch); //{name: "瑶瑶", age: 10} Object实例
//object.getOwnProperetyDescriptor :获取一个对象某个属性的描述
console.log(Object.getOwnPropertyDescriptor("123", "length"));
//字符串的length不可修改 字符串中的方法是不可以更改原字符串的
/*{ value: 3,
writable:false, 是否可以修改
enumerable: false,是否可以枚举 for in 遍历
configurable: false 是否可配置，删除这个属性
}*/
// Object.keys() 返回值 数组[所有可枚举的属性]
console.log(Object.keys(sch));// ["name", "age"]
// object.values() 返回值 数组[所有可枚举的属性的键值]
console.log(Object.values(sch));// ["瑶瑶", 10]
// object.entries() 返回值 数组[每一项也是一个数组【键、值】]
console.log(Object.entries(sch));// [["name","瑶瑶"],["age",10]]
</script>
</html>
2：对象的set和get
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
let obj = {
_name:"瑶瑶",
get A() {
//只要通过obj获取Name属性就会触发这个函数
//可以通过return 返回值
console.log(1); //1
return this._name; //瑶瑶
},
set A(val) {
//只要通过obj给name属性设置值就会触发这个函数
console.log(2); //2
// console.log(this); //{}示例 get A :f A() set A :f A(val)
//val：设置的值
// console.log(arguments); //Arguments ["瑶瑶", callee: ƒ, Symbol(Symbol.iterator): ƒ]
// console.log(this === obj); //true
// return val;
this._name=val;
}
};
console.log(obj.A); // 瑶瑶
obj.A = "爱学习";
</script>
</html>
3：对象的简洁表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
let name="瑶瑶",age=10;
let student={name,age};//let student={name:name,age:age};
let str="name";
let obj={
fn(){},
// fn:function(){};属性名是字符串
[str]:name,
//属性名是字符串，属性名使用【】，里面可以写变量
["ss"+str]:name
}
//obj[str];
</script>
</html>
二：symbol
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
// 前端五种基本数据类型 Null,Number, Undefined,String, Boolean,Object
//symbol是一个新的数据类型 而且是一个值类型的
//使用symbol函数之心得到一个symbol数据类型
//Symbol跟字符串差不多 但是使用Symbol函数得到一个数据，每一个是完全不同的
//Symbol可以接受一个参数(),参数对Symbol数据的描述
let sym1 = Symbol();
let sym2 = Symbol();
console.log(typeof sym1); //symbol
console.log(sym1); //Symbol()
console.log(sym2); //Symbol()
console.log(sym1 === sym2); //false
let obj = {
name: "瑶瑶",
[name]: "yaoyao"
};
console.log(obj); //{"":"yaoyao","name":"瑶瑶"}
obj[sym1] = "10";
console.log(obj); //{"":"yaoyao","Symbol()":"10","name":"瑶瑶"}
// Symbol值不可以跟其他值计算
// console.log(Symbol("1")+1);
// Symbol不可以转数字，但是可以转为Boolean,可以转换为字符串
// Number(Symbol(1));
console.log(!Symbol("1")); //false
console.log(Symbol("zf").toString()); //Symbol(zf)
// Symbol.for();找到相同参数的symbol的值，找到这个值返回；如果没有就创建一个新的Symbol
let yy = Symbol.for("yy");
let xx = Symbol.for("xx");
console.log(xx == yy); //false
//symbol.keyFor(symbol值) 只能找到使用symbol.for创建的值的描述
console.log(Symbol.keyFor(yy)); //yy
console.log(Symbol.keyFor(sym1));//undefined
</script>
</html>
三：promise
1：基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
//1：【三种状态】：pending(等待)->Fulfilled（成功）/Rejected(失败)
//2：【执行顺序】：会先执行同步完，才执行异步。所以最后会打印：promise Ok success
let pro1 = new Promise((resolve, reject) => {
//参数：resolve,reject分别都是函数
//resolve 函数
//reject 函数
//resolve,reject只能执行一个
//如果new Promise中出错，则执行then中第二个回调reject，并且将错误信息传给函数
console.log("promise");
resolve("success"); //成功Fulfilled
reject("error"); //失败Rejected
})
pro1.then((res) => {
//resolve成功的回调(异步)
console.log(res)
}, (err) => {
//reject失败的回调（异步）
console.log(err);
})
console.log("Ok");
// function getList() {
// return new Promise((resolve, reject) => {
// resolve("hhh");
// reject("jjj");
// })
// }
// getList().then((res) => {
// console.log(res);
// }).catch((err) => {
// console.log(err);
// });
</script>
</html>
2：异步加载图片示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">
</div>
</body>
<script type="text/javascript">
function loadImg(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.src = url;
img.onload = function() {
resolve(img);
};
img.onerror = function(e) {
reject(e);
}
})
}
loadImg("https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/global-alpha.png?t=201859").then((img) => {
box.appendChild(img);
}, (e) => {
console.log(e);
});
</script>
</html>
3：catch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">
</div>
</body>
<script type="text/javascript">
function loadImg(url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.src = url;
img.onload = function() {
resolve(img);
};
img.onerror = function(e) {
reject(e);
}
})
}
//then中只放一个，错误信息通过catch来捕获
loadImg("https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/global-alpha.png?t=201859").then((img) => {
box.appendChild(img);
}).catch((e) => {
//【!!！】：可以捕获new promise中的错误，也可以捕获then中的错误）
console.log(e)
});
</script>
</html>
4：all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
// console.log(Promise.prototype);属性
// console.dir(Promise);//方法
// Promise.all([每一项都是Promise,如果不是默认转为Promise])
//数组中每一项都是成功才会走成功回调 默认将每一个项的参数放在数组中传给回调函数，只要一个有错误就会走错误的回调 一旦有一个错误就执行错误（将遇到的第一个错误参数传给回调）
let p1 = new Promise((resolve, reject) => {
resolve("瑶瑶");
});
// p1.then(()=>{},()=>{})
let p2 = new Promise((resolve, reject) => {
// resolve("爱");
reject("不爱");
});
let p3 = new Promise((resolve, reject) => {
resolve("学习");
});
let pall = Promise.all([p1, p2, p3]);
console.log(pall); //Promise {<pending>}
pall.then((res) => {
console.log(res);
// ["瑶瑶", "爱", "学习"]
}).catch((e) => {
console.log(e);
//不爱
})
</script>
</html>
5：race
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
// console.log(Promise.prototype);属性
// console.dir(Promise);//方法
// Promise.race([每一项都是Promise,如果不是默认转为Promise])
//只要有一个状态改变，当前实例的状态就跟着改变(最快最早的那个！！)
let p1 = new Promise((resolve, reject) => {
setTimeout(()=>{
resolve("瑶瑶");
// reject("丹妹");
},1000);
});
let p2 = new Promise((resolve, reject) => {
setTimeout(()=>{
resolve("爱");
// reject("丹妹");
},2000);
// reject("不爱");
});
let p3 = new Promise((resolve, reject) => {
setTimeout(()=>{
resolve("学习");
// reject("丹妹");
},3000);
});
let pall = Promise.race([p1, p2, p3]);
pall.then((res) => {
console.log(res);
// 瑶瑶
}).catch((e) => {
console.log(e);
})
</script>
</html>
四：Proxy拦截
1：基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//对目标对象默认操作的拦截/改写
// new Proxy({目标对象target},{拦截的方法})，Proxy也称代理器
let obj = {
name: "瑶瑶",
age: 10
};
//让Proxy代理了obj，需要勇敢Proxy1去操作代理的obj
let proxy1 = new Proxy(obj, {
get(target,key,proxy) {
//target:目标对象,
//key：属性名,
//proxy：实例
console.log(arguments);//Arguments(3) [{…}, "name", Proxy, callee: ƒ, Symbol(Symbol.iterator): ƒ
console.log("get拦截");
// 这里return什么就获取什么。没有return时触发get返回undefined
return "你好"
}
});
//只要是获取，就会触发get,例如Proxy.name就会触发get
console.log(proxy1.name); //你好
</script>
</html>
2：实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
// 下面是 Proxy 支持的拦截操作一览，一共 13 种。
// get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。
// set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
// has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
// deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
// ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
// getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
// defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
// preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
// getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
// isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
// setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
// apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
// construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。
//【1】 set(target, propKey, value, receiver)
let obj = {
name: "瑶瑶"
};
let proxy1 = new Proxy(obj, {
get(target, propKey, receiver) {
return target[propKey];
},
set(target, propKey, value, receiver) {
console.log("设置");
//propKey:设置属性值
//value：实例
target[propKey] = value;
},
//has会拦截In方法
has(target, propKey) {
console.log("has");
if (propKey.startsWith("_")) {
return false;
}
return propKey in target;
},
// 拦截 Proxy 实例作为函数调用的操作
})
proxy1.age = 10;
console.log(obj); //{name: "瑶瑶", age: 10}
console.log("name" in proxy1); //true
function GetObj() {
return {
name: "瑶瑶"
};
}
let proxy2 = new Proxy(GetObj, {
apply(target, object, args) {
//函数直接执行(),call执行,apply执行
// console.log("target")
// console.log(target, object, args) // ƒ GetObj() {return {name: "瑶瑶"};} undefined []
//arg 函数执行的参数
// object给函数修改this
if (object) {
obj.fn=target;
obj.fn(...args);
delete object.fn;
} else {
target(...args)
}
}
})
proxy2(); //target
proxy2(1, 2, 3); //[1,2,3]
proxy2.call(obj,1,2,3);
</script>
</html>
五：Set和Map
1：Set
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//类似数组 只有值value 没有键key
// console.dir(Set);
// console.log(new Set());
//通过构造函数方式创建一个set实例
//参数是一个数组（或者是类数组只有是有iterable接口）
//只有iterable接口：数组，arguments，元素集合，set，map，字符串
//（1）：会默认去重
console.log(new Set([1, 2, 2, 3, 4])); //Set(4) {1, 2, 3, 4}
console.log(new Set("1233")); //Set(3) {"1", "2", "3"}
function fn() {
console.log(new Set(arguments));
}
fn(1, 2, 3, 4); //Set(4) {1, 2, 3, 4，4，4}
// (2)：size Set实例的大小个数
//add clear delete has
// (3)：add 增加 如果之前没有加上，有就不加因为会去重，返回值为增加后的实例
let set1 = new Set([1, 2, "哈哈", null, undefined, NaN, true]);
// console.log(set1);//Set(7) {1, 2, "哈哈", null, undefined,NaN,true}
//可以实现链式写法，但是一次只加一个
console.log(set1.add(1).add(2));
// (4)：delete 删除 返回值 true/false 如果里面有这一项删除成功true，没有此项删除失败false
console.log(set1.delete(1)); //true;
console.log(set1); //{ 2, "哈哈", null, undefined,NaN,true}
// (5)：clear 清空 没有返回值 undefined
set1.clear();
console.log(set1); //{}
// (6)：has 判断有没有此项 有true 无false
let set2 = new Set([1, 2, 3, "hh", NaN]);
console.log(set2.has(1)); //true
//【遍历】：foreach keys values entries
// (7) :foreach
set2.forEach((item, index, input) => {
//set实例只有value没有key
//item,index:当前实例
//input：当前set实例
})
for (let key of set2.keys()) {
//key 仍然是value值
console.log(key);
}
for (let [item, val] of set2.entries()) {
//item, val 仍然是value值
console.log(item, val);//hh hh
}
</script>
</html>
2：Set用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//数组去重
let ary = [1, 1, 2, 3, 3, 45, 6, 7, 32];
// console.log(new Set(ary));//{1, 2, 3, 45, 6, 7,32}
// console.log([...new Set(ary)]);//[1, 2, 3, 45, 6, 7, 32]
function unique(ary) {
return [...new Set(ary)]; //[1,2,3,45,6,7,32]
// return Array.from(new Set(ary));
}
unique(ary);
let ary1 = [1, 2, 3, 4, 5];
let ary2 = [1, 3, 23, 9, 745];
//并集
function add() {
return [...new Set([...ary1, ...ary2])]
}
console.log(add(ary1, ary2)); //[1,2,3,4,5,23,9,745]
//交集
function same(ary1, ary2) {
return ary1.filter(item => {
ary2.includes(item);
})
}
console.log(same(ary1, ary2)); //[]
// 差集
function diff(ary1, ary2) {
return add(ary1,ary2).filter(item=>!same(ary1,ary2).includes(item))
}
console.log(diff(ary1, ary2));//[1, 2, 3, 4, 5, 23, 9, 745]
</script>
</html>
3：Map
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
// 构造函数方式创建一个map实例
//new Map([[key,value],[]])
// 参数是一个数组,数组的每一项也是一个数组，有两项key，value
let ary = [1, 2],
o = {};
let obj = {
"name": "yaoyao",
1: "1", // 一个对象 属性名必须是字符串,如果写的不是字符串也默认转为字符串
true: "true",
[ary]: ary,
[0]: o
};
console.log(obj); //{0: {}, 1: "1", name: "yaoyao", true: "true", 1,2: Array(2)}
let map1 = new Map([
[1, "瑶瑶"],
[true, "爱学习"],
[{
name: "yaoyao"
}, {
name: "爱学习"
}], //map实例可以是任意数据类型
[o,
[1, 2],
[1, 2]
],
[
[1, 2],
[1, 2]
]
]);
console.log(map1); // {1 => "瑶瑶", true => "爱学习", {…} => {…}, 0 => Array(2), Array(2) => Array(2)}
//size 键值对的个数
// get set has delete clear
//1:get(key) 获取value
console.log(map1.get(1)); //瑶瑶
console.log(map1.get(true)); //爱学习
console.log(map1.get(o)); //[1, 2]
//2:set(key,value) //如果这个key已经有了->修改；key没有->增加
map1.set("hh", "hh");
console.log(map1); //{1 => "瑶瑶", true => "爱学习", {…} => {…}, {…} => Array(2), Array(2) => Array(2),{"hh"=>"hh"}}
//3:has 判断key有没有对应的value //有->true；没有->false
console.log(map1.has(1)); //true
//4:delete 删除属性key 返回true、false
console.log(map1.delete(1)); //true
//5:clear 清空 没有返回值
console.log(map1.clear());
console.log(map1); //{}
//foreach keys values entries
let map2 = new Map([
[1, "1"],
[true, "true"],
[o, {
name: "yaoyao"
}],
[ary, [1, 2, 3]]
]);
// 1:foreach
map2.forEach((value, key, input) => {
console.log(value);
console.log(key);
console.log(input)
})
//2:key
for (let key of map2.keys()) {
console.log(key) //1 true {} [1,2]
}
//3:value
for (let val of map2.values()) {
console.log(val);
}
//4:input
for (let [key, value] of map2.entries()) {
console.log(key, value)
}
// 给你一个数组变成map实例
let arr=["a","b","c","d","e"];
let map3=new Map();
for(let [index,item] of arr.entries()){
map3.set(index,item);
}
console.log(map3);//{0 => "a", 1 => "b", 2 => "c", 3 => "d", 4 => "e"}
</script>
</html>
六：async
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
//【基础使用】async 函数默认返回一个promise对象
async function getA() {
//return 的内容就是返回的成功回调的参数，没有return就是undefined
//这里报错了就会被catch捕获到
throw new Error("对不起")
return "瑶瑶";
}
getA().then((res) => {
console.log(res); //瑶瑶
}, (err) => {
console.log(err); //Error: 对不起 at getA (async.html:14) at async.html:17
})
//【await搭配使用】
let p = new Promise((resolve, reject) => {
resolve("哟啊哟啊");
// 使用reject同
})
async function getB() {
//await 后面是一个promise实例 如果不是也会默认转为Promise
//直接让promise实例的回调执行 返回执行时的参数
//await是一个语法糖 不用通过then就可以拿到resolve或者reject的参数
let a = await p;
// 等await后面的异步完成之后再去执行后面的代码
console.log(a + ":1"); //哟啊哟啊:1
return a;
}
getB().then((res) => {
console.log(res + ":2") // 哟啊哟啊:2
// console.log(res) //undefined 因为没有return
}, (err) => {
console.log(err);
})
//【axios搭配使用】http://www.axios-js.com/zh-cn/docs/#axios-post-url-data-config-1
// 返回值将用于下一个函数请求【1】
// axios({
// method: 'post',
// url: 'https://flpt.ruiyanghj.com:9443/project/api/1.0/presentconvert/list',
// responseType: 'json',
// data: {
// pageNum: 1,
// pageSize: 10
// },
// // headers: {'X-Requested-With': 'XMLHttpRequest'},
// })
// .then(async (res) => {
// axios({ ...
// })
// });
// 返回值将用于下一个函数请求【2】
async function B() {
const res = await axios({
method: 'post',
url: 'https://flpt.ruiyanghj.com:9443/project/api/1.0/presentconvert/list',
responseType: 'json',
data: {
pageNum: 1,
pageSize: 10
},
// headers: {'X-Requested-With': 'XMLHttpRequest'},
})
.then((res) => {
return res;
});
const endRes = await axios({
method: 'post',
url: 'https://flpt.ruiyanghj.com:9443/project/api/1.0/presentconvert/list',
responseType: 'json',
data: {
res: res
},
// headers: {'X-Requested-With': 'XMLHttpRequest'},
})
.then((res) => {
console.log(res);
})
}
B();
</script>
</html>
七：class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
hhh
</body>
<script type="text/javascript" src="./继承.js"></script>
<script type="text/javascript" src="./class执行问题.js"></script>
<script type="text/javascript">
//【普通函数】
// function fn1() {
// this.x = 10;
// }
// fn1.prototype.getX = function() {};
// let f = new fn1();
// fn1();可直接执行
//【类】
class A {
// A表示一个类,constructor表示类本身
constructor(x) { //类本身的函数
// this: 当前实例
this.x = x; //增加私有属性
//return的是基本数据类型对实例没有影响，如果是引用数据类型会改变实例
}
}
let a = new A(10);
console.log(a); //{x:10}
console.log(typeof A); //function
//区别1：A(); 报错！类必须使用new执行不可以作为普通函数执行
//区别2:name问题：BB只能在类里面使用 类的name都是BB
let B = class BB {
//BB只能在类里面使用 类的name都是BB
constructor() {
console.log(BB.name); //BB
}
getB() {
console.log(BB.name);
}
}
// let b = new BB(); //报错:BB is not defined
let b = new B(); //BB
b.getB(); //BB
//区别3：执行问题,见js
</script>
</html>
class QQ {
constructor(q) {
this.q = q;
console.log("1"+q);
}
getq1() {
console.log("2"+this.q);
}
static getq2() {
console.log(this);
console.log("3"+this.q);
}
}
// QQ.getq1();//QQ.getq1 is not a function 需要实例调用
QQ.getq2();
// 子类继承父类
class WW extends QQ {
constructor(q) {
// 子类没有this this继承父类 super;执行完成之后才会有this；
//super() 就是父类的constructor
// this.q = 100; //!!不可以在super执行之前使用this 报错Must call super constructor in derived class before accessing 'this' or returning from derived constructor
super(q);
this.q = "儿子";
}
getA() {
//super 指向父类WW的原型
super.getq1();
}
// static 父类的静态/私有方法也可以继承
static getB() {
//super 指向父类本身
super.getq2();
}
}
let ww = new WW();
ww.getA(); //2儿子 ww!!通过super指向父类WW原型， 继承父亲的getq1()方法
WW.getB();//一大段方法 WW!!通过super直接指向父亲本身
//【1】:【执行问题】
// 普通函数 function
function CC(name) {
this.name = name;
}
let cc = new CC("瑶瑶");
// 类 class
class AA {
constructor(name) {
this.name = name;
}
}
let aa = new AA("瑶瑶");
console.log(aa); //{"name":"瑶瑶"}
//升级版类：采用class表达式让类直接执行
let a1 = new class {
constructor(name) {
console.log(name) //yaoyao
}
}("yaoyao"); //()就表示让当前这个类直接执行，（的内容）是传参；
//【2】:【变量提升】
// function 会有变量提升
FF();
new FF();
function FF() {
this.f = "ff";
}
//类class- ES6中class跟let 和const一样没有变量提升
// new GG ();//GG is not defined
class GG {
constructor() {
this.gg = "gg";
}
}
//【3】:静态方法
// 类就相当原型，写在原型上的方法都被实例继承了，假如想给当前类本身加一些方法，可以在方法前面加上一个关键字static，不会被实例继承，只有类本身可以使用，例如array.of
class XX {
constructor() {
this.x = "原型";
}
getX1() {
console.log("写在原型上，实例可继承的方法")
}
static getX2() {
console.log("static静态方法，不可被实例继承")
}
}
let xx = new XX;
console.log(xx); //XX{x:"原型"}
xx.getX1(); //写在原型上，可继承的方法
// xx.getX2(); //xx.getYY is not a function 拿不到static的方法
//【原型上的非静态方法继承】
class YY extends XX {
getY1() {
super.getX1(); //父亲可继承的函数getX1,打印继承的结果
}
getY2() {
super.getX2(); //父亲不可继承的函数getX2,打印不出来东西也不报错，反正不可继承
}
}
let y = new YY;
console.log(y); //YY {x: "原型"}
//【原型上的方法不可枚举】
function M() {
this.m = "1";
}
M.prototype.getM = function() {};
let m = new M;
for (let key in m) {
console.log(key); //m getM
}
class MM {
constructor() {
this.m = "1"
}
getm() {}
}
let mm = new MM;
for (let key in mm) {
console.log(key); //m
}
console.log(Object.getOwnPropertyDescriptor(MM.prototype, "getm"));
//{value: ƒ, writable: true, enumerable: false, configurable: true不可枚举
八：module
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="module" src="main.js">
<!-- type：module 告诉浏览器这里引入的是模块的形式 -->
<!-- 浏览器兼容： -->
</script>
</html>
// 模块导入（1） 第三方(npm install>node_modules) 不用./（2）自定义的 ./
console.log(num);
import {
num,
str
} from "./zf.js"
// 需使用结构赋值：let {num,str}={num:100,str:"瑶瑶"}
//区别：import有变量提声,但是开发一般写在上面，（let没有变量提声）
// var str=1;不可以重复声明
// 一次性获取全部
import *as zf from "./zf.js";
console.log(zf);
import px from './px.js'
console.log(px);
//js模块外面套了一层闭包，只能导出内容，不能导出文件
export let num = 100;
export let str = "瑶瑶";
// 默认导出为{num,str}
let arr=[1,2,3,4,5];
let str="爱学习";
export default {arr,str};//通过default导出，可以一次性导入
4348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
