preface

The interview date is 19:00 on May 20

It’s time for me to battle with a financial department of Didi again. This time, I have chosen such a special date for my interview.

PS: why 520 this day, I originally set 521, later the date, I have no sister you also don’t want to take sister out to play! This time for a senior front-end position, I hope the interviewer will gently ravage me 😘😘😘😘.

To introduce myself

First of all, the interviewer told me something about him, which made me sit up and take notice. Then it was my show time.

After introducing your personal information, highlights, and project experience, the interview begins.

PS: Here through their own words to attract the attention of the interviewer to the direction of project optimization, after 5 minutes of self-introduction, the interviewer also impressed me, DID not think I can force so much.

Resume relevant

q: Which project impressed you most? What’s the hard part? How was it solved?

PS: The first round of the interview, let me feel the interviewer is not easy, I have to be careful, so I didn’t blow, really, not much blow.

Git

Q:git rebase

Git Rebase is used for branch merges

Git Rebase finds the first common COMMIT ancestor for both branches, extracts all commit records after the current branch, and adds this commit record to the latest commit of the target branch. After this merge, the combined COMMIT record of the two branches becomes a linear record.

PS: a point to send up the question, um ~ is worthy of the senior front end post, this wave is a test, um, yes, must be a test.

Output the topic

Q: Prototype inheritance

function F() {}
Object.prototype.a = function() {
   console.log('a')}Function.prototype.b = function() {
  console.log('b')}const f = new F()
f.a()
f.b()
// My answer
undefinedB. The interviewer leads you to the answer aundefined

// The correct answer
a
Uncaught TypeError: f.b is not a function
Copy the code

Resolution:

  1. f Is notFunctionSince it is not a constructor to begin with, it calls theFunctionThe related properties and methods on the prototype chain are only accessibleObjectThe prototype chain. sof.a()The outputaAnd thef.b()It reported an error.
  2. FIs a constructor, andFIs the constructorFunctionAn example of. becauseF instanceof Object === true.F instanceof Function === trueIt can be concluded that:F 是 Object 和 FunctionTwo instances, that is, F is accessiblea, can also be accessedb. soF.a()Output a,F.b()The outputb.

PS: HERE I am a little nervous, my understanding of the prototype chain is not thorough enough, or afraid to continue to ask this question, after all, the front end of the post, to be careful, fear.

Q: Variable lift

var name = 'World';
(function() {
  if (typeof name === 'undefined') {
    var name = 'Jack'
    console.log('Goodbay ' + name)
  } else {
    console.log('Hello ' + name)
  }
})()
Copy the code

Output: Goodbye Jack

// In JavaScript, both Function and var are promoted, so the above code is equivalent to
var name = 'World! ';
(function () {
    var name;
    if (typeof name === 'undefined') {
        name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();
Copy the code

PS: I didn’t even explain. I just wrote the second piece of code out for the interviewer to see. Give this question is to despise my interview!!!!

Q: Asynchronous & event loops

async function async1() {
  console.log('A')
  await async2()
  consolo.log('B')}async function async2() {
  console.log('C')}console.log('D')

setTimeout(function() {
  console.log('E')
})

async1()

new Promise(function(resolve) {
  console.log('F')
}).then(function() {
  console.log('G')})console.log('H')
// The output sequence is as follows
//D
//A
//C
//F
//H
//B
//undefined
//E
Copy the code

The code execution process is as follows:

  1. The beginning definesasync1 和 async2Two functions, but not executed, execute the code in script, so print outD;
  2. Encounter timersetTimeout, it is a macro task, add it to the macro task queue;
  3. And then execute the functionasync1, first print outA;
  4. encounterawait, the implementation ofasync2To print outC, and block the execution of the following code and add the following code to the microtask queue;
  5. And then jump outasync1andasync2Encountered,PromiseTo print outF;
  6. encounterresolve, add it to the microtask queue, and then execute the following script code to print outH;
  7. Then it’s time to execute the microtask queue, first printing outB“And print it outundefined;
  8. After executing the microtask queue, start to execute the timer in the macro task queue and print outE.

PS: a narrow escape, basically here answer oneself also be satisfied, but my heart but I panic, obviously can’t answer up the most terrible, how to feel the interviewer to give me a big.

Write a topic

Using recursion, traversing the depth of the binary tree

The interviewer asked me if I had brushed the question first, I said no, and then asked about the recursion.

function tree(root) {
  if(! root)return 0
  let leftChildRoot = tree(root.leftChildRoot)
  let rightChildRoot = tree(root.rightChildRoot)
  return Math.max(leftChildRoot,rightChildRoot)
}
// The code wasn't perfect, but the interviewer heard me out and stopped asking me to write it.
Copy the code

PS: this question will win, so easy to answer, I am more satisfied with myself, in a word, it seems that the outcome of the interview has been divided, I stable the interviewer are you not recruit ~~ took off ha ha ha this is big?

Componsition API

Q:Componsition API?

In Vue2, the code is in the Options API style, which is to complete a Vue component by populating (option) data, Methods, computed, etc. This style makes Vue easy to use, but it also creates several problems:

  1. Due to theOptions APIThe inflexible way of development makesVueDevelopment lacks an elegant way to share code between components.
  2. VueComponent dependencethisContext,TypeScript 在 Vue2Chinese is very difficult to use.

In Vue3, the Options API was abandoned in favor of the Composition API. The Composition API essentially exposes the mechanisms behind the Options API to direct use, which gives users more flexibility and makes Vue3 a good fit for TypeScript.

Q: Composition API is similar to React Hook. What is the difference?

I haven’t used React Hooks yet but I can talk about some of the features of the Composition API

  • The statement insetupFunction, a component instantiation is called only oncesetup
  • Compositon APIIt can also be used in loops, conditions, or nested functions
  • The responsive system automatically implements dependency collection, and then the performance optimization of parts of the components is done in-house by Vue, which improves the performance of the components.

PS: At the beginning, I didn’t hear clearly when the interviewer asked, but later the interviewer said it was Vue’s. I have the experience of losing the question because I didn’t hear clearly in the interview, so I let the interviewer type out the words, which was a close call.

Engineering understanding

Q: Your understanding of front-end engineering

PS: here is the general understanding, anyway, handwriting and code output are out, the question is also a more satisfactory answer, here I said also more relaxed.

ask

“

Sorry for your trouble, I have to return 520 today, and I didn’t go out to play with my girlfriend. I’m really sorry ~

In the heart

Elder brother 520 you don’t accompany girlfriend, your girlfriend won’t be angry?

Brother 520 you video with me, your girlfriend won’t hit me?

I will only love dearly brother ~~

PS: The real situation is definitely not so straightforward to ask, but I certainly hinted.

conclusion

The interview is about an hour small, more face more happy, more chatter more happy, although I did not master the rhythm, but this interviewer is too on the road, the next few rounds, but this intensity I don’t steady ow, all send points.

Recast didi glory, we are duty-bound!!!!

Successful first battle!!!!

I was abused by the interviewers of Didi before, but now I have regained my face and regained my field. The interviewers of Didi will not give up, so what will they do next round?

Sneaky say, I dream smile wake up ~