Entrevista | JS Classic Entrevista Preguntas (este, cierre, prototipo ...) con respuestas

Las palabras en clave no son fáciles, y los estudiantes útiles esperan prestar atención a mi cuenta pública de WeChat: Programa de vida del código, ¡gracias! El código se utiliza y se recupera por sí mismo.

mapas mentales

1. Promoción variable

Preguntas de entrevista

1. Pregunte el siguiente resultado de salida

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

Independientemente de si se establecerán las condiciones para potenciar las variables bajo varequivalente global para windowconfigurar una propiedad window.a = undefined. Entonces !("a" in window)sí false, la salida esundefined

2. Pregunte el siguiente resultado de salida

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

Con var，functionla actualización debido a las variables, inicialmente apara la undefinedasignación para el próximo global 林一一. La función privada con un alcance dentro vardel ascensor también crea variables similares a = undefined, el siguiente paso es a= 12. Finalmente, la salida global es林一一

3. Los siguientes resultados de salida

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

No se mejoraron las variables de función interna, la función interna aes global a, y finalmente realizar la función aasignada a = 12el resultado de salida es obvio.

4. Busque el siguiente resultado

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

En global asin var, sin actualización de variables. JS buscará el alcance de sus superiores, que no se encuentra windowen ninguna propiedad a, por lo que se produjo el error de referenciaReferenceError

5. Encuentra la siguiente salida

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

Independientemente de si se establece la condición o no, se promoverá la variable a= undefined, if(!a) ==> if(!undefined) ==> truey la salida es 12

6. Encuentra la siguiente salida

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
*/

Con el parámetro de función y varuna bvariable privada, por lo que la función a, bel mal mundial a, bimpacto. El resultado es la salida 12, 13,0

Dos, cierre JS

Preguntas de entrevista

1. Encuentra la siguiente salida

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 es un problema relativamente simple, es necesario prestar atención a un lugar que n+ (i++)es el nprimero y la ioperación de inuevo desde más 1, ()no funcionará.

2. Para una pregunta de entrevista de Teng, el siguiente código debe realizar 5 botones de entrada para vincular el evento de clic, clic en un bucle. Una vez que se haya completado la vinculación, haga clic en los cinco botones 1, 2, 3, 4 y 5 para generar 0 , 1, 2 y 3 respectivamente., 4 cinco caracteres

• ¿Se puede realizar el siguiente código?
• No se puede lograr, ¿cuál es el efecto de salida a continuación?
• Cómo modificar para lograr el efecto deseado, explicar el 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. No se puede;
2. La salida de resultados es 5, porque el evento es vinculante 异步的cuando la ejecución del evento vinculante, el ciclo externo ha finalizado, la variable utilizada ies global i, esta vez i=5;
3. varcambio La letrazón letes que tiene un bloque ámbito de nivel, y cada ámbito de nivel de bloque es privado y no interfiere entre sí. O utilice cierres para resolver o personalizar la resolución de eventos.

Tres, JS esto

Preguntas de entrevista

1.Esto apunta a

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. Obtenga el siguiente resultado de salida con el cierre y 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

Esta pregunta es un poco más difícil, si está familiarizado con el concepto de alcance superior y este punto, será más fácil. Aquí solo dé una pista, cuanto returnmayor sea el alcance de la función anónima que se devuelve desde la función se ejecuta fn(5)cuando el thispunto de ejecución window, puntos de obj.fn(10)ejecución .thiswindow

Cuatro, constructor JS y cadena de prototipos

Preguntas de entrevista

1. Un prototipo y una pregunta de entrevista en cadena del prototipo para un Teng, envíe el resultado a continuación

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()El alcance de la función en sí que contiene el bvalor de atributo de la salida es 0; my_fun.c()
la función de atributo en sí no lo es c, se encontrará hacia arriba a través de la cadena del prototipo fun.prototype.c, 30 es la salida.

2. Un prototipo de Teng redirige las preguntas de la entrevista, solicite el siguiente resultado

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中本没有 constructorSin embargo, el constructor prototypeencontrará equivalente a f1.prototype.constructor, f2el prototipo fue redefinido a una clase base object; f2.__proto__.aa()el thispunto es el prototipo prototype, el prototipo no tiene atributos y m, por lo tanto this.m + 10 ==> undefined + 10 ==> NaN. f2.bb()En f2ningún atributo bb, al __proto__buscar, y después de que el prototipo es un atributo de prototipo, no redirigir bb, entonces hasta la clase base objecttampoco hay atributos bb, entonces f2.bb() ==>undefined(), el errorTypeError

3. Preguntas de la entrevista de prototipo clásico de una fábrica, solicite el siguiente resultado

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 pregunta es un poco tonta a primera vista, pero después de cada paso del análisis, puede obtener una respuesta precisa. Intento comprender esta pregunta, pero debe tener algunos conocimientos previos, como promoción de variables con el mismo nombre, prototipo y cadena de prototipos, este punto, precedencia del operador, etc.

• En la fase de levantamiento con variable vary functionse potenciarán las variables, la diferencia entre las dos varsolo se declara como undefinedno definir, functiondeclarar y definir al mismo tiempo. El mismo nombre getNameprimero asignará una declaración de función y una definición de dirección de memoria push, que es la salida de la console.log(5)dirección de función anterior , el código JS se ejecuta después de getNameser reasignado a una nueva dirección de memoria de pila console.log(4). Foo.getName()Es la llamada de la función como el objeto, la salida en 1 es 2;
• 2, getName()la salida es 4, ya que la getName()referencia es la dirección console.log(4)de;
• 3 Foo().getName(), Foo()luego de realizar en la getNamereferencia global nuevamente al cambio de dirección console.log(1)y vuelve thisal punto windowla salida es 1;
• 4 getNameestá por debajo de la situación general, por lo que la salida naturalmente 1;
• 5, new Foo.getName()salida de ejecución de función 2;
• 6 new Foo().getName() => new A.getName(), antes de new Foo()las A.getName()llamadas de re-instanciación , por new Foo()ejemplo, la llamada getName()es al prototipo prototype, cuya salida es 3;
• 7 new new Foo().getName() => new B.getName(), en primer lugar new Foo()instanciado nuevamente new B.getName()instanciado, new B.getName()mientras que también realiza B.getName()un método o Bmétodo de salida de instancia es el prototipo prototypede getName.

---

Hay un diseño de curso de mini programa WeChat, necesidades de diseño completas, contacto personal QQ: 505417246

Preste atención a la siguiente cuenta pública de WeChat, puede recibir el subprograma de WeChat, Vue, TypeScript, front-end, uni-app, full-stack, Nodejs, Python y otros materiales prácticos de aprendizaje. El
resumen de conocimientos de front-end más reciente y completo y el código fuente del proyecto se lanzará al público de WeChat lo antes posible Número, preste atención, gracias

Después de prestar atención a la cuenta oficial , responda a las preguntas de la entrevista inicial y reciba una gran cantidad de preguntas de la entrevista inicial Resumen de datos en PDF