JS foundation -- hijacking of this keyword

---

One 、 What is Hijacking ?

Again JS Medium hijack yes this Keyword hijacking , That's change this Point to .
Again before this In the article , talk about this It refers to its caller .
Here again this The hijacking used call Methods and apply Method to achieve .

Two 、call Method

call() Method is used to call a method with the owner object as a parameter .
adopt call(), Be able to use methods belonging to another object .
call The first parameter of the method represents the specified caller , The following parameters represent the arguments passed , It accepts parameters separately .
Case study :

		var obj={name:"karen",say:function(str,arg2){console.log(this.name,str,arg2)}}
		var obj2={name:"jack"}
		var obj3={name:"marry"}
		obj.say.call(obj2,100,200) // Equivalent to obj2 Calling say Method 
		obj.say.call(obj3,80,10)

3、 ... and 、apply Method

apply() Method heel call Methods are the same, but the difference is parameters ,apply() Method takes an array of arguments .
If you want to use an array instead of a parameter list , be apply() The method is very convenient .
Case study 1：

			var obj={name:"karen",say:function(arg1,arg2){console.log(this.name,arg1,arg2,arguments)}}
			var obj2={name:"jack"}
			var obj3={name:"marry"}
			obj.say.apply(obj2,['ljy',100])
			obj.say.apply(obj3,['ljy',200])
			obj.say.apply(obj3,['ljy',300])

Case study 2 Find the maximum and minimum values in the array ：

	    var arr=[90,50,30,80,40,70,100]
		var max=Math.max.apply(arr,arr)
		var min=Math.min.apply(arr,arr)
		console.log(max,min)

Four 、 resolvent bind()

Defining functions can be specified at design time this
for example ：fn.bind(obj)
Case study ：

		  var obj2={name:"karen"}
		  var obj={
			  name:"ljy",
			  say:function(){
				  console.log(this)
			  }.bind(obj2)
		  }		  
		  obj.say()
		  var obj3={name:"marry"}
		  obj.say.call(obj3)
		  obj.say.apply(obj3,[])

5、 ... and 、 expand

call Cases used in conjunction

			function fn () {
				console.log(1)
			}
			function fn2 () {
				console.log(2)
			}
			fn.call.call(fn2)
			fn.call.call.call(fn2)

analysis ：
1. All function objects have call Method —Function.prototype Yes call Method
2. call call The method is that the caller runs
3. That is to say fn.call.call(fn2) Equivalent to fn2.call(), call(fn2) Instead of changing the caller who calls it to fn2, Then call its function to run, that is, the previous one call Operation is therefore equivalent to fn2.call() ==>fn2()

Design call Function code

			var obj={name:"ljy",say:function(a,b){console.log(this.name,a,b)},age:10}
			var obj2={name:'karen',age:30}
			Function.prototype.mycall=function(That,...args) { //...args Represents multiple parameters 
				var name1="ljy_"+new Date()
				That[name1]=this
				var re=That[name1](...args)// Let the passed object call this function 
				delete That[name1]
				return re
			}
			obj.say.mycall(obj2,100,200)

Design thinking ：
from call Function implementation of the two functions ：
One 、 call call The method is that the caller runs ==>this()
Two 、 Change the caller's this object : The caller who sets the formal parameter to accept the incoming setting ;
Then set a method to save this, That is, save the function that originally called it .
Use a method name that will never have the same name , such as ： Add the current time
Then run the method of the accepted caller , Change is achieved call Of the caller this Point to
Finally, delete this method , use delete To delete , It won't cause this method to be added to the incoming object .