代码输出题

原创已于 2023-08-07 20:31:21 修改 · 361 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2023-07-08 10:34:03 首次发布

this

定时器不是作用域

const o = {
    aaa() {
        // console.log(this)
       setTimeout(() => {
        console.log(this)
    },0) 
    }
}
o.aaa()//o,17行的this是15行的this，而15行的this是o，因为aaa是被o调用的

拿到getNameFunc函数，然后执行的时候是自执行，所以是window

 const object = {
            name: 'MyObject',
            getNameFunc() {
                console.log(this);
                return () => {
                    console.log(this);
                }
            }
        }
        var a = object.getNameFunc;
        a()()//window window

2.先拿到object.getNameFunc()的值再执行，箭头函数中的this是getNameFunc
下的this，由于getNameFunc的调用方式是通过myobject调用的，所以this是myobject

const myobject = {
    name:'My Object',
    getNameFunc(){
        return()=>{
            return this.name;
        }
    }
}
  
window.name = 'The Window'
  
myobject.getNameFunc()()//MyObject

3.setTimeout的作用域里的this永远指向window

const obj2 = {
    aaa() {
        //aaa(),它的this指向obj2;
        setTimeout(function () {
            //setTimeout内部的this永远指向window;
            setTimeout(function () {
                console.log(this);//window
            })
            setTimeout(() => {
                console.log(this);
                /* window,向外寻找,最先找到的setTimeout的作用域,
                而这个作用域里的this永远指向window. */
            })
        })

        setTimeout(() => {
            setTimeout(function () {
                console.log(this);//window
            })
            setTimeout(() => {
                console.log(this);
                /* obj,向外找到setTimeout,但是是一个箭头函数,
                其中没有this,再向外寻找,aaa()的this,即obj */
            })
        })
    }
}

var name = 'window'

var person1 = {
    name: 'person1',
    foo1: function () {
        console.log(this.name)
    },
    foo2: () => console.log(this.name),
    foo3: function () {
        return function () {
            console.log(this.name)
        }
    },
    foo4: function () {
        console.log(this.name);
        return () => {
            console.log(this.name)
        }
    }
}
var person2 = { name: 'person2' }
var test = person1.foo4;
test()()//window,现在箭头函数的this是foo4函数的this，而最后执行test，这个给this指向window
person1.foo4()(); // person1(箭头函数不绑定this, 上层作用域this是person1)

person1.foo4.call(person2)(); // person2(上层作用域被显示的绑定了一个person2)
person1.foo4().call(person2); // person1(上层找到person1)

new题目

1.因为没有找到Foo.prototype,由于new产生的对象才会去找，但是它返回了一个对象

function Foo() {

    this.a = 1;

    return {

        a: 4,

        b: 5,

    };

}

Foo.prototype.a = 6;

Foo.prototype.b = 7;

Foo.prototype.c = 8;

var o = new Foo();

console.log(o.a);//4

console.log(o.b);//5

console.log(o.c);//undefined

function Foo() {
    Foo.a = function() {
        console.log(1)
    }

    this.a = function() {
        console.log(2)
    }
}

Foo.prototype.a = function() {
    console.log(3)
}

Foo.a = function() {
    console.log(4)
}

Foo.a(); //4

let obj = new Foo();

obj.a(); //2

Foo.a(); //1

事件循环题目

1.看清楚有没有reslove

console.log(0);
setTimeout(() => {
    console.log(1);
    new Promise(resolve => {
        console.log(2);
        // resolve()
    }).then(() => {
        console.log(3);
    })
})

new Promise(resolve => {
    console.log(4);
    for (let i = 0; i < 9; i++) {
        i == 7
    }
    console.log(5);
}).then(() => {
    console.log(6);
})

setTimeout(() => {
    console.log(7);
    new Promise(resolve => {
        console.log(8);
        resolve();
    }).then(() => {
        console.log(9);
    })
})
console.log(10)

2.await async2()后面就是微任务了，promise2先进微任务队列

async function async1() {
    await async2();
    return 'async return';
}
async function async2() {
    console.log("async2");
}
async1().then(function (message) { console.log(message) });
new Promise(function (resolve) {
    resolve();
}).then(function () {
    console.log("promise2");
});

3.node的事件循环
先执行主线程，
然后执行nextTicks队列，
然后执行其他微任务队列，
然后执行timers队列，
然后执行io队列，
然后执行setimmedidate队列

async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}

async function async2() {
  console.log('async2')
}

console.log('script start')

setTimeout(function () {
  console.log('setTimeout0')
}, 0)

setTimeout(function () {
  console.log('setTimeout2')
}, 300)

setImmediate(() => console.log('setImmediate'));

process.nextTick(() => console.log('nextTick1'));

async1();

process.nextTick(() => console.log('nextTick2'));

new Promise(function (resolve) {
  console.log('promise1')
  resolve();
  console.log('promise2')
}).then(function () {
  console.log('promise3')
})

console.log('script end')
// script start
// async1 start
// async2
// promise1
// promise2
// script end
// nextTick1
// nextTick2
// async1 end
//  promise3
// setTimeout0
// setImmediate
// setTimeout2

作用域题目

1.a中的count找的是window在一开始就确定了

var count = 10;
function a() {
    return count + 10;
}
function b() {
    var count = 20;
    return a();
}
console.log(b());

2.变量提升

if (! "a" in window) {
    var a=1
}
alert(a)//undefined

promise题目

1.await后面接的是promise，那么一定会把这个promise执行完才会执行await后面的代码

function a() {
    return new Promise((resolve, reject) => {
        resolve(1)
        console.log(222);
    }).then(res => {
        console.log(res);
        return 2
    }).then(res => {
        console.log(res);
    })
}
//await后面接的是promise，那么一定会把这个promise执行完才会执行await后面的代码。
async function b() {
    let v = await a();
    console.log(111);
    console.log(v);
}
b()
console.log(333);

原型重写题目

        function Animal() {}
const cat = new Animal()
const dog = new Animal()
Animal.prototype = { bark: true }
console.log(cat.bark)
console.log(dog.bark)