Сначала классические вопросы интервью JS (это, закрытие, прототип...) с ответами

JavaScript
Сначала классические вопросы интервью JS (это, закрытие, прототип...) с ответами

Привет всем, я Линь Ии, эта статья об улучшении переменной точки знаний, о которой часто спрашивают в письменном тесте JS, этой точке, прототипе и цепочке прототипов, я надеюсь, что смогу протянуть вам руку помощи, давайте начнем читаю 😉

карта разума

1. Вариативное продвижение

Рекомендуется прочитать его перед тем, как задать вопросПолностью решить вопросы интервью о подъеме переменных JS

вопросы интервью

1. Задайте следующий результат вывода

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

Независимо от того, истинно условие или нет, переменная будет повышена, а глобальнаяvarэквивалентно предоставлениюwindowустановить свойствоwindow.a = undefined. так!("a" in window) даfalse, выходundefined

2. Задайте следующий результат вывода

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

поясvar，functionбудет из-за переменной продвижения, изначальноaдляundefined, который присваивается глобально как林一一. частная область действия функцииvarтакже похож на переменный подъем a = undefined, следующий шагa= 12. Окончательный глобальный вывод林一一

3. Следующие выходные результаты

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

Внутри функции нет продвижения переменной, функция внутри функцииaявляется глобальнымa, и, наконец, функция выполняетсяa 被赋值 a = 12Выход очевиден.

4. Найдите следующий выходной результат

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

ГлобальныйaБезvar, без переменного продвижения. JS просматривает верхнюю область видимости и находитwindowтакже не имеет свойств вa, поэтому возникает ошибка ссылкиReferenceError

5. Найдите следующий выходной результат

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

Повышение переменной выполняется вне зависимости от того, истинно условие или нет.a= undefined,if(!a) ==> if(!undefined) ==> true, выход 12

6. Найдите следующие результаты вывода

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

Параметры функции и диапазоныvarизbявляется частной переменной, поэтому внутри функцииa, bне глобальныйa, bКаково влияние. Выход12, 13, 0

2. JS-замыкания

Рекомендуется прочитать его перед тем, как задать вопросИнтервью | Классические сценарии использования замыканий JS и обязательные вопросы с замыканиями

вопросы интервью

1. Найдите следующий вывод

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

Это относительно простая тема, и есть один момент, на который необходимо обратить внимание.n+ (i++)даnпервый иiоперацияiЗатем добавьте к нему 1,()не будет работать.

2. Для определенного вопроса интервью в следующем коде необходимо реализовать 5 кнопок ввода для привязки события клика в цикле.После завершения привязки нажмите пять кнопок 1, 2, 3, 4 и 5, чтобы вывести 0, 1, 2 и 3 соответственно. , 4 пять символов

  • Можно ли реализовать следующий код?
  • Не может быть достигнуто, каков выходной эффект следующего?
  • Как модифицировать для достижения нужного эффекта, объясните почему
<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. Нет, 2. Результатом вывода являются все 5, потому что привязка события异步的, когда событие привязки выполняется, внешний цикл завершается, и используемые переменныеiявляется глобальнымi, В настоящее времяi=53. Воляvarизменить наlet,причинаletВ области блочного уровня каждая область блочного уровня является частной и не мешает друг другу. Или используйте замыкания для решения или пользовательские события для решения. Проверьте этоИнтервью | Классические сценарии использования замыканий JS и обязательные вопросы с замыканиями

3. JS это

вопросы интервью

1. это указывает на

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

Проверьте этот вопрос напрямуюИнтервью | JS, ​​который вы должны знать, это указывает на

3. Закрытие и запрос на следующий вывод

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

Этот вопрос немного сложно. Если вы знакомы с концепцией объема верхнего уровня и этой точкой, он будет проще. Рекомендуется его прочитать.Интервью | JS, ​​который вы должны знать, это указывает на. Только небольшая подсказка здесь,returnРодительская область возвращаемой анонимной функции — это самовыполняющаяся функция,fn(5)при исполненииthisнаправлениеwindow,obj.fn(10)при исполненииthisнаправлениеwindow.

4. Конструктор JS и цепочка прототипов

Рекомендуется прочитать его перед тем, как задать вопросИнтервью | Вы должны понимать прототипы JS и цепочки прототипов

вопросы интервью

1. Один прототип и одна цепочка прототипов определенных вопросов интервью Teng, запросите следующие результаты вывода.

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()Область действия самой функции содержит свойстваbВыходное значение равно 0;my_fun.c()Сама функция не имеет свойствc, он будет найден по цепочке прототиповfun.prototype.c, выход 30.

2. Вопрос интервью о перенаправлении прототипа Тэна, попросите следующие результаты вывода.

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

Если сомневаетесь, прочтитеИнтервью | Вы должны понимать прототипы JS и цепочки прототипов f1,f2中本没有 constructorно из конструктораprototypeНайдите эквивалентf1.prototype.constructor,f2Прототип переопределяется, чтобы указать на базовый классobject; f2.__proto__.aa()серединаthisуказать на прототипprototype, в прототипе нет свойствm,такthis.m + 10 ==> undefined + 10 ==> NaN.f2.bb()серединаf2нет атрибутаbb,пройти через__proto__Посмотрите вверх, пока прототип является перенаправленным прототипом и не имеет свойствbb, затем до базового классаobjectтакже не имеет свойств вbb,ноf2.bb() ==> undefined(), поэтому сообщается об ошибкеTypeError

3. Классические вопросы для собеседования с прототипом фабрики, попросите следующие выходные результаты.

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

Этот вопрос на первый взгляд немного сбивает с толку, но я могу получить точный ответ после каждого шага анализа.Я пытаюсь объяснить этот вопрос понятно, но вы должны иметь некоторые предварительные знания, например, под тем же именемпеременное продвижение,Прототипы и цепочки прототипов, это указывает на, приоритет оператора и т. д.

  • На этапе переменного продвижения сvar 和 functionОба будут переменным продвижением, разница между ними в том, чтоvarтолько объявлен какundefinedне определено,functionобъявляется и определяется одновременно. тезкаgetNameАдрес push-памяти функции будет объявлен и определен первым, то есть вышеуказанный выводconsole.log(5)Адрес функции , после выполнения кода JSgetNameпереназначается на новый адрес памяти кучиconsole.log(4).Foo.getName()Это вызов функции как объекта, и вывод в 1 равен 2;
  • 2 дюймаgetName()Результат равен 4, потому чтоgetName()Справочный адресconsole.log(4)середина;
  • 3Foo().getName(),Foo()глобальный после выполненияgetNameСсылочный адрес снова меняется наconsole.log(1)и вернулсяthisнаправлениеwindowВыходной результат равен 1;
  • 4 дюймаgetNameОн глобальный, и вывод естественно тоже1;
  • 5 дюймовnew Foo.getName()вывод выполнения функции2;
  • 6 дюймовnew Foo().getName() => new A.getName(), первыйnew Foo()создать экземпляр сноваA.getName()позвони, даnew Foo()конкретизированный вызовgetName()методы являются прототипамиprototypeвыше, вывод3;
  • 7 из 7new new Foo().getName() => new B.getName(), первыйnew Foo()создать экземпляр сноваnew B.getName()создать экземпляр,new B.getName()также осуществляетB.getName()Вывод метода по-прежнему является экземпляромBОписанный выше метод также является прототипом.prototypeизgetName.

конец

Спасибо, что прочитали это, я Линь Ии, если эта статья может вам помочь или вдохновить, добро пожаловатьstar, увидимся в следующий раз.

Категории