note

abstain23 · Dec 16, 2019 · 459f4b0 · 459f4b0
1 parent cb996c0
commit 459f4b0
Show file tree

Hide file tree

Showing 7 changed files with 387 additions and 1 deletion.
diff --git a/every morning/1216.js b/every morning/1216.js
@@ -0,0 +1,89 @@
+const a = {}
+const b = {key: 'b'}
+const c = {key: 'c'}
+
+a[b] = 123
+console.log(a) //{[object Object]: 123}
+a[c] = 456
+console.log(a)  //{[object Object]: 456}
+console.log(a[b])
+
+
+//箭头函数没有this,只会使用最近的this
+
+let obj1 = {
+  name: 'obj1 name',
+  print(){
+    return() => {console.log(this.name)}
+  }
+}
+
+let obj2 = {name: 'obj2 name'}
+
+obj1.print()() // obj1 name
+obj1.print().call(obj2) // obj1 name 箭头函数无this，绑定也无用
+obj1.print.call(obj2)() //obj2 name
+
+
+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')
+  awit async2()
+  console.log('async1 end')
+}
+
+async function async2(){
+  console.log('async2')
+}
+
+console.log('script start')
+
+setTimeout(() => {
+  console.log('settimeout0')
+}, 0);
+
+setTimeout(() => {
+  console.log('settimeout3')
+}, 3);
+
+setImmediate(() => {console.log('setimmediate')})
+
+process.nextTick(() => {console.log('nexttick')})
+
+async1()
+
+new Promise((resolve) => {
+  console.log('promise1')
+  resolve()
+  console.log('promise2')
+}).then(() => {
+  console.log('promise3')
+})
+
+console.log('script end')  //script start -> 
diff --git a/专题系列/debounce.html b/专题系列/debounce.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>防抖</title>
+  <style>
+    #container{
+            width: 100%; height: 200px; line-height: 200px; text-align: center; color: #fff; background-color: #444; font-size: 30px;
+        }
+  </style>
+</head>
+<body>
+  <div id="container"></div>
+  <script>
+    var count = 1
+    var container = document.getElementById('container')
+    function ll(e){
+      container.innerHTML = count ++
+      console.log(this)
+      console.log(e)
+    }
+
+
+    //第一版
+      container.onmousemove = debounce(ll,100)
+
+    function debounce(fn,wait){
+      var timeout
+      return function() {
+        clearTimeout(timeout)
+        timeout = setTimeout(fn,wait)
+      }
+    }
+
+    //第二版
+
+    function debounce(fn,wait){
+      var timeout
+      return function() {
+        var _that = this
+        var args = arguments
+        clearTimeout(timeout)
+        timeout = setTimeout(()=>{
+          fn.apply(_that,args)
+        },wait)
+      }
+    }
+  </script>
+</body>
+</html>
diff --git a/专题系列/requestAnimationframe.html b/专题系列/requestAnimationframe.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <style>
+    #test {
+      height: 500px;
+      background-color: gray;
+    }
+    .yuan {
+      height: 200px;
+      width: 200px;
+      border-radius: 50%;
+      border: 1px solid red;
+      margin-top: 10px;
+      text-align: center;
+      line-height: 200px;
+    }
+  </style>
+</head>
+<body>
+  <div id="myDiv" style="width: 0;height: 20px;line-height: 20px;background-color: gray;border-radius: 10px;text-align: left;">0%</div>
+  <div class="yuan" id="xx">0%</div>
+<button id="btn">run</button>
+<button id="btn2">run2</button>
+<script>
+var timer;
+btn.onclick = function(){
+    myDiv.style.width = '0';
+    cancelAnimationFrame(timer);
+    var timer = requestAnimationFrame(function fn(){
+        if(parseInt(myDiv.style.width) < document.documentElement.offsetWidth-100){
+            myDiv.style.width = parseInt(myDiv.style.width) + ((document.documentElement.offsetWidth-100)/100) + 'px';
+            myDiv.innerHTML =   parseInt(parseInt(myDiv.style.width)/((document.documentElement.offsetWidth-100)/100)) + '%';
+            timer = requestAnimationFrame(fn);
+        }else{
+            cancelAnimationFrame(timer);
+        }    
+    });
+}
+
+btn2.onclick = function() {
+  xx.innerHTML=0+'%'
+  xx.style.background = ''
+  cancelAnimationFrame(timer)
+
+  timer = requestAnimationFrame(function fn(){
+    return new Promise((a) => {
+      if(parseInt(xx.innerHTML)<100){
+      // console.log(xx.innerHTML)
+      var text = parseInt(xx.innerHTML) + 1
+      xx.innerHTML = text + '%'
+      timer = requestAnimationFrame(fn)
+    }else {
+      cancelAnimationFrame(timer)
+      a()
+    }
+    }).then(() => {
+      setTimeout(() => [
+      xx.style.background = 'pink'
+      ],100)
+
+    })
+  })
+}
+
+// setInterval(() => {
+//     console.log('xx')
+//     let text = parseInt(xx.innerHTML)+1
+//     xx.innerHTML = text + '%'
+//   }, 10);
+
+  </script>
+</body>
+</html>
diff --git a/深入系列/new关键字.html b/深入系列/new关键字.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>new一下</title>
+</head>
+<body>
+  <script>
+    function copyNew(){
+      const obj = {}
+      Constructor = [].shift.call(arguments) //拿到需要传进来的构造函数
+      obj.__proto__ = Constructor.prototype
+      var res = Constructor.apply(obj,arguments)
+      // if(!res){
+      //   return obj
+      // }else {
+      //   let type = typeof res
+      //   if(type === 'object'||type === 'function'){
+      //     return res
+      //   }else {
+      //     return obj
+      //   }
+      // }
+      return (typeof res === 'object' || typeof res === 'function')?res || obj:obj
+
+      // return typeof res === 'object' ? res : obj;
+    }
+
+
+    function Person (name,age){
+      this.name = name
+      this.age = age
+
+      // return function(){console.log('function')}
+      // return function(){console.log('tttttt')}
+      return null
+    }
+    Person.prototype.run =function(){
+      console.log(this.name+' is running')
+    }
+
+    const oo = copyNew(Person,'blei',18)
+    console.log(oo) //null
+    // oo.run()  
+
+    let ff = new Person('xx',3)
+    console.log(ff)
+  </script>
+</body>
+</html>
diff --git a/深入系列/深入之bind的实现.html b/深入系列/深入之bind的实现.html
@@ -103,7 +103,7 @@
         let allArgs = args.concat([...arguments])
         // console.log(2,this)
         // console.log(111)
