Interview | JS Classic Interview Questions (this, closure, prototype...) with answers

Codewords are not easy, and helpful students hope to pay attention to my WeChat public account: Code program life, thank you! The code is self-used and fetched.

Insert picture description here

mind Mapping

Insert picture description here

1. Variable promotion

Interview questions

1. Ask the following output result

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

Regardless of whether the conditions will be established to enhance the variables under global varequivalent to windowset up a property window.a = undefined. So !("a" in window)yes false, the output isundefined

2. Ask the following output result

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

With var，functionthe upgrade because of the variables, initially afor the undefinedassignment for the next global 林一一. Private function with a scope inside varthe lift also make similar variables a = undefined, the next step is a= 12. Finally, the global output is林一一

3. The following output results

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

No internal function variables improved, the internal function ais global a, and finally perform the function aassigned a = 12output result is obvious.

4. Seek the following output

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

Under global awithout var, no variables upgrade. JS will look to their superiors scope, found windowin no property a, so the reference error occurredReferenceError

5. Find the following output

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

Regardless of whether the condition is established or not, the variable will be promoted a= undefined, if(!a) ==> if(!undefined) ==> trueand the output is 12

6. Find the following output

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

With the function parameter and vara bprivate variable, so the function a, bthe wrong global a, bimpact. The result is output 12, 13,0

Two, JS closure

Interview questions

1. Find the following output

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

This is a relatively simple problem, need to pay attention to a place that n+ (i++)is nfirst and ioperation iagain from plus 1, ()will not work.

2. For a Teng interview question, the following code needs to realize 5 input buttons to bind the click click event in a loop. After the binding is completed, click the five buttons 1, 2, 3, 4, and 5 to output 0, 1, 2, and 3 respectively. , 4 five characters

Can the following code be realized?
Can't be achieved, what is the output effect below?
How to modify to achieve the desired effect, explain the reason

<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. Can not;
2. The results output is 5, because the event is binding 异步的when the binding event execution, the external cycle has ended, the variable used iis global i, this time i=5;
3. varchange The letreason letis that it has a block-level scope, and each block-level scope is private and does not interfere with each other. Or use closures to resolve, or customize event resolution.

Three, JS this

Interview questions

1.this points to

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. Obtain the following output result with closure and this

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

This question is a little bit more difficult. If you are familiar with the concept of superior scope and this point, it will be easier. Here only give a hint, returnthe higher the scope of the anonymous function is returned from the function is executed fn(5)when the execution thispoint window, obj.fn(10)execution thispoints window.

Four, JS constructor and prototype chain

Interview questions

1. A prototype and prototype chain interview question for a Teng, ask for the following output

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()The scope of the function itself containing the attribute bvalue of the output is 0; my_fun.c()
the attribute function itself is not c, it will find upwardly through the prototype chain fun.prototype.c, 30 is the output.

2. A Teng prototype redirects interview questions, ask for the following output

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中本没有 constructorHowever, the constructor will prototypefind equivalent to f1.prototype.constructor, f2the prototype was redefined to a base class object; f2.__proto__.aa()the thispoint is the prototype prototype, the prototype has no attributes and m, therefore this.m + 10 ==> undefined + 10 ==> NaN. f2.bb()In f2no attributes bb, by __proto__look up, and after the prototype is a prototype not redirect attribute bb, then up to the base class objectis also no attributes bb, then f2.bb() ==>undefined(), the errorTypeError

3. A factory's classic prototype interview questions, ask for the following output

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

This question is a bit silly at first glance, but after every step of analysis, you can get an accurate answer. I try to understand this question, but you must have some pre-knowledge, such as variable promotion under the same name, prototype and prototype chain , This point, operator precedence, etc.

In the lifting phase with variable varand functionwill enhance the variables, the difference between the two is varonly declared as undefinednot define, functiondeclare and define at the same time. The same name getNamewill first assign a function declaration and definition of push memory address, which is the output of the above console.log(5)function address, the JS code is executed after getNamebeing reassigned to a new heap memory address console.log(4). Foo.getName()It is the call of the function as the object, the output in 1 is 2;
2, getName()the output is 4, since the getName()reference is the address console.log(4)of;
3 Foo().getName(), Foo()after performing in the global getNamereference again to the address change console.log(1)and returns thisto point windowthe output is 1;
4 getNameis under the overall situation, so is the output naturally 1;
5, new Foo.getName()function execution output 2;
6 new Foo().getName() => new A.getName(), prior to new Foo()re-instantiation A.getName()calls, for new Foo()instance of the call getName()is to the prototype prototypeon, the output of which is 3;
7 new new Foo().getName() => new B.getName(), firstly new Foo()instantiated again new B.getName()instantiated, new B.getName()while also performing B.getName()a method or instance output Bmethod is the prototype prototypeof getName.

There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246

Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full-stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible Number, please pay attention, thank you

After paying attention to the official account , reply to the front-end interview questions and receive a large number of front-end interview questions summary pdf data
Insert picture description here