The relationship between JavaScript calling mode and this keyword binding

This article mainly introduces the relevant information about the relationship between JavaScript calling mode and this keyword binding. Friends in need can refer to

Invocation call

Calling a function suspends execution of the current function and passes 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

Methods: Functions are saved as properties of the object. When the method is called, this is bound to the object

Public methods: Methods that 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 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. They both bind this to the function immediately. The former parameter is an array, and the latter needs to be passed one by one. apply is also implemented by the underlying 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 the function can be called in a specific context, especially event bind Implementation of apply

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]... 
};

Related recommendations:

Detailed explanation of examples of JavaScript calling ActiveX to operate Oracle database

A brief discussion on the this calling object of JS

The above is the detailed content of The relationship between JavaScript calling mode and this keyword binding. For more information, please follow other related articles on the PHP Chinese website!