2018 Meituan front-end, interview questions about Javascript

Get page element position and width?

• element.clientWidth = content + padding
• element.clientHeight = content + padding
• element.getBoundingClientRect() return value
  • left: the distance from the edge outside the left border of the bounding box to the left side of the page
  • right: the distance from the edge outside the right border of the bounding box to the left side of the page
  • top: the distance from the edge of the bounding box outside the top border to the top of the page
  • bottom: The distance from the top of the page beyond the bottom border of the bounding box
  • width: content + padding + border
  • height: content + padding + border
  • Note that when margins are set, the margins are merged

The principle of requestAnimationFrame? Is it synchronous or asynchronous?

Asynchronous, the passed in function is called before repainting

js event mechanism? How does the event propagate when a button is clicked on the screen?

bubble

The output of the following code? Why?

Function.prototype.a = 'a';
Object.prototype.b = 'b';
function Person(){}; var p = new Person(); console.log('p.a: '+ p.a); // p.a: undefined console.log('p.b: '+ p.b); // p.b: b 

The output of the following code? Why?

const person = {
  namea: 'menglinghua',
  say: function (){ return function (){ console.log(this.namea); }; } }; person.say()(); // undefined 

const person = {
  namea: 'menglinghua',
  say: function (){ return () => { console.log(this.namea); }; } }; person.say()(); // menglinghua 

The output of the following code? Why?

setTimeout(() => console.log('a'), 0); var p = new Promise((resolve) => { console.log('b'); resolve(); }); p.then(() => console.log('c')); p.then(() => console.log('d')); console.log('e'); // 结果：b e c d a // 任务队列优先级：promise.Trick()>promise的回调>setTimeout>setImmediate 

async function async1() {
    console.log("a"); await async2(); //执行这一句后，await会让出当前线程，将后面的代码加到任务队列中，然后继续执行函数后面的同步代码 console.log("b"); } async function async2() { console.log( 'c'); } console.log("d"); setTimeout(function () { console.log("e"); },0); async1(); new Promise(function (resolve) { console.log("f"); resolve(); }).then(function () { console.log("g"); }); console.log('h'); // 谁知道为啥结果不一样？？？？？？？？？？？？？ // 直接在控制台中运行结果： d a c f h g b e // 在页面的script标签中运行结果：d a c f h b g e 

js bind implementation mechanism? Write a bind method by hand?

function bind(fn, context){
  return function (){ return fn.apply(context, arguments); } } 

Implement on,emit,off,once in Vue, handwritten code.

Use js to implement double linked list, handwritten code?

Vue's two-way binding mechanism? Details.

What actions cause the browser to redraw and reflow?

• postion:absolute; left:100px; will it cause?
• translateX:100px; will not cause?
• Will getBoundingClientRect be caused?
• Will getClientWidth and getClientHeight be caused?