<body> 姓名:<span id="spanName"></span> <br> <input type="text" id="inpName"> <script> let a = {}, b = '0', c = 0 ; a[b] = 'lord'; a[c] = 'suan'; console.log(a[b]); //'suan' let a = {}, b = Symbol('1'), c = Symbol('1'); a[b] = 'lord'; a[c] = 'suan'; console.log(a[b]); //'lord' let a = {}, b = { n : '1' }, c = { m : '2' }; a[b] = 'lord'; a[c] = 'suan'; console.log(a[b]); //'suan' var test = (function(i){ return function() { alert(i *= 2) } })(2); test(5); //'4' var a = 0, b = 0; function A(a){ A = function (b) { alert(a + b++); }; alert(a++); } A(1); //'1' A(2); //'4' let obj = { a: 100, b :[10,20,30], c: { x:10 }, d : /^d+$/ }; 浅克隆1 弊端：obj2数据更改之后 obj也更改了 let obj2 = {}; for(let key in obj) { //hasOwnProperty过滤私有的 if(!obj.hasOwnProperty(key)) break; obj2[key] = obj[key]; } 浅克隆1 let obj2 = {...obj}; 深克隆 一般使用深克隆 JSON.stringify(obj) 的时候，弊端：函数 时间 正则都会出现问题 let obj2 = JSON.parse(JSON.stringify(obj)); console.log(obj,obj2); 深克隆de弊端怎么办 function deepClone(obj) { //过滤特殊情况 if(obj === null) return null; if(typeod obj !== "object") return obj; if(obj instanceof RegExp) { //正则 return new RegExp(obj); } if(obj instanceof Date) { //时间 return new Date(obj); } // 函数的办法 递归 // 不直接创建对象目的，克隆的结果和之前保持相同的所属类 let newObj = new obj.constructor; for (let key in obj) { if(obj.hasOwnProperty(key)){ newObj[key] = deepClone(obj[key]); } } return newObj; } let obj2 = deepClone(obj); console.log(obj,obj2); console.log(obj === obj2); console.log(obj.c === obj2.c); 面向对象 function Foo() { getName = function () { console.log(1); }; return this; } Foo.getName = function () { console.log(2); } Foo.prototype.getName = function() { console.log(3); } var getName = function() { console.log(4); } function getName () { console.log(5); } Foo.getName(); //2 getName(); //4 Foo().getName(); // 1 getName(); //1 new Foo.getName(); //2 new Foo().getName(); //3 new new Foo().getName();//3 同步异步 async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(function () { console.log('setTimeout'); },0) async1(); new Promise(function (resolve) { console.log('promise1'); resolve(); }).then(function() { console.log('promise2'); }); console.log('script end'); script start async1 start async2 promise1 script end async1 end promise2 setTimeout 闭包 vue双向数据绑定原理 2.0 let obj = { name:'' }; let newObj = JSON.parse(JSON.stringify(obj)); Object.defineProperty(obj,'name',{ get() { return newObj.name; }, set(val) { if(val === newObj.name) return; newObj.name = val; observer(); } }); function observer() { spanName.innerHTML = obj.name; inpName.value = obj.name; } setTimeout(()=>{ obj.name = 'lord'; },1000) inpName.oninput = function () { obj.name = this.value } 2.0问题 需要深克隆 3.0 let obj = {}; obj = new Proxy(obj,{ get (target,prop) { //target指 obj prop指obj里的属性 value指值 return target[prop]; }, set(target,prop,value) { target[prop] = value; observer() } }) function observer() { spanName.innerHTML = obj.name; inpName.value = obj.name; } setTimeout(()=>{ obj.name = 'lord'; },1000) inpName.oninput = function () { obj.name = this.value } </script> </body>