とても見応えのある先端面接記事

文章は翻訳から来て、その中でいくつかの重要でない内容を無視してテーマに直行します.
著者はツイッター、ストリープで働き、面接に参加する.実際に面接に参加する人は、短い時間(30 min-1 h)で応募者を判断するのは難しいことを知っているので、より合理的に判断しなければなりません.次は著者がまとめた考え方です.
もし相手にgithubアカウントがあれば、私たちはできるだけTAのオープンソースプロジェクトの動態と彼のオープンソースプロジェクトを理解します.私たちもその中からいくつかの切り込み点を選び、彼がこのプロジェクトをする出発点を交流することで、面接者の設計構想をよりよく理解することができ、その人がチームに適しているかどうかを初歩的に判断することができます.双方のコミュニケーションがスムーズであれば、コードなどの基礎的な問題に直接進みます.
自分の面接は現実的で、ほとんどがcodingで、アルゴリズムや抽象的な概念に言及することはめったにありません.自分の質問は簡単そうに見えますが、javascriptのいくつかの知識分野に関連しています.
面接ではホワイトボードを使うことをお勧めしません.通常、面接者は自分のノートを持っていくか、自分のノートを使ってほしいと思っています.私は彼らのコードを実行し、結果を知らせます.
Object prototype
私が最初に提案した非常に簡単な問題は、関数spacifyを定義し、文字列をパラメータとして入力し、文字列を返すことですが、この文字列の元の入力パラメータに対する変化は、アルファベットとアルファベットの間にスペースが1つ増えたことです.

spacify('hello world') // => 'h e l l o  w o r l d'

問題は簡単ですが、これは良いスタートで、私たちの次の問題はこれをめぐって展開することができます.特に、Javascriptを知っていると主張しているが、実際には関数が1つも書けない面接者に対しては、高い判断を下すことができます.
正解は以下の通りですが、一部の面接者はforループを選ぶかもしれません.もちろん間違いありません.

function spacify(str) {
  return str.split('').join(' ');
}

次に、この関数を文字列オブジェクトに直接作用する方法を聞き続けます.

'hello world'.spacify();

この問題は面接者のプロトタイプチェーンに対する理解を理解することができ、この問題は互いにプロトタイプチェーン上で属性を直接定義する危害などの議論を展開することができる.実績期待結果:

String.prototype.spacify = function(){
  return this.split('').join(' ');
};

一般的にここでは、面接者に関数宣言と関数式の違いを説明させます.
Arguments
次に、argumentsに対する面接者の理解を理解し、log関数を指定するように面接者に要求します.

log('hello world');

関数は、単純なコンソール出力と同様に、コンソールに入力された文字列を出力します.面接者は定義された関数にconsole.logと直接書きますが、もっと優秀な面接者がapplyを直接使うことがあります.

function log(msg){
  console.log(msg);
}

次に、複数のパラメータを入力しても文字列を出力している場合は、面接者に入力パラメータが固定されていないことを示すように質問し続けます.著者console.logは実際には複数のパラメータも受け入れられる.

log('hello', 'world');

しかし、私はやはりあなたの面接者が今applyを思い出していることを望んでいます.面接者はapplyとcallで戸惑うかもしれませんが、この時はちょっとヒントをしますが、consoleの文脈を伝えることも大切です.

function log(){
  console.log.apply(console, arguments);
};

次に、出力された文字列の前に(app)という文字列を統一的に追加したい場合は、次のように質問します.

'(app) hello world'

この問題は明らかに複雑で、面接者はargumentsが偽の配列であることを知っているはずです.私たちはまずそれを正常な配列に変換する必要があります.私たちはArray.prototype.sliceを使用することができます.コードは以下の通りです.

function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');

  console.log.apply(console, args);
};

Context
次に、 およびthisに対する面接者の理解を知りたいのですが、countの値を説明するために、次のコードを提供します.

var User = {
  count: 1,

  getCount: function() {
    return this.count;
  }
};

次に、出力すべき正解を面接者に答えさせるコードを示します.

console.log(User.getCount());

var func = User.getCount;
console.log(func());

上記の例では、1およびundefinedが正しく出力される.実際、多くの面接者がここで転んでいます.funcのコンテキストは「window」であるため、countの属性は失われている.次に、funcのコンテキストが常にUserに関連付けられていることを確認する方法を面接者に尋ね続け、出力される答えを1にすることができます.
正解はFunction.prototype.bindで、コードは以下の通りです.

var func = User.getCount.bind(User);
console.log(func());

この时、私は面接者に改善させます.もし古いブラウザがこの方法をサポートしていないなら、私たちはどのように互換性を持つべきですか.一部の基礎の悪い面接者は葛藤しますが、個人的にはどのフロントエンドエンジニアもapplyとcallを深く理解しなければならないと思います.

Function.prototype.bind = Function.prototype.bind || function(context) {
    var self = this;

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

弾窓庫1つ
面接の最後のy部分では、面接者に実際のことを書くように要求します.これは非常に有用で、フロントエンドのテクノロジースタックを理解するのに十分です.もし前の質問が理想的に答えたら、この質問は、私は非常に迅速に最後の質問の考察を展開します.
最終的な効果は面接者の実現にかかっているが、ここには十分な考察点がある.position:absoluteではなくposition:fixedを使用したほうがいいです.このとき、フォームがスクロールしていても、グローバルをうまく隠すことができます.面接者にこのように使うようにヒントを与え、両者の違いを尋ねます.

.overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0,0,0,.8);
}

どのように中の内容を中央に置くかも非常に重要な考察点である.絶対的な位置付けを使う面接者もいれば、Jsを上手に使う面接者もいます.

.overlay article {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -200px 0 0 -200px;
  width: 400px;
  height: 400px;
}

マスク層をクリックしたときにマスク層が閉じていることを確認するにはどうすればいいですか?この問題は私たちの議論を泡の中に落とすことができる.多くの面接者は、クリックの実践をマスク層に直接バインドします.

$('.overlay').click(closeOverlay);

これは次に動作しますが、マスク層のサブ要素をクリックすると、マスク層も閉じます.解決策はevent targetを判断し、この時間に泡が立たないことを保証することです.

$('.overlay').click(function(e){
  if (e.target == e.currentTarget)
    closeOverlay();
});

の最後の部分
もちろん、前の知識点はフロントエンドの一部にすぎませんが、実際には、パフォーマンス、HTML 5 APIs、AMD vs CommonJS modules、constructors、データ型、ボックスモデルを聞くこともできます.私はいつも面接者の進行に伴って相応の質問を選びます.
最後に、Front-end-Developer-Interview-QuestionsとJavaScript Gardenを見に行くことをお勧めします.
翻訳元アドレス:http://blog.sourcing.io/inter...