【javaScript练习】2021-02-23

javaScript

1. 作用域，异步执行，requestAnimationFrame

// 5 5 5 5 5 为什么是5不是4？当i=5时跳出循环
// var存在变量提升
for(var i = 0; i < 5; i++){
    requestAnimationFrame(() => console.log(i));
}
// 改成let，结果不一样 0 1 2 3 4
for(let i = 0; i < 5; i++){
    requestAnimationFrame(() => console.log(i));
}

2. 微任务，宏任务，异步执行

// 1 3 5 4
console.log(1);
// 宏任务 后执行
let a = setTimeout(() => {console.log(2)}, 0);
console.log(3);
Promise.resolve(4).then(b => {
    // 微任务 先执行
    console.log(b);
    clearTimeout(a);
});
console.log(5);

3. Array方法

会改变数组的方法：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

forEach()

不会改变数组的方法:

filter()

concat()

slice()

map()

4. 阻止默认事件 阻止冒泡

阻止默认事件：

e.preventDefault()

e.returnValue = false (IE)

阻止冒泡：

e.stopPropagation()

e.cancelBubble = true (IE)

5. 函数的this this原理

// 输出window.location
function Foo(){
    console.log(this.location);
}
Foo();

6. 变量提升 函数提升

1. js有变量提升和函数提升,用var声明变量或用 function 函数名（）{ } 声明的会在js预解析阶段提升到顶端(es6的let和const不会提升）
2. 函数提升优先级 高于 变量提升
3. 相同作用域时声明变量而不赋值则还是以前的值， 而子作用域声明不赋值则函数内该值为undefined，因为声明了私有变量

var A = 1;
function A(){};
console.log(A);// 1

function A(){};
var A;
console.log(A);// A还是function 第3点提到的

7. 正则表达式\1的意思
8. call

正确答案是B。
这道题看似在考this的绑定问题，实际上是通过this绑定为幌子，考察非严格模式下JavaScript语句中“this”默认指向全局对象（window）。
题目的关键点在第3行，我们知道，this绑定的优先级是new>bind>call(apply)>obj.func()>默认绑定。也就是说obj.log.call(console, this)语句中，实际上log函数内的this实际上指代的是console（这也是本题最大的陷阱！）。然而实际上这一语句中obj.log.call(console, this)这一语句中打印的this是在外部传进去的，和函数内的this对象根本没有关系！也就是说此时log函数内的this指代console，但是打印的是从外面传进去的this对象，也就是window！
为了证明这一点，读者朋友们可以把obj.log.call(console, this)中的console改成任意一个对象，然后在非严格模式下执行，会发现结果都是window。

var obj = {};
obj.log = console.log;
obj.log.call(console,this);

9. js 精度问题 0.1 + 0.2 != 0.3
10. Reg.exec();
11. 事件冒泡

不冒泡事件</br>
妈（mouseenter）妈(mouseleave)不(blur)放(focus)心你(unload)的日(resize)子了(load)

12.JavaScript实现继承共6种方式：
原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。

14. this 上下文学习链接

• 全局执行上下文： 这是默认的、最基础的执行上下文。不在任何函数中的代码都位于全局执行上下文中。它做了两件事：1. 创建一个全局对象，在浏览器中这个全局对象就是 window 对象。2. 将 this 指针指向这个全局对象。一个程序中只能存在一个全局执行上下文。
• 函数执行上下文：(this) 每次调用函数时，都会为该函数创建一个新的执行上下文。每个函数都拥有自己的执行上下文，但是只有在函数被调用的时候才会被创建。

var obj = {a:1,b:function () {alert(this.a)}}; 
var fun = obj.b; 
// 等同于 var fun = function () {alert(this.a)}
console.log(fun()) // undefind this指向window

var user = {
 count : 1,
 getCount: function(){
  return this.count;
 }
}
var func = user.getCount
console.log(func()) // undefind this指向window

// 改成let呢？
for(var i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i);
    }, 1000 * i);
}

16. 变量声明提升 赋值不会提升 </br> 函数声明提升优先级大于变量声明提升 因此函数声明覆盖变量声明

var b = 3;// 全局作用域
// IIFE 立即调用函数表达式
(function(){
    // 函数作用域
    b = 5;
    var b = 2;// 只在函数内部提升
})();
console.log(b);// 3 全局作用域无法访问函数作用域

17. 魔鬼闭包

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0); 
a.fun(1); a.fun(2);  a.fun(3);//undefined,0,0,0
var b = fun(0).fun(1).fun(2).fun(3);
//undefined,0,1,2
var c = fun(0).fun(1);
c.fun(2); c.fun(3);
//undefined,0,1,1

18. Event loop 宏任务微任务
    详解

宏任务：
script全部代码、setTimeout、setInterval、setImmediate（浏览器暂时不支持，只有IE10支持，具体可见MDN）、I/O、UI Rendering。

【记忆：一个U（UI Rendering）I（I/O）工程师在4S店】



微任务：
Process.nextTick（Node独有）、Promise、Object.observe(废弃)、MutationObserver

console.log('script start');
setTimeout(function() {
  console.log('setTimeout');
}, 0);
new Promise((resolve)=>{
    resolve();
    console.log("new Promise");
}).then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});
console.log('script end');
// script start
// new Promise
// script end
// promise1
// promise2
// setTimeout
// 执行顺序 
// script -> Promise callback -> setTimeout callback

console.log('script start')
async function async1() {
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2 end') 
}
async1()
// async await 是Promise的语法糖
// 可以转换成
// new Promise((resolve)=>{
//     console.log('async2 end');
//     resolve();
// }).then(()=>{
//   console.log('async1 end')
// })
setTimeout(function() {
  console.log('setTimeout')
}, 0)
new Promise(resolve => {
  console.log('Promise')
  resolve()
})
  .then(function() {
    console.log('promise1')
  })
  .then(function() {
    console.log('promise2')
  })

console.log('script end')