Home  >  Article  >  Web Front-end  >  Thoughts on the object-oriented inheritance mechanism call triggered by the call() method in JavaScript_javascript skills

Thoughts on the object-oriented inheritance mechanism call triggered by the call() method in JavaScript_javascript skills

WBOY
WBOYOriginal
2016-05-16 18:02:26961browse

Cause:
Today when I was reading Master Snandy’s Chapter 5 of Reading jQuery (Getting DOM Elements), I saw the toArray() method mentioned. The specific jQuery code is as follows:

Copy code The code is as follows:

toArray: function() {
return slice.call( this, 0 );
},
get: function( num ) {
return num == null ?
// Return a 'clean' array
this.toArray() :
// Return just the object
( num < 0 ? this[ this.length num ] : this[ num ] );
},

See the call() method here, and I have read the manual before, saying It is an object impersonation and is used for inheritance. It's a bit messy in the jQuery source code, so I extracted this part and put it in a separate file to see the specific execution.

But I still don’t quite understand it, so I decided to study call today. So I checked the instructions on MDN, and on a whim, I took out my "Sunflower Collection"-Oxford Dictionary, ready to practice my English, improve it, and also provide some help to friends in need (if there are some mistakes in translation) Please forgive me for the way out! )
call
Summary:
Call a function
by giving this and arguments. Note: The syntax of this method is similar to the apply method, but the difference is: call () accepts a parameter list, while apply() accepts an array of parameters passed to the function
A method of the Function class: JavaScript version 1.3 or later
Syntax:
fun.call(thisArg[, arg1[, arg2 [, ...]]])
Parameter description:
thisArg:
Specify the object for the call to fun(). Note: the this value you see may not be the actual value: if this method is in non-strict mode, null and undefined will be replaced by the global object, and the original value will be encapsulated.
  arg1,arg2,....
   parameters of this object
 Description:
 When calling an existing function, you can allocate different objects. At this time, the object specified by this is the currently calling object.
With call, you can write a method only once and have it inherited by another object. Instead of creating a new object yourself, override this method. (That is, object impersonation, there will be examples below!)

There are examples on the MDN official website. In addition, I accidentally saw a related question on stackoverflow. When I saw an answer in it, I immediately understood the object impersonation and how it happened.
Extract that part below (click here to read the original text):

In javascript, methods of an object can be bound to another object at runtime. In short, javascript allows an object to "borrow" the method of another object:
Copy code The code is as follows:

object1 = {
name:'frank',
greet:function(){
alert('hello ' this.name)
}
};
object2 = {
name:'andy'
};
// Note that object2 has no greet method.
// But we may "borrow" from object1:
object1.greet.call(object2);

The call and apply methods of function objects (in javascript functions are objects as well) allows you to do this. So in your code you could say that the Nodelist is borrowing an array's slice method. What does the conversion is the fact that slice returns another array as it's result.  

The first sentence here is very vivid, and the general meaning is: in JavaScript, the method of an object can be bound to another object. To put it simply, JavaScript allows an object to 'borrow' methods that do not belong to itself. "Impersonation" is self-evident. In the above example, object2 pretends to be object1 to call the method of object1.

PS: It’s the first time for a rookie to write a blog. It’s a bit messy. I believe it will gradually improve in the future. I will learn from all my brothers and sisters how to write a blog and write a good blog. In addition, everyone is welcome to give me criticism and guidance!

Reference materials:
1.w3cschool ECMAScript inheritance mechanism implementation

2.Instructions for calling on MDN

3.stackoverflow

Statement:
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