Interview review plan 2

Rice soup MT 2021-09-15 10:51:42

introduction

This article contains the following knowledge points :this,call and apply, as well as bind.

Ⅰthis

—— What is? this

Compared with other languages , Functional this keyword stay JavaScript It's a little different in the game . In the vast majority of cases , The way the function is called determines this Value ( Runtime binding ).

this The difference from other language behaviors is ,this The point of cannot be bound during creation , Its point is to bind only when called . In addition, you can also use bind Function to set this Value , And calls are not considered .

——this Call location

  • In a global environment

    In the global execution environment ( Outside any function body )this Both point to global objects , In the browser window Objects are global objects .

    console.log(this); //window object
    this.sayHi = "Hello World";
    console.log(sayHi); //"Hello World"
    console.log(window.sayHi); //"Hello World"
     Copy code 
  • Function

    Inside the function , If strict mode is not enabled ,this Point to global object .

    function a(){
       console.log(this); //window object
    }
    a();
     Copy code 

    If strict mode is enabled ,this The value of is undefined.

    function a(){
    "use strict"
       console.log(this); //undefined
    }
    a();
     Copy code 
  • Class

    In class ,this Is a regular object . When this class is instantiated , In the constructor of this class this It will point to the object generated by the instantiation . In the class method ,this Points to the class itself .

    class Person{
       constructor(){
           this.age = 21;
      };
       getThis(){
           console.log(this);
      }
    }
    let p = new Person();
    console.log(p.age); //21
    p.getThis(); //Person
     Copy code 
  • In the arrow function

    In the arrow function ,this It still points to the global object

    let fun = ()=>{console.log(this)} //window object
    fun();
     Copy code 
  • Object method

    In methods of objects ,this Point to the object that invokes the method

    var name = "mt"
    var obj = {
       name:"MT",
       getName(){
           console.log(this.name);
      }
    }
    obj.getName(); // Because it is obj call , So the result is "MT"
    var getName = obj.getName;
    getName(); // Because it is a global call , So the result is "mt"
     Copy code 

Ⅱapply and call

call Methods and apply Methods will be in the specified this Value to call the function , This will set the function body when calling the function this The value of the object .

——apply Method

describe :

apply() Method calls a given this The value of the function , And the parameters provided in the form of an array .

This method takes two parameters : Within the function this And an array of parameters . The second parameter can be Array Example , But it can also be passed in a function argument object .

function sum(num1,num2){
   return num1 + num2;
}
function callSum1(num1,num2){
return sum.apply(this,[num1,num2]);
}
function callSum2(num1,num2){
   return sum.apply(this,arguments);
}
callSum1(); //20
callSum2(); //20
 Copy code 

effect :

  • Add items from one array to another

    var array = ['a','b'];
    var elements = [0,1,2];
    arry.push.apply(array,elements);
    console.log(array);
     Copy code 

    If we use it directly push Method words , It adds the array as a single element , Instead of adding every element in this array , So we end up with an array in an array . therefore apply Decent use .

  • Use apply And built-in functions

    var numbers = [5, 6, 2, 3, 7];
    var max = Math.max.apply(null, numbers);
    var min = Math.min.apply(null, numbers);
    // The following is the normal writing
    max = -Infinity, min = +Infinity;
    for (var i = 0; i < numbers.length; i++) {
    if (numbers[i] > max)
    max = numbers[i];
    if (numbers[i] < min)
    min = numbers[i];
    }
     Copy code 

    For some requirements that need to write a loop to traverse the array items , We can use apply Complete to avoid loops . By comparing the common circular writing , This way of writing is very efficient , But this way of writing goes beyond JS Risk of upper limit of engine parameter length . If the upper limit of method parameters of an engine is 4, After the above code is executed , Really passed on to apply The parameters for 5,6,2,3, Instead of a complete array .

    If your parameter array may be very large , Then the following hybrid strategy is recommended , After cutting the array into pieces, loop it into the target method

    function minOfArray(arr) {
    var min = Infinity;
    var QUANTUM = 32768;
    for (var i = 0, len = arr.length; i < len; i += QUANTUM) {
    var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));
    min = Math.min(submin, min);
    }
    return min;
    }
    var min = minOfArray([5, 6, 2, 3, 7]);
     Copy code 

