javaScript
- 作用域,异步执行,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));
}
- 微任务,宏任务,异步执行
// 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);
- Array方法
会改变数组的方法:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
forEach()
不会改变数组的方法:
filter()
concat()
slice()
map()
- 阻止默认事件 阻止冒泡
阻止默认事件:
e.preventDefault()
e.returnValue = false (IE)
阻止冒泡:
e.stopPropagation()
e.cancelBubble = true (IE)
- 函数的this this原理
// 输出window.location
function Foo(){
console.log(this.location);
}
Foo();
- 变量提升 函数提升
- js有变量提升和函数提升,用var声明变量或用 function 函数名(){ } 声明的会在js预解析阶段提升到顶端(es6的let和const不会提升)
- 函数提升优先级 高于 变量提升
- 相同作用域时声明变量而不赋值则还是以前的值, 而子作用域声明不赋值则函数内该值为undefined,因为声明了私有变量
var A = 1;
function A(){};
console.log(A);// 1
function A(){};
var A;
console.log(A);// A还是function 第3点提到的
- 正则表达式\1的意思
- 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);
- js 精度问题 0.1 + 0.2 != 0.3
- Reg.exec();
- 事件冒泡
不冒泡事件</br>
妈(mouseenter)妈(mouseleave)不(blur)放(focus)心你(unload)的日(resize)子了(load)
12.JavaScript实现继承共6种方式:
原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。
- 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);
}
- 变量声明提升 赋值不会提升 </br> 函数声明提升优先级大于变量声明提升 因此函数声明覆盖变量声明
var b = 3;// 全局作用域
// IIFE 立即调用函数表达式
(function(){
// 函数作用域
b = 5;
var b = 2;// 只在函数内部提升
})();
console.log(b);// 3 全局作用域无法访问函数作用域
- 魔鬼闭包
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
- 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')
网友评论