Entrevista | Perguntas da Entrevista JS Classic (isto, encerramento, protótipo ...) com respostas

Palavras-código não são fáceis, e alunos úteis esperam prestar atenção à minha conta pública do WeChat: Vida do programa de código, obrigado! O código é usado e obtido por ele mesmo.

mapeamento da mente

1. Promoção variável

Questões de entrevista

1. Pergunte o seguinte resultado de saída

if( !("a" in window) ){
    
    
    var a = 12
}
console.log(a)  // undefined

Independentemente de se as condições serão estabelecidas para realçar as variáveis ​​sob varequivalente global para windowconfigurar uma propriedade window.a = undefined. Então , !("a" in window)sim false, a saída éundefined

2. Pergunte o seguinte resultado de saída

console.log(a)
var a = '林一一'
function fn(){
    
    
    console.log(a)
    var a = 12
}
fn()
console.log(a)
/*  输出
*   undefined
*   undefined
*   林一一
*/

Com var，functiona atualização por causa das variáveis, inicialmente apara a undefinedatribuição para o próximo global 林一一. A função privada com um escopo dentro vardo elevador também faz variáveis ​​semelhantes a = undefined, o próximo passo é a= 12. Finalmente, a saída global é林一一

3. Os seguintes resultados de saída

console.log(a)
var a = '林一一'
function fn(){
    
    
    console.log(a)
    a = 12
}
fn()
console.log(a)
/*  输出
*   undefined
*   林一一
*   12
*/

Nenhuma variável de função interna melhorada, a função interna aé global ae, finalmente, o resultado de saída aatribuído à função de execução a = 12é óbvio.

4. Procure a seguinte saída

console.log(a)
a = '林一一'
function fn(){
    
    
    console.log(a)
    a = 12
}
fn()
console.log(a)
/*  输出
*  Uncaught ReferenceError: a is not defined
*/

Sob global asem var, nenhuma atualização de variáveis. JS vai olhar para o seu escopo superior, encontrado windowem nenhuma propriedade a, então o erro de referência ocorreuReferenceError

5. Encontre a seguinte saída

var a = '林一一'
function fn(){
    
    
    if(!a){
    
    
        var a = 12
    }
    console.log(a)
}
fn()
/* 输出
* 12
*/

Independentemente de saber se a condição é estabelecida ou não, a variável será promovido a= undefined, if(!a) ==> if(!undefined) ==> trueea saída é 12

6. Encontre a seguinte saída

var a=12, b = 13, c = 14
function fn(a){
    
    
    a = 0
    var b = 0
    c = 0
}
fn(a)
console.log(a)
console.log(b)
console.log(c)
/* 输出
* 12
* 13
* 0
*/

Com o parâmetro de função e varuma bvariável privada, então a função a, bo global errado a, tem bimpacto. O resultado é de saída 12, 13,0

Dois, fechamento JS

Questões de entrevista

1. Encontre a seguinte saída

var ary = [1, 2, 3, 4]
function fn(i){
    
    
    return function(n){
    
    
        console.log(n+ (i++))
    }
}

var f = fn(10)
f(20)   // 30
fn(20)(40)  // 60
fn(30)(40)  // 70
f(30)   // 41
console.log(i)  //   Uncaught ReferenceError: i is not defined

Este é um problema relativamente simples, é necessário prestar atenção a um local que n+ (i++)é o nprimeiro e ioperar inovamente a partir do +1, ()não funcionará.

2. Para uma pergunta da entrevista Teng, o código a seguir precisa realizar 5 botões de entrada para vincular o evento click click em um loop. Após a vinculação ser concluída, clique nos cinco botões 1, 2, 3, 4 e 5 para gerar 0 , 1, 2 e 3 respectivamente., 4 cinco caracteres

• O código a seguir pode ser realizado?
• Não pode ser alcançado, qual é o efeito de saída abaixo?
• Como modificar para obter o efeito desejado, explique o motivo

<div id="btnBox">
    <input type="button" value="button_1" />
    <input type="button" value="button_2" />
    <input type="button" value="button_3" />
    <input type="button" value="button_4" />
    <input type="button" value="button_5" />
</div>
<script type="text/javascript">
var btnBox = document.getElementById('btnBox'),
      input = btnBox.getElementsByTagName('input')
var l = input.length
for(var i =0; i<l; i++){
     
     
    input[i].onclick = function(){
     
     
        alter(i);
    }
}
</script>

1. Não pode;
2. A saída de resultados é 5, porque o evento está vinculado 异步的quando a execução do evento de vinculação, o ciclo externo terminou, a variável usada ié global i, desta vez i=5;
3. varalterar A letrazão leté que ele tem um bloco -level scope, e cada escopo de nível de bloco é privado e não interfere um com o outro. Ou use fechamentos para resolver ou personalize a resolução de eventos.

Três, JS este

Questões de entrevista

1. isso aponta para