——call Method

describe :

call() Method uses a specified this Value and one or more parameters given separately to call a function .

The method receives the first and apply In the same way , That is, within the function this Value , The remaining parameters to be passed to the called function need to be listed one by one .

function sum(num1,num2){
return num1 + num2;
}
function callSum(num1,num2){
sum.call(this,num1,num2);
}
console.log(callSum(10,10)); //20
 Copy code 

effect :

  • Change the in the function body this value

    window.color = "red";
    let o = {
    color:"blue"
    }
    function sayColor(){
    console.log(this.color);
    }
    sayColor.call(this); //"red"
    sayColor.call(window); //"red"
    sayColor.call(o); //"blue"
     Copy code 

    In this case , You can see ,sayColor Function USES call Method change this Point to , Thus returning to different results .window call sayColor Print the "red",o call sayColor Print the "blue", Because of this Pointing to window, So I also printed "red"

  • Call the constructor to implement inheritance

    function Product(name, price) {
    this.name = name;
    this.price = price;
    }
    function Food(name, price) {
    Product.call(this, name, price);
    this.category = 'food';
    }
    function Toy(name, price) {
    Product.call(this, name, price);
    this.category = 'toy';
    }
    var cheese = new Food('feta', 5);
    var fun = new Toy('robot', 40);
     Copy code 

    This example declares a Product Constructors , Two sub constructors are derived from this function . In the process , Each sub constructor has its own properties category Outside , And through call The method inherits Product Two properties in the parent constructor ——name,price

  • Traverse NodeList

    <body>
    <div></div>
    <div></div>
    <div></div>
    <script>
    let nodelist = document.querySelectorAll("div");
    [].forEach.call(nodelist,(item,index){
    item.innerHTML = index + "Hello World"
    })
    </script>
    </body>
     Copy code 

    Use document.querySelectorAll The returned is not an array , It is NodeList, So if you want to use an array forEach,call The method works

Ⅲbind

describe :

bind() Method creates a new function , stay bind() When called , Of this new function this Is specified as bind() The first parameter of , The rest of the parameters will be the parameters of the new function , For calling .

bind Methods and call The method is as like as two peas. , The difference is whether to execute immediately or wait for execution .

window.color = "red";
var o = {
color:"blue"
}
function sayColor(){
console.log(this.color);
}
let a = sayColor.bind(this);
let b = sayColor.bind(window);
let c = sayColor.bind(o);
a(); //"red"
B(); //"red"
C(); //"blue"
 Copy code 

As shown in the example above , Use bind Changed the sayColor In function this After pointer , There is no direct call to , Instead, it returns a copy of the original function , The copy has the specified this And parameters .

effect :

  • Create binding functions

    this.x = 9;
    var module = {
    x: 81,
    getX: function() { return this.x; }
    };
    module.getX(); // 81
    var retrieveX = module.getX;
    retrieveX(); //9
    var boundGetX = retrieveX.bind(module);
    boundGetX(); // 81
     Copy code 

    In this case, there are , In the global and module The variable... Is declared in the object x, When we put module Medium getX Method to assign to the global variable retrieveX after , When you call this variable again ,this It will point to the overall situation again . At this time we pass through bind Use the original object module Bind the retrieve The method can be this Point back to the original object .

  • coordination setTimeout

    function LateBloomer() {
    this.petalCount = Math.ceil(Math.random() * 12) + 1;
    }
    LateBloomer.prototype.declare = function() {
    console.log('I am a beautiful flower with ' + this.petalCount + ' petals!');
    };
    LateBloomer.prototype.bloom = function() {
    window.setTimeout(this.declare.bind(this), 1000);
    };
    var flower = new LateBloomer();
    flower.bloom();
     Copy code 

    By default , Use window.setTimeout() when ,this It points to the global object , Suppose in the above example setTimeout The method called does not use bind change this Words ,declare Methods this Can point to window, Thus, the member properties... Cannot be printed petalCount.

    Conclusion

    That's all the content of this article , The next article will review JavaScript Prototypes and inheritance in

Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15