Home > Web Front-end > JS Tutorial > body text

The relationship between JavaScript calling mode and this keyword binding

不言
Release: 2018-04-21 16:09:25
Original
1387 people have browsed it

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
Copy after login


##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); //
Copy after login


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
Copy after login


Underlying implementation:

add.call(window, 3, 4)


strict mode:add.call(undefined,3,4)
Copy after login


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”)
Copy after login


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
Copy after login


##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!"
Copy after login


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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!