var name = '林一一'
var obj = {
    
    
    name: '林二二',
    prop: {
    
    
        getName: function(){
    
    
        return this.name
    }
    }
}
console.log(obj.prop.getName())
var a = obj.prop.getName
console.log(a())
/*
*   undefined
*   林一一
/

2. Obtenha o seguinte resultado de saída com fechamento e este

var num = 10    // 60； 65
var obj = {
    
    
    num: 20    
}
obj.fn = (function (num){
    
    
    this.num = num * 3
    num++    // 21
    return function(n){
    
    
        this.num += n    // 60 + 5 = 65；20 + 10 =30
        num++   // 21 + 1 = 22；22 + 1 = 23
        console.log(num)
    }
})(obj.num)
var fn = obj.fn
fn(5)   // 22
obj.fn(10)   // 23
console.log(num, obj.num)    // 65, 30

Essa questão é um pouco mais difícil, se você estiver familiarizado com o conceito de escopo superior e neste ponto, será mais fácil. Aqui apenas dar uma dica, returnquanto maior o escopo da função anônima é retornado da função é executada fn(5)quando o thisponto de execução window, pontos de obj.fn(10)execução .thiswindow

Quatro, construtor JS e cadeia de protótipo

Questões de entrevista

1. Um protótipo e uma pergunta de entrevista em cadeia de protótipo para um Teng, envie o resultado abaixo

function fun(){
    
    
    this.a = 0
    this.b = function(){
    
    
        alert(this.a)
    }
}

fun.prototype = {
    
    
    b: function(){
    
    
        this.a = 20
        alert(this.a)
    },
    c: function (){
    
    
        this.a = 30
        alert(this.a)
    }
}

var my_fun = new fun()

my_fun.b()    // 0
my_fun.c()    // 30

my_fun.b()O escopo da própria função que contém o bvalor de atributo da saída é 0; my_fun.c()
a função de atributo em si não é c, ela descobrirá de forma ascendente através da cadeia de protótipo fun.prototype.c, 30 é a saída.

2. Um protótipo Teng redireciona as perguntas da entrevista, solicite a seguinte saída

function Fn(){
    
    
    var n = 10
    this.m = 20
    this.aa = function() {
    
    
        console.log(this.m)
    }
}

Fn.prototype.bb = function () {
    
    
    console.log(this.n)
}

var f1 = new Fn
Fn.prototype = {
    
    
    aa: function(){
    
    
        console.log(this.m + 10)
    }
}

var f2 = new Fn
console.log(f1.constructor)     // ==> function Fn(){...}
console.log(f2.constructor)     // ==> Object() { [native code] }
f1.bb()    // undefined
f1.aa()    // 20
f2.aa()    // 20
f2.__proto__.aa()    // NaN
f2.bb()     //  Uncaught TypeError: f2.bb is not a function

f1,f2中本没有 constructorPorém, o construtor prototypeencontrará equivalente a f1.prototype.constructor, f2o protótipo foi redefinido para uma classe base object; f2.__proto__.aa()o thisponto é o protótipo prototype, o protótipo não tem atributos e m, portanto this.m + 10 ==> undefined + 10 ==> NaN. f2.bb()Em f2nenhum atributo bb, por __proto__pesquisa, e depois que o protótipo é um protótipo não redireciona o atributo bb, então até a classe base objecttambém não há atributos bb, então f2.bb() ==>undefined(), o erroTypeError

3. Perguntas clássicas da entrevista de protótipo de uma fábrica, peça a seguinte saída

function Foo() {
    
    
    getName = function (){
    
    
        console.log(1)
    }
    return this
}

Foo.getName = function () {
    
    
    console.log(2)
}

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

var getName = function (){
    
    
    console.log(4)
}

function getName() {
    
    
    console.log(5)
}
// 1
Foo.getName()
//2
getName()
//3
Foo().getName();
//4
getName();
//5
new Foo.getName()
//6
new Foo().getName()
//7
new new Foo().getName()
/* 输出
*   2
*   4
*   1
*   1
*   2
*   3
*   3
*/

Esta pergunta é um pouco boba à primeira vista, mas depois de cada etapa da análise, você pode obter uma resposta precisa. Tento entender essa pergunta, mas você deve ter algum pré-conhecimento, como promoção de variável sob o mesmo nome, protótipo e cadeia de protótipo, este ponto, precedência do operador, etc.

• Na fase de levantamento com variável vare functionirá realçar as variáveis, a diferença entre as duas varsó é declarada como undefinednão definir, functiondeclarar e definir ao mesmo tempo. O mesmo nome getNameatribuirá primeiro uma declaração de função e definição de endereço de memória push, que é a saída do console.log(5)endereço de função acima , o código JS é executado após getNameser reatribuído a um novo endereço de memória heap console.log(4). Foo.getName()É a chamada da função como objeto, a saída em 1 é 2;
• 2, getName()a saída é 4, uma vez que a getName()referência é o endereço console.log(4)de;
• 3 Foo().getName(), Foo()depois de realizar a getNamereferência global novamente para a mudança de endereço console.log(1)e retorna thispara apontar windowa saída é 1;
• 4 getNameestá abaixo da situação geral, então é a saída naturalmente 1;
• 5, new Foo.getName()saída de execução da função 2;
• 6 new Foo().getName() => new A.getName(), antes das chamadas de new Foo()reinstanciação A.getName(), por new Foo()exemplo, a chamada getName()é para o protótipo ativada prototype, cuja saída é 3;
• 7 new new Foo().getName() => new B.getName(), em primeiro lugar new Foo()instanciado novamente new B.getName()instanciado, new B.getName()enquanto também executa B.getName()um método ou Bmétodo de saída de instância é o protótipo prototypede getName.

---

Há um projeto de curso de mini programa WeChat, necessidades de projeto completas, entre em contato com QQ pessoal: 505417246

Preste atenção à seguinte conta pública WeChat, você pode receber miniaplicativo WeChat, Vue, TypeScript, front-end, uni-app, full-stack, Nodejs, Python e outros materiais de aprendizagem práticos. O
resumo de conhecimento de front-end mais recente e completo e o código-fonte do projeto será lançado para o público do WeChat assim que possível. Número, preste atenção, obrigado

Depois de prestar atenção ao relato oficial , responda às perguntas da entrevista de front-end e receba um grande número de dados em pdf de resumo de perguntas da entrevista de front-end