-        if(this instanceof F){
+        if(this instanceof F){ //判断当前返回的函数作为构造函数时
           return new _this(...allArgs)
         }
         return _this.apply(context,allArgs)

diff --git a/深入系列/深入之类数组对象与arguments.html b/深入系列/深入之类数组对象与arguments.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+
+<body>
+  <script>
+    //
+
+    var array = ['name', 'age', 'sex'];
+
+    var arrayLike = {
+      0: 'name',
+      1: 'age',
+      2: 'sex',
+      length: 3
+    }
+    // 类数组不能使用数组的方法
+    // arrayLike.push('4'); //报错 arrayLike.push is not a function
+  //  console.log(Array.prototype.join.call(arrayLike,'&')) 
+
+  //  let res = Array.prototype.splice.call(arrayLike,0)
+
+  //  let res = Array.from(arrayLike)
+
+  //   let res = Array.prototype.slice.call(arrayLike) 
+
+  //   let res = Array.prototype.concat.apply([],arrayLike)
+  // let res = new Set(...arrayLike) 错误
+  //  console.log(res)
+
+
+//   function foo(age, sex) {
+//     console.log(foo.length)
+//     // eval (arguments.callee) 
+// }
+
+// foo('name', 'age', 'sex')
+
+var data = [];
+
+for (var i = 0; i < 3; i++) {
+    (data[i] = function () {
+       console.log(arguments.callee.i) 
+    }).i = i;
+}
+
+data[0]()
+data[1]()
+data[2]()
+
+  </script>
+</body>
+
+</html>