js高级

目录

作用域 

js传参

原型链

  1.函数的显示原型指向的对象默认是空Object实例对象（但Object不满足） 

 2.所有函数都是Function的实例（包含Function） 

 3. Object的原型对象是原型链的尽头 

箭头函数与普通函数的区别

async和await

宏任务微任务的标记  

---

作用域 

var x = 10;
 
function fn(){
    console.log('fn');
    console.log(x);
}
 
function show(f){
    console.log('show');
    var x = 20;
    f();    // 10 
}
 
show(fn);

这段代码输出10的原因是:

1. var声明的变量具有函数作用域。x是在全局作用域声明的,它的作用域是整个代码。

2. show函数内声明的x和全局x是两个不同的变量。show函数内声明的x只在show函数内有效,不影响全局x。

3. fn函数引用的是全局x,而不是show内部的x。当show调用fn函数时,fn内打印的是全局x,而不是show内部的x。

所以最终输出的是全局x的值10,而不是show内部x的值20。

函数内声明的变量不会影响同名的全局变量,函数内外同名变量实际上是不同的变量。fn函数引用的是全局x,所以打印出来是10。

 === 不会进行强制类型转换 ==会进行类型转换

js传参

JavaScript的传参是传值的(不论基本类型还是对象类型)，而不是传引用的，或者传其他的什么东西。

基础：var a = {age:12};

                 a = {name:"mike",age:13};//此时a指向了另一个对象

var a = {age:12};
          var b = a;
          a = {name:"mike",age:13};
          b.age = 14;
          console.log(b.age,a.name,a.age);  //14,mike,13

          function fun2(obj){
            console.log(obj);//{name: 'mike', age: 13}
            obj = {age:15};
            console.log(obj,a);//{age:15},{name: 'mike', age: 13}
          };

          fun2(a);
          console.log(a.age);   //13

在fun2（a）传参时，只是将a的地址传过去，但通过obj={age:15};这行代码，将obj存储的地址改变了，但外部a的地址并没有改变，故输出的a.age还是原来的13

var o = 10;
function foo(obj){
 console.log(obj,o);    // 10,10
    obj = 20;
    console.log(obj,o);    //20,10
};

foo(o); 
console.log(o); // 10

 基本数据类型也相同，作为形参基本数据类型传值过去，引用数据类型传地址过去

原型链

对象的隐式原型的值为其对应构造函数的显示原型的值

  1.函数的显示原型指向的对象默认是空Object实例对象（但Object不满足） 

console.log(Fn.prototype instanceof Object); //true

console.log(Object.prototype instanceof Object); //false

console.log(Function.prototype instanceof Object); //true

 2.所有函数都是Function的实例（包含Function） 

console.log(Function.__proto__ === Function.prototype);

 3. Object的原型对象是原型链的尽头 

console.log(Object.prototype.__proto__); //null

箭头函数与普通函数的区别

• 1、箭头函数不可作为构造函数，不能使用new

• 2、箭头函数没有自己的this

• 3、箭头函数没有arguments对象

• 4、箭头函数没有原型对象

async和await

搭配使用，规定了异步操作只能一个一个排队执行

async function fn () {
  const res1 = await request(5)
  const res2 = await request(res1)
  console.log(res2) // 2秒后输出 20
}
fn()

await后面接的不是Promise的话，有可能达不到排队的效果

axios返回的是Promise对象

总结一下async/await的知识点

await只能在async函数中使用，不然会报错
async函数返回的是一个Promise对象，有无值看有无return值
await后面最好是接Promise，虽然接其他值也能达到排队效果
async/await作用是用同步方式，执行异步操作

原文链接：https://blog.csdn.net/CSDN_KONGlX/article/details/125631281

宏任务微任务的标记  

setTimeout(() => { // 异步：宏任务 setTimeout
  console.log(1)
}, 0)
console.log(2) // 同步
const p = new Promise((resolve) => { // p 是 then1 执行返回的新 Promise
  console.log(3) // 同步
  resolve()
}).then(() => { // 异步：微任务 then1
  console.log(4)
  // 拿着 p 重新 then
  p.then(() => { // 异步：微任务 then2
    console.log(5)
  })
})
console.log(6) // 同步 6