Detailed explanation of JS calling mode and the use of this keyword

This time I will bring you a detailed explanation of the JS calling mode and the use of this keyword. What are the precautions for the JS calling mode and the use of this keyword. The following is a practical case, let's take a look.

Invocation Call

Invoking a function will pause the execution of the current function and pass control and parameters to the new function.

Inconsistency between actual and formal parameters will not lead to runtime errors, more will be ignored, and less will be filled as undefined

Each method will receive two additional parameters: this and arguments. The value of this depends on the calling mode, calling mode: method, function, constructor and apply calling mode
This is assigned a value and occurs at the time it is called. Different invocation patterns can be implemented using the call method

var myObject = { 
value: 0, 
increment: function (inc) { 
this.value += typeof inc === 'number' ? inc : 1; 
} 
}; 
myObject.double = function(){ 
var helper = function(){ 
console.log(this);// this point to window 
} 
console.log(this);// this point to object myObject 
helper(); 
} 
myObject.double();//myObject Window

1 The Method Invocation Pattern Method Invocation Pattern

Method: The function is saved as an attribute of the object. When the method is called When, this is bound to the object

Public method: Method to obtain the context of the object they belong to through this

myObject.increment(); 
document.writeln(myObject.value); //

Underlying implementation: myObject.increment. call(myObject, 0);

2 The Function Invocation Pattern Function Invocation Pattern

When a function is not an attribute of the object, it is called as a function ( A bit nonsense...), this is bound to the global object (window)

There is a new strict mode in ECMAScript5. In this mode, in order to expose problems as early as possible and facilitate debugging. this is bound to undefined

var add = function (a,b) { return a + b;}; 
var sum = add（3，4）；// sum的值为7

Underlying implementation: add.call(window, 3, 4)

strict mode：add.call（undefined，3，4）

The difference between method calling mode and function calling mode

function hello(thing) { 
console.log(this + " says hello " + thing); 
} 
person = { name: "Brendan Eich" } 
person.hello = hello; 
person.hello("world") // [object Object] says hello world 等价于 person。hello。call（person，“world”） 
hello("world") // "[object DOMWindow]world" 等价于 hello。call（window，“world”）

3 The Constructor Invocation Pattern

JavaScript is a language based on prototypal inheritance, and also provides a set of object construction syntax for class-based languages.

this points to the object returned by new

var Quo = function (string) { 
this.status = string; 
}; 
Quo.prototype.get_status = function ( ) { 
return this.status; 
}; 
var myQuo = new Quo("this is new quo"); //new容易漏写，有更优替换 
myQuo.get_status( );// this is new quo

4 The Apply Invocation Pattern

apply and call are built-in parameters of javascript, both of which immediately change this Binding to a function, the former parameter is an array, and the latter needs to be passed one by one. apply is also implemented by the bottom layer of call

apply(this,arguments[]); 
call(this,arg1,arg2...); 
var person = { 
name: "James Smith", 
hello: function(thing,thing2) { 
console.log(this.name + " says hello " + thing + thing2); 
} 
} 
person.hello.call({ name: "Jim Smith" },"world","!"); // output: "Jim Smith says hello world!" 
var args = ["world","!"]; 
person.hello.apply({ name: "Jim Smith" },args); // output: "Jim Smith says hello world!"

In contrast, the bind function separates binding this to the function and calling the function, so that Functions can be called in a specific context, especially the apply implementation of event bind

Function.prototype.bind = function(ctx){ 
var fn = this; //fn是绑定的function 
return function(){ 
fn.apply(ctx, arguments); 
}; 
}; 
bind用于事件中 
function MyObject(element) { 
this.elm = element; 
element.addEventListener('click', this.onClick.bind(this), false); 
}; 
//this对象指向的是MyObject的实例 
MyObject.prototype.onClick = function(e) { 
var t=this; //do something with [t]... 
};

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to use the nodeJS module

Detailed explanation of the jQuery plug-in highslide.js control image case

The above is the detailed content of Detailed explanation of JS calling mode and the use of this keyword. For more information, please follow other related articles on the PHP Chinese website!