Here are three ways to change the direction of this:

A. call B. call C. call

window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue'};
function changeColor () {
	console.log(this.color);
}
changeColor.call()	// No arguments default to window output: red
changeColor.call(window)	// Point to window output: red
changeColor.call(document)	// point to document: yellow
changeColor.call(this)	// The constructor's this, if called in parentheses, defaults to the window output: red
changeColor.call(s1)	// Point to s1 and output: blue
Copy the code
/ / two cases:
var Pet = {
	words: '... '.speak: function (say) {
		console.log(say + ' ' + this.words)
	}
}
Pet.speak('123')	/ / output 123...
var Dog = {
	words: 'WangWangWang'
}
Pet.speak.call(Dog,'123')	/ / output 123 wangwangwang
Copy the code

I don’t want to apply.

window.number = 'one';
document.number = 'two';
var s1 = {number: 'three'};

function changeNum() {
	console.log(this.number)
}
changeNum.apply();	//one
changeNum.apply(window);	//one
changeNum.apply(document);//two
changeNum.apply(this);//one
changeNum.apply(s1);//three
Copy the code
/ / two cases:
function Pet(words){
	this.words = words;
	this.speak = function(){
		console.log(this.words)
	}
}
function Dog(words){
	Pet.call(this,words);/ / wang as a result
	// Pet.apply(this,arguments); / / wang as a result
}
var dog = new Dog('wang');
dog.speak();	//wang
Copy the code

Apply and Call have something in common: they both want an object to execute a method that doesn’t belong to it.

The difference between apply and call:

The apply() method takes two arguments, one the scope in which the function is run (this) and the other the array of arguments. The call() method takes the same first argument as apply(), but the arguments passed to the function must be listed separately. Apply ([thisObj [,argArray]]); Call ([thisObj [,arg1[,arg2[… argn]]]]); call([thisObj [,arg1[, argn]]]]); If thisObj is null or undefined, it points to window by default. If argArray is not a valid array or arguments object, then a TypeError will result. If neither argArray nor thisObj is supplied, then the Global object will be used as thisObj. The Call method can be used instead of a method on another object. The Call method can change the object context of a function from its original context to the new object specified by thisObj. If no thisObj argument is provided, the Global object is used for thisObj.

2. Bind the

var obj = {
	name: 'WuXiaoDi'
}
function printName() {
	console.log(this.name)
}
var wuXiaoDi = printName.bind(obj)
console.log(wuXiaoDi)	//function(){... }
wuXiaoDi()	//WuXiaoDi
Copy the code
/ / two cases:
function fn(a, b, c) {
	console.log(a, b, c);
}
var fn1 = fn.bind(null.'Dot');
fn('A'.'B'.'C');	//A B C
fn1('A'.'B'.'C');           // Dot A B
fn1('B'.'C');                // Dot B C
fn.call(null.'Dot');      // Dot undefined undefined
Copy the code
// Example 3: Implement the function callization
var add = function(x) {
	return function(y) {
		return x + y;
	};
};
var increment = add(1);
var addTen = add(10);
increment(2)	/ / 3
addTen(2)	/ / 12
Copy the code

Summary:

Function.prototype.bind(thisArg) – – ES5

The ability to return a new function whose body is the same as the original, but when the new function is called to execute, this in the function body refers to the object represented by thisArg.

Function.prototype.call(this.Arg,val1,val2, …)

Call function execution and change this in the function body to the object represented by thisArg while the function is executing

val1, val2, …. Represents the list of actual arguments passed to the calling function

Function.prototype.apply(thisArg, array|arguments)

Call function execution, change this in the function body to the object represented by thisArg while the function is executing,

Array | the arguments that the function parameter list, using the format of the arrays or class

The difference between:

The difference between bind and call and apply: The difference between the return value: The return value of bind is a function, while call and apply are immediate calls. Bind, like call, writes the parameters it wants to pass from the second argument. Whereas call passes the second and subsequent arguments to fn as arguments, fn1’s arguments are actually arguments back from the arguments in bind.