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 objectPublic methods: Methods that obtain the context of the object they belong to through thismyObject.increment(); document.writeln(myObject.value); //
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 undefinedvar add = function (a,b) { return a + b;}; var sum = add(3,4);// sum的值为7
add.call(window, 3, 4)
strict mode:add.call(undefined,3,4)
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 newvar 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
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]... };
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!