current position:Home>How to change the direction of this

How to change the direction of this

2021-08-27 10:30:55 The breeze came slowly

  • Use ES6 Arrow function of
  • Inside the function this assignment
  • Use apply、call、bind Method
  • new Instantiate an object

Arrow function change this

The arrow function itself doesn't have this attribute , stay The arrow function is used internally this It points to the... When the function is defined this
Not in arrow function this binding , Its value must be determined by looking up the scope chain , If the arrow function is contained by a non arrow function , be this Binding is the latest non arrow function this, otherwise ,this by undefined

Inside the function this assignment

The object that will call the function ( namely this) The value is saved in a variable in the appropriate place , Such as _this perhaps that in , Use this... In the function _this. such ,_this It won't change

Use apply、call、bind

In strict mode , The first parameter will be used as an internal parameter of the function this. Non strict mode , If the first parameter is null perhaps undefined, Will this Point to the big picture .
Value is the original value ( Numbers , character string , Boolean value ) Of this An auto-wrapper object that points to the original value , Such as String、Number、Boolean

Function.prototype.bind()

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 .

function.bind(thisArg[, arg1[, arg2[, ...]]])
 Copy code 

thisArg

  • Call the binding function as  this  The value passed by the parameter to the objective function . If you use new Operator to construct binding functions , The value is ignored . When using  bind  stay  setTimeout  Create a function in the ( Provided as a callback ) when , As  thisArg  Any raw value passed will be converted to  object. If  bind  The argument list of the function is empty , perhaps thisArg yes null or undefined, Execute the scope of  this  Will be treated as a new function  thisArg.

Return value

Returns a copy of the original function , And have a designated  this  Values and initial parameters .


Function.prototype.call()

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

function.call(thisArg, arg1, arg2, ...)
 Copy code 

thisArg

  • Optional . stay  function  Function run time uses  this  value . Please note that ,this It may not be the actual value seen by this method : If this function is in Nonstrict mode Next , Is specified as  null  or  undefined  Will be automatically replaced by pointing to the global object , The original value is wrapped .

Return value

Use the caller provided  this  Values and parameters call the return value of the function ( Immediate execution function ). If the method does not return a value , Then return to  undefined.

Be careful : The grammar and function of this method  apply()  The method is similar to , There is only one difference , Namely  call()  The method accepts A list of parameters , and  apply()  The method accepts An array of multiple parameters .


Function.prototype.apply()

apply()   Method calls a given this The value of the function , And with an array ( Or a class array object ) Parameters provided in the form of .

func.apply(thisArg , [ argsArray])
 Copy code 

thisArg

  • A must . stay  func  Function run time uses  this  value . Please note that ,this It may not be the actual value seen by this method : If this function is in Nonstrict mode Next , Is specified as  null  or  undefined  Will be automatically replaced by pointing to the global object , The original value is wrapped .

apply and call and bind The difference between

  • apply and call The functions of are basically similar , Only the format of the received parameters is different .
  • apply Receives an array containing multiple parameters ,call Received are several parameter lists .
  • apply and call Method in use , Will change this Point to and execute the function immediately after passing the parameter , Return results
  • bind The method is to create a new function , In this new function created ,this The direction of is changed , And received it bind Parameters passed . After another manual call is required , Function will be executed .

new Instantiate an object

new In the process of instantiating the constructor , Will use call Method to the inside of the object this Point to the instanced object . The of the instantiated object __proto__ Point to the prototype of the constructor, that is protitype

copyright notice
author[The breeze came slowly],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827103052243M.html

Random recommended