This, closure, prototype... Contain the answer

Hello everyone, I am Lin Yiyi, this article is JS written test is often asked about knowledge variable promotion, this points to, prototype and prototype chain, I hope to wish you a helping hand, let us start reading 😉

Mind mapping

1. Variable promotion

It is recommended to read it before doing the problemCompletely solve the JS variable promotion interview problem

The interview questions

1. Ask the following output

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

The variable is promoted regardless of whether the condition is true or not. The global var is equivalent to setting the property window.a = undefined for window. So! (“a” in window) is false, and the output is undefined

2. Ask the following output

console.log(a)
var a = 'Lin Yiyi'
function fn(){
    console.log(a)
    var a = 12
}
fn()
console.log(a)
/* undefined * undefined * Lin yiyi */
Copy the code

Var, function will be due to the variable promotion, initially a is undefined, globally assigned to Lin yiyi. Function private scope internal var is also similar to variable promotion a= undefined, the next step is a= 12. The final global output is Lin yiyi

3. The following output is displayed

console.log(a)
var a = 'Lin Yiyi'
function fn(){
    console.log(a)
    a = 12
}
fn()
console.log(a)
/* output * undefined * lin1 * 12 */
Copy the code

There’s no promotion inside the function, so a inside the function is global A, and then at the end of the function a is assigned a = 12 and the output is pretty obvious.

4. Obtain the following output

console.log(a)
a = 'Lin Yiyi'
function fn(){
    console.log(a)
    a = 12
}
fn()
console.log(a)
Uncaught ReferenceError: A is not defined */
Copy the code

Global A has no var and no variable promotion. JS will look up the parent scope and find that there is no attribute A in the window, so a ReferenceError occurs

5. Find the following output

var a = 'Lin Yiyi'
function fn(){
    if(! a){var a = 12
    }
    console.log(a)
}
fn()
/* Outputs * 12 */
Copy the code

A = undefined, if(! a) ==> if(! Undefined) ==> true, 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)
/* Output * 12 * 13 * 0 */
Copy the code

Function parameters and b with var are private variables, so a and B in the function have no effect on a and b in the global context. The output is 12, 13, 0

JS closure

It is recommended to read it before doing the problemInterview | JS closure classic usage scenarios and including closures will brush

The interview questions

1. Obtain 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
Copy the code

So this is a very simple problem, but one of the things to notice is that n+ (I ++) is n plus I and I plus 1, so theta () doesn’t work.

2. The following code to implement 5 input button cyclic binding click events, binding after completion of 1, 2, 3, 4, 5 five buttons output 0, 1, 2, 3, 4 five characters respectively

Can the following code be implemented?
Cannot be implemented, what is the following output?
How to modify to achieve the desired effect, explain the reasons

<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>
Copy the code

Can’t; 2. The output is always 5 because the event binding isasynchronousWhen the binding event is executed, the external loop has endediIt’s globali, at this momenti=5; 3.vartoletOn the groundsletThere are block-level scopes, and each block-level scope is private and non-interfering. Use closures or custom event resolution. Specific to seeInterview | JS closure classic usage scenarios and including closures will brush

Third, JS this

The interview questions

1. This point

var name = 'Lin Yiyi'
var obj = {
    name: 'Forest two two'.prop: {
        getName: function(){
        return this.name
    }
    }
}
console.log(obj.prop.getName())
var a = obj.prop.getName
console.log(a())
/*
*   undefined
*   林一一
/
Copy the code

This problem is directly to check the interview | JS this point you have to understand

3. 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 plus 1 is 23
        console.log(num)
    }
})(obj.num)
var fn = obj.fn
fn(5)   / / 22
obj.fn(10)   / / 23
console.log(num, obj.num)    / / 65, 30
Copy the code

This problem is a little difficult, if you are familiar with the concept of superior scope and this point is simply, suggest reading the interview | JS, you have to understand this point. The parent scope of the anonymous function returned by return is the self-executing function. This refers to window when fn(5) is executed, and this refers to window when obj.fn(10) is executed.

JS constructor and prototype chain

It is recommended to read it before doing the problemThe interview | you have to know the JS prototype and prototype chain

The interview questions

1. Some teng a prototype a prototype chain interview question, seek the following output results

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
Copy the code

The function my_fun.b() has its own scope and the value of b is 0; My_fun.c () has no property c of its own, so it looks up the prototype chain to fun.prototype.c, and the output is 30.

2. A teng prototype redirects the interview questions, seeking the following output results

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
Copy the code

Read it again if you have any questionsThe interview | you have to know the JS prototype and prototype chain F1, F2 have no constructorBut it will come from the constructorprototypeIs equivalent tof1.prototype.constructor.f2The archetype of is redefined to point to the base classobject; f2.__proto__.aa()In thethisIt points to the prototypeprototypeThere are no attributes in the prototypem, sothis.m + 10 ==> undefined + 10 ==> NaN 。f2.bb()In thef2There is no attributebbThrough the__proto__Look up, and the stereotype is redirected and the stereotype has no propertiesbb, and then up to the base classobjectThere are no attributes inbb,f2.bb() ==> undefined(), so an error is reportedTypeError

3. A factory classic prototype interview questions, find the following output results

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()
/* Output * 2 * 4 * 1 * 1 * 2 * 3 * 3 */
Copy the code

This question looks a little confusing at first, but every step of the way gives you the exact answer. I’m trying to explain this problem, but you have to have some prior knowledge, such as under the same nameVariable ascension.Prototype and prototype chain, this refers to, operator priority, etc.

In the variable promotion phase beltThe var and functionBoth of them are going up. The difference isvarOnly declared asundefinedDoes not define,functionDeclaration and definition. With the same namegetNameWill first declare and define the memory address assigned to a function, which is the output aboveconsole.log(5)After the JS code is executedgetNameWas reassigned a new heap memory addressconsole.log(4).Foo.getName()It’s a call to a function as an object, and the output in 1 is 2;
2getName()The output is 4 becausegetName()The reference address of theconsole.log(4)The;
3Foo().getName().Foo()Global after executiongetNameThe reference address is changed again toconsole.log(1)And returned to thethisPoint to thewindowThe output is 1;
4getNameIs global, so is the output1;
5,new Foo.getName()Function execution output2;
6new Foo().getName() => new A.getName()First, tonew Foo()Instantiate and re-pairA.getName()Call fornew Foo()Instantiated calledgetName()The method is a prototypeprototypeThe output is zero3;
7new new Foo().getName() => new B.getName()First, tonew Foo()Instantiate and re-pairnew B.getName()Instantiation,new B.getName()It’s also being executedB.getName()The output of the method is still an instanceBThe method is called prototypeprototype 的 getName.

The end of the

Thank you for reading so far, I am Lin Yiyi, if this article can help you a bit or inspire you welcomestarSee you next time.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

This, closure, prototype… Contain the answer

Mind mapping

1. Variable promotion

The interview questions

1. Ask the following output

2. Ask the following output

3. The following output is displayed

4. Obtain the following output

5. Find the following output

6. Find the following output

JS closure

The interview questions

1. Obtain the following output

2. The following code to implement 5 input button cyclic binding click events, binding after completion of 1, 2, 3, 4, 5 five buttons output 0, 1, 2, 3, 4 five characters respectively

Third, JS this

The interview questions

1. This point

3. Closure and this

JS constructor and prototype chain

The interview questions

1. Some teng a prototype a prototype chain interview question, seek the following output results

2. A teng prototype redirects the interview questions, seeking the following output results

3. A factory classic prototype interview questions, find the following output results

The end of the

This, closure, prototype… Contain the answer

Mind mapping

1. Variable promotion

The interview questions

1. Ask the following output

2. Ask the following output

3. The following output is displayed

4. Obtain the following output

5. Find the following output

6. Find the following output

JS closure

The interview questions

1. Obtain the following output

2. The following code to implement 5 input button cyclic binding click events, binding after completion of 1, 2, 3, 4, 5 five buttons output 0, 1, 2, 3, 4 five characters respectively

Third, JS this

The interview questions

1. This point

3. Closure and this

JS constructor and prototype chain

The interview questions

1. Some teng a prototype a prototype chain interview question, seek the following output results

2. A teng prototype redirects the interview questions, seeking the following output results

3. A factory classic prototype interview questions, find the following output results

The end of the

Related Posts

Flutter | share data

Safari + iOS debug H5 page

Canvas how to develop a virtual joystick