JavaScript is the second programming language I came into contact with after C language. During my freshman summer vacation, I found a Chinese-written JavaScript programming in the library. At that time, I was almost a novice in programming. In addition, the book did not mention the programming mechanism of JavaScript at all, and there were some misleading words. I have always had a deep misunderstanding of JavaScript, believing that JavaScript is just an object-oriented language that runs on the browser. I will write down this article that is confusing and misunderstood in JavaScript. Of course, due to the limited level of the author and no development experience, there are inevitably omissions, and I hope that criticism and correction will be made.
JavaScript Objects
What is the object
The new keyword can be seen everywhere in JavaScript code, which is easy to misunderstand that JavaScript is a language based on class inheritance, just like Java. But this is not the case. There are no classes in JavaScript. So what is the object of JavaScript that is not a class? In a sense, JavaScript objects are dictionaries (hash tables) in Python, and they are actually key-value pairs similar to this:
me={ "fisrtName" : "seek", "lastName" : "truth" , "getName" : function(){ return this.firstName+this.lastName; //this is equivalent to a pointer to this object}}This is a rather misunderstanding. When I first saw it, I felt a little incomprehensible, but I still felt it reasonable to use it carefully. We can use the [] operator to get elements like Python, or use the . operator to get elements:
me.firstName // => seekme["lastName"] //=> truthme.getName() // => seektruth
new operator
Since there is no class in JavaScript, what is the new operator doing? This is one of the most misleading aspects of JavaScript design. JavaScript is a functional programming language. Functions in JavaScript are first-class citizens, and functions in JavaScript are also objects. Function objects will be added to call attributes when they are created. What is more pitfall is that there are two ways of calling JavaScript functions. One is to call with the new keyword, and the other is to call without the new keyword. The former will return an object, and the latter will return the contents of the return statement. Consider the following function:
function Obj(name){ this.name=name; return name;}If we use the new operator to call:
obj = new Obj("seektruth") //obj will be an object: {"name": "seektruth"}
If we call directly:
obj = Obj("seektruth") //obj will be a string: "seektruth"
It is indeed a very tricky design. When we call, we need to distinguish whether we need to use new. Generally speaking, functions that need to use the new keyword will start with capitalization.
Another tricky thing is that if the returned return value is an object:
function Obj(name){ this.name=name; return {};}In this way, regardless of whether we call the new operator or not, we will return the value in the return statement:
new Obj("seektruth") //=> {}Obj("seektruth") //=> {}What the hell is it designed...
Object inheritance
prototype
As mentioned earlier, there is no class in JavaScript, so how does JavaScript implement inheritance? The answer is through the prototype chain. In JavaScript, each object has a prototype. When creating an object, if not specified, the prototype inherited by the object is Object.prototype. The function object will inherit Function.prototype (Function.prototype inherited Object.prototype):
Object.prototype // => {}Function.prototype // => [Function]We can view the prototype of the object through the __proto__ familiarity of the object:
a={}a.__proto__ // => {}JavaScript implements inheritance by specifying the prototype of the object. There are three main ways to specify the prototype of the object. One is to indicate the prototype in the constructor, the second is to directly modify the object's __proto__ attribute, and the third is to use the Object.create function. Let's take a look at it in turn.
Specify the prototype in the constructor
We can specify the prototype of the object in the constructor:
me={ "firstName" : "seek", "lastName" : "truth" , "getName" : function(){ return this.firstName+this.lastName; //this is equivalent to a pointer to this object}}function Obj(name){ this.firstName = name; this.__proto__ = me; //Specify the prototype as a me object}After specifying the prototype, we can access the properties of the prototype after creating a new object:
obj = new Obj("foo"); // => { firstName: 'foo' }obj.firstName // => fooobj.lastName // => truthobj.getName() // => "footruth"When accessing an object, you will first try to find the property in the modified object. If not, go back to the prototype to search until Object.prototype. If we rewrite the properties (methods) in the prototype in a new object, then when we use it, the newly written properties (methods) will overwrite the definition in the prototype, which is a bit like function overloading in a class-based language.
Note that if the lastname property of the prototype me object has changed, because the obj object is looking for properties in the prototype, the lastname property of the obj object will also change:
me.lastName = "me"obj.lastName // => "me"obj.getName() // => "foome"
Change the prototype of the object directly
We can also directly specify (change) the prototype of the object:
obj2 = {}obj2.__proto__ = meobj2.firstName // => seekobj2.lastName // => "me"obj2.getName() // => "seekme"Use the Object.create function
Although the first two methods can solve the problem, these two ways of writing are not elegant, because JavaScript is not a class-based language, and the first way of writing is easy to misunderstand. Crockford, the author of the essence of JavaScript language, believes that new should not appear in the JavaScript language, and it is recommended to use the Object.create function to create objects based on the prototype. The usage of the Object.create function is very simple:
obj3 = Object.create(me) // Create a new object with me as the prototype obj3.firstName // => seekobj3.lastName // => "me"obj3.getName() // => "seekme"
obj3 = Object.create(me) is equivalent to obj2 = {};obj2.proto = me, but the former is written more elegantly and easier to understand.
Summarize
As a prototype-based and functional programming language, JavaScript has many elegance and power in design, but at the same time it has many dross and pitfalls. For the most, JavaScript is also the language that is most misunderstood. After learning the object inheritance mechanism of JavaScript, I feel that my level has improved a lot.
The above brief discussion of JavaScript objects and inheritance is all the content I share with you. I hope it can give you a reference and I hope you can support Wulin.com more.