【2023前端刷题总结】

最新推荐文章于 2024-04-23 16:26:38 发布

卿卿qing

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量655

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_43900414/article/details/131532394

版权

1、给子scope发送消息

Angular 的知识，没有$send.

$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data
$on用于接收event与data
$emit() 是向上冒泡
$broadcast() 是向下传播事件

发送消息： $scope.$emit(name, data) 或者 $scope.$broadcast(name, data);
接收消息： $scope.on(name,function(event,data){ });

区别： $emit 广播给父controller   $broadcast 广播给子controller

broadcast 是从发送者向他的子scope广播一个事件。

$emit 广播给父controller，父controller 是可以收到消息

$on 有两个参数function(event,msg)  第一个参数是事件对象，第二个参数是接收到消息信息

2、下面这段JS程序的执行结果是：

var user = {
 count : 1,
 getCount: function(){
  return this.count;
 }
}
var func = user.getCount 等价于 var func = function(){return this.count}// this指向window，打印结果是undefined
var func =user.getCount() // 表示调用这个方法，打印结果是1
console.log(func())

// 1.调用对象未声明的属性会undifned
var user={};
console.log(user.name);//undifned

// 2.使用未赋值只声明的基本数据类型会undifned
var one;
console.log(one);//undifned

// 3.使用未声明的变量会报错
console.log(two);//new_file.html:15 Uncaught ReferenceError: two is not defined

在本题中，this指向的是window , window对象已经自动被浏览器声明了，只是还没有声明count属性，所以也是undifned

因为在函数调用时，this才会发生绑定，而且是谁调用this，this就指向谁。在本题中，func的运行环境是全局，因此this指向全局对象。如果去掉this，那只是在全局调用了一个没有声明局部变量的方法。引用它就会报错。
var func =user. getCount 等价于 var func=function(){return this.count} 所以this指向window
var func =user. getCount() 表示调用方法这个时候才输出1

3、哪个浏览器是Webkit内核

Trident内核：IE，360，傲游，搜狗，世界之窗，腾讯等
Gecko内核：MozillaSuite/SeaMonkey
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari，Chrome等。 [ Chrome的：Blink（WebKit的分支）]

4、call() 打印结果

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

代码解析：
obj属性log指向console的log函数
众所周知console的log函数接收一个参数用于打印
第三句代码call使得obj.log函数里的this指向了console，第二个参数作为log函数的参数，所以实际上打印的是call传进去的第二个参数，传啥打印啥
obj.log.call(console,this)等价于obj.log(this);因为call改的this根本没有用到

obj.log和console.log指向同一个函数， 使用obj.log.call（console）其实就是调用console.log()。 console.log(message)接受参数message并打印 obj.log.call(console, this)与console.log(this)相同，而在全局作用域下这个this为window!

5、事件循环机制（同步事件，宏任务、微任务）

Js 是单线程，多任务执行时会触发进程阻塞问题。所以，Js 有两种任务的执行模式：同步和异步。
同步任务：运行在主线程，先于异步任务执行
异步任务：分为宏任务和微任务，微任务先于宏任务执行
微任务：process.nextTick、Promise.then/ catch/finally、async修饰的函数，默认返回 Promise 对象
宏任务：setTimeout、setInterval、ajax请求、文件读写操作

同步代码执行顺序优先级高于异步代码执行顺序优先级；
new Promise(fn)中的fn是同步执行；
process.nextTick()>Promise.then()>setTimeout>setImmediate。

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
    // await console.log('async21');// 这一行改变'async1 end' 'promise2'输出顺序
}
console.log('script start');
setTimeout(() => {
    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’
解释：
先async 声明俩个函数但未执行；随之执行同步语句 script start；
接着 setTimeout 进入宏任务队列，执行async1() 输出async1 start；
到达await async2() 立即执行async2() 输出 async2；
而后面的语句console.log(‘async1 end’) 进入微任务队列；
继续往后到达 new Promise 开始执行输出promise1；
遇见resolve() 需要通过 .then 得结果，其进入微任务队列，无输出；
（到此，微任务队列有：async1 end，promise2 ；宏任务队列有：setTimeout）
接着同步语句输出script end；
然后，依次输出微任务：async1 end，promise2
然后，依次输出宏任务：setTimeout

console.log(1);
 
async function asyFunction () {
    console.log(2);
    await console.log(3);
    await console.log(4);
    console.log(5);
    return 6
}
 
new Promise((resolve, reject) => {
    console.log(10);
    resolve();
}).then(res => {
    console.log(11);
})
 
console.log(7);
 
 
setTimeout(() => {
    console.log(8)
}, 2000)
 
setTimeout(() => {
    console.log(9)
}, 1000)
 
asyFunction().then(res => { console.log(res) });

结果：1 10 7 2 3 11 4 5 6 9 8
解释：
首先，执行同步语句，输出1
接着async 声明一个函数但未执行；随之执行 new Promise 输出10，并将.then（11）放进微队列
然后，执行同步语句，输出7；接着俩个 setTimeout 进入宏队列
最后执行前面声明的异步函数，立即输出 2 ，3（类似第一题）
没有输出4是因为前一个await，将其及后的 .log（5）均放入微队列
接着 return 6 由该异步函数的.then 接住放入微队列
到此，微队列里依次是 11 4 5 6，逐个输出
而宏队列的由延迟时间大小，依次输出 9 8

setImmediate(function () {
  console.log(1);
}, 0);
setTimeout(function () {
  console.log(2);
}, 0);
new Promise(function (resolve) {
  console.log(3);
  resolve();
  console.log(4);
}).then(function () {
  console.log(5);
});
console.log(6);
process.nextTick(function () {
  console.log(7);
});
console.log(8);
 
// 3 4 6 8 7 5 2 1

解释：
new Promise(fn)中的fn是同步执行；
process.nextTick()>Promise.then()>setTimeout>setImmediate。

//加入两个nextTick的回调函数
process.nextTick(function () {
  console.log('nextTick延迟执行1');
});
process.nextTick(function () {
  console.log('nextTick延迟执行2');
});
// 加入两个setImmediate()的回调函数
setImmediate(function () {
  console.log('setImmediate延迟执行1');
  // 进入下次循环 
  process.nextTick(function () {
    console.log('强势插入');
  });
});
setImmediate(function () {
  console.log('setImmediate延迟执行2');
});
 
console.log('正常执行');

console.log("start");
process.nextTick(() => {
  console.log("a");
  setImmediate(() => {
    console.log("d");
  });
  new Promise(res => res()).then(() => {
    console.log("e");
    process.nextTick(() => {
      console.log("f");
    });
    new Promise(resolve => {
      resolve()
    })
      .then(() => {
        console.log("g");
      });
    setTimeout(() => {
      console.log("h");
    });
  });
});
 
setImmediate(() => {
  console.log("b");
  process.nextTick(() => {
    console.log("c");
  });
  new Promise(res => res()).then(() => {
    console.log("i");
  });
});
console.log("end");
 
// start end a e g f h b c i d