Home > Article > Web Front-end > How to use JS calling mode to bind this keyword
This time I will show you how to use the JS calling mode to bind with the this keyword, and what are the things to note when using the JS calling mode to bind with the this keyword. The following is a practical case, let’s take a look. take a look.
Invocation CallInvoking 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 methodvar 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
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);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)
Strict mode is new 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)<pre class="brush:php;toolbar:false">strict mode:add.call(undefined,3,4)</pre>
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 quo4 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:
How to use the image display plug-in highslide.js in jQueryHow to use Angularjs custom instructionsThe above is the detailed content of How to use JS calling mode to bind this keyword. For more information, please follow other related articles on the PHP Chinese website!