Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to deeply understand the inheritance in JS from the implementation of a component, which may not be well understood by many people. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something from this article.

In fact, no matter what language programmers write, the ultimate goal is to package the product or code together, provide interfaces, and make users very comfortable to achieve functions. So for me, the headache is not writing code, but writing comments and documentation! If the interface is messy, you will have a headache all day.

JavaScript was originally made public in the Web scripting language, and although server-side nodejs is now available, the nature of single-threading has not changed. For a Web developer, it is extremely important to be able to write beautiful components. The Web projects or components on GitHub that are open source and have more than 100 stars must be very readable.

Learn to write components from an example

The reference for the component tutorials comes from GitHub, easy to understand, links.

To achieve the following function, validate the contents of an input input box. Only a combination of pure numbers and letters is accepted, and the rest returns failed:

Global variable writing method

This way of writing is completely unrestrained, almost everyone knows it, and there is no skill at all:

/ / html / / javascript var input = document.getElementById ("input"); function getValue () {return input.value;} function render () {var value = getValue (); if (! document.getElementById ("show")) {var append = document.createElement ('span'); append.setAttribute ("id", "show"); input [XSS _ clean] .appendChild (append);} var show = document.getElementById ("show") If (/ ^ [0-9a-zA-Z] + $/ .exec (value)) {show [XSS _ clean] = 'passwords';} else {show [XSS _ clean] = 'Failedflows';}} input.addEventListener ('keyup', function () {render ();})

There is no need to say much about the shortcomings, variables do not have any isolation, seriously polluting global variables, although it can achieve the goal, but this method of writing is not recommended.

Object isolation scope

In view of the disadvantages of the above writing, we use objects to isolate variables and functions:

Var obj = {input: null, / / initialize and provide entry call method init: function (config) {this.input = document.getElementById (config.id); this.bind (); / / chained call return this;}, / / bind bind: function () {var self = this; this.input.addEventListener ('keyup', function () {self.render ();}) }, getValue: function () {return this.input.value;}, render: function () {var value = this.getValue (); if (! document.getElementById ("show")) {var append = document.createElement ('span'); append.setAttribute ("id", "show"); input [XSS _ clean] .appendChild (append);} var show = document.getElementById ("show") If (/ ^ [0-9a-zA-Z] + $/ .exec (value)) {show [XSS _ clean] = 'passwords';} else {show [XSS _ clean] = 'Failedflows';} _ window.onload = function () {obj.init ({id: "input"});}

Compared with the open writing method, the above method is clearer. There are initializations, internal functions and variables, and entry call methods.

The novice can achieve the above method is already very good, still remember at the beginning to do Baidu front-end college topic, basically is to use the object.

However, this method still has its drawbacks. The methods in the obj object are public, not private, and can be changed at will by code written by others. When many people cooperate or have a large amount of code, a series of problems will arise.

The writing method of function closure

Var fun = (function () {var _ bind = function (obj) {obj.input.addEventListener ('keyup', function () {obj.render ();});} var _ getValue = function (obj) {return obj.input.value;} var InputFun = function (config) {}; InputFun.prototype.init = function (config) {this.input = document.getElementById (config.id); _ bind (this); return this } InputFun.prototype.render = function () {var value = _ getValue (this); if (! document.getElementById ("show")) {var append = document.createElement ('span'); append.setAttribute ("id", "show"); input [XSS _ clean] .appendChild (append);} var show = document.getElementById ("show") If (/ ^ [0-9a-zA-Z] + $/ .exec (value)) {show [XSS _ clean] = 'passwords';} else {show [XSS _ clean] = 'failed requests;}} return InputFun;}) (); _ window.onload = function () {new fun (). Init ({id:' input'});}

The benefits of function closure writing are in the self-executing closure, which is not affected by the outside, and the methods provided to the outside include init and render. For example, we can modify it a little bit, like JQuery:

Var $= function (id) {/ / so you don't have to new every time return new fun (). Init ({'id': id});} _ window.onload = function () {$(' input');}

There are no prototypes involved, just simple closures.

Basically, this is already a qualified way of writing.

object-oriented

Although the above method is good enough, our goal is to use object-oriented. Object-oriented has always been regarded as a way of programming, if everyone's code style is similar, it is very convenient to maintain and view.

However, before I introduce object-oriented, I'd like to recall inheritance in JS (let's put it into * *).

Entry-level object-oriented

When it comes to inheritance, the first thing that comes to mind is to implement it in new. Or give priority to examples, people-> students-> pupils, there is a prototype chain in JS, _ _ proto__ and prototype, for the prototype chain is not too much, if you do not understand can go to consult some information.

Here, I still want to explain the new construction in JS, such as var student = new Person (name), which actually has three steps:

Var student = {}; student.__proto__ = Person.prototype; Person.call (student, name)

The resulting student is an object, and the prototype,Person.call of _ _ proto__ executing Person is equivalent to constructor.

Function Person (name) {this.name = name;} Person.prototype.Say = function () {console.log (this.name + 'can sayings');} var ming = new Person ("xiaoming"); console.log (ming.__proto__ = = Person.prototype) / / second step result of true new console.log (ming.name) / / 'third step result of xiaoming' new ming.Say () / /' xiaoming can sayings' The result of upward traceability of proto

Using the upward traceability of the _ _ proto__ attribute, you can implement an inheritance based on the prototype chain.

Function Person (name) {this.name = name;} Person.prototype.Say = function () {console.log (this.name + 'can sayings');} function Student (name) {Person.call (this, name); / / the attribute of Person is assigned to Student} Student.prototype = new Person (); / / the order cannot be reversed, in front of Student.prototype.DoHomeWork = function () {console.log (this.name + 'can do homeworkmanship') } var ming = new Student ("xiaoming"); ming.DoHomeWork (); / / 'xiaoming can do homeworkspaces' Ming.Say (); / / 'xiaoming can sayings'

Probably when I first knew the prototype chain, I could only write at this level, my previous article.

Open the debugging tool and see what ming has:

Ming name: "xiaoming" _ _ proto__: Person DoHomeWork: () name: undefined / / Note the addition of a name attribute _ _ proto__: Object Say: () constructor: Person (name) _ _ proto__: Object

When ming.Say () is called, ming.__proto__.__proto__ happens to have this attribute, which is the principle of chained calls, looking down layer by layer.

This is the simplest form of inheritance.

Object-oriented advance

Let's take a look at the disadvantages of what we just did.

The traditional object-oriented super method is not implemented to call the parent class method, and the chain method still has some defects compared with the super method.

Resulting in too many prototype attributes (name) and loss of constructor (constructor is a very important attribute, MDN).

Because the chain is looking up layer by layer, until you find it, it is clear that super has the advantage of calling the parent class directly.

/ / added prototype attribute console.log (ming.__proto__) / / {name: undefined}

The reason for the extra name is that we executed Student.prototype = new Person (); and the third step of new executes a function of call, which makes Student.prototype.name = undefined, which happens to be ming.__proto__ pointing to Student's prototype, and it's inevitable to use new.

/ / missing constructor console.log (ming.constructor = = Person) / / true console.log (ming.constructor = = Student) / / false

It is also strange that ming inherits from Student but returns false. The reason is that the constructor method of Student.prototype is lost and the constructor method of Student.prototype.__proto__ is found up.

To find out why, this sentence caused the loss of Student.prototype 's constructor method:

Student.prototype = new Person ()

There was a breakpoint before this sentence, but it was replaced:

Now that you've found the problem, let's improve it:

/ / fn is used to exclude redundant attributes (name) var fn = function () {}; fn.prototype = Person.prototype; Student.prototype = new fn (); / / add the constructor attribute Student.prototype.constructor = Student

Replace the previous Student.prototype = new Person () with the above inheritance code

Object-oriented encapsulation

We can't inherit so many lines every time we write code, so let's be reasonable and simply wrap it:

Function classInherit (subClass, parentClass) {var fn = function () {}; fn.prototype = parentClass.prototype; subClass.prototype = new fn (); subClass.prototype.constructor = subClass;} classInherit (Student, Person)

Haha, the so-called packaging is to re-copy the code.

Further improve object-oriented

The above problem simply solves the problem of redundant attributes and the loss of constructor, while the supper problem has not been improved.

Take a chestnut, take a look at the importance of supper, everyone will sleep, sleep function is a human attribute, students are divided into primary school students and college students, primary school students go to bed at 9 pm, college students go to bed at 12:00, so:

Person.prototype.Sleep = function () {console.log ('Sleepstocks');} function E_Student () {}; / / pupils function C_Student () {}; / / College students classInherit (E_Student, Person); classInherit (C_Student, Person); / / rewrite Sleep method E_Student.prototype.Sleep = function () {console.log ('sleepbands'); console.log ('Sleep at 9 clock') } C_Student.prototype.Sleep = function () {console.log ('slippers'); console.log ('Sleep at 12 clock');}

For the Sleep method, it's confusing, and we want to call the function of the parent class directly through supper:

E_Student.prototype.Sleep = function () {this._supper (); / / supper method console.log ('Sleep at 9 clock');} C_Student.prototype.Sleep = function () {this._supper (); / / supper method console.log (' Sleep at 12 clock');}

Do not know whether the understanding of supper is correct, always feel strange, welcome to correct!

Let's take a look at how the father of JQuery is object-oriented class. The original text is here, and the source code is as follows.

/ * Simple JavaScript Inheritance * By John Resig http://ejohn.org/ * MIT Licensed. * / / Inspired by base2 and Prototype (function () {/ / initializing switch is ingenious to implement the call prototype without construction, and return var initializing = false, fnTest = / xyz/.test (function () {xyz;})? /\ b_super\ b /: /. * /; / / The base Class implementation (does nothing) / / global, this points to window,*** 's parent class this.Class = function () {} / / Create a new Class that inherits from this class / / inherited entry Class.extend = function (prop) {/ / retains the current class, usually the parent prototype var _ super = this.prototype; / / Instantiate a base class (but only create the instance, / / don't run the init constructor) / / switch is used to make the prototype assignment without invoking the real composition process initializing = true Var prototype = new this (); initializing = false; / / Copy the properties over onto the new prototype for (var name in prop) {/ / Check if we're overwriting an existing function / / A pair of function judgments, apply attributes to subclasses prototype [name] = typeof prop [name] = = "function" & & typeof _ supername = = "function" & & fnTest.test (function (name, fn) {/ / use closures to store return function () {var tmp = this._super; / / Add a new. _ super () method that is the same method / / but on the super-class this._super = _ supername] / / The method only need to be bound temporarily, so we / / remove it when we're done executing / / call var ret = fn.apply (this, arguments); this._super = tmp; return ret;};}) (name, prop [name]): prop [name] } / / the subclass function Class () {/ / All construction is actually done in the init method if (! initializing & & this.init) this.init.apply (this, arguments) to be returned;} / / inherit Class.prototype = prototype; Class.prototype.constructor = Class; Class.extend = arguments.callee; return Class;} as described earlier ) ()

At this time, you can easily implement object-oriented, using the following:

Var Person = Class.extend ({init: function (name) {this.name = name;}, Say: function (name) {console.log (this.name + 'can sayings');}, Sleep: function () {console.log (this.name + 'can layers');}}); var Student = Person.extend ({init: function (name) {this._super ('Student-' + name)) }, Sleep: function () {this._super (); console.log ('And sleep homes');}, DoHomeWork: function () {console.log (this.name + 'can do homeworkpieces');}}); var p = new Person ('Li'); p.Say (); / /' Li can sayings' P.Sleep (); / /'Li can Sleepy' Var ming = new Student ('xiaoming'); ming.Say (); / /' Student-xiaoming can sayings' Ming.Sleep (); / / 'Student-xiaoming can sleepless' / / 'And sleep earlyworthy' Ming.DoHomeWork (); / / 'Student-xiaoming can do homeworkspaces'

In addition to John Resig's supper method, many people have tried it, but I think the implementation of John Resig is very wonderful and close to the supper method. I myself have been debugging with source code for several hours before I can barely understand it. John Resig's mind is really admirable.

Class in ES6

In JS, class is a keyword from the beginning, and in ES6 you can finally use class to define classes. For example:

Class Point {constructor (x, y) {this.x = x; this.y = y;} toString () {return'('+ this.x +','+ this.y +')';}} var p = new Point (3line 4); console.log (p.toString ()); / /'(3jue 4)'

For more information about the use of classes in ES6, please refer to teacher Ruan Yifeng's basic Class grammar.

In fact, class in ES6 is more convenient and more object-oriented when writing object prototypes, and the function ES5 of class can be achieved, such as in the above example:

Typeof Point; / / 'function' Point.prototype; / * | Object |-> constructor: function (x, y) |-- > toString: function () |-- > _ _ proto__: Object * /

It's really no different from what is implemented in ES5, but some of the popular libraries bring better benefits than ES6's class.

Back to the original component problem.

So, after talking so much about object orientation, let's go back to the original implementation of the component-how to implement it with object orientation.

Or the way to construct class using John Resig:

Var JudgeInput = Class.extend ({init: function (config) {this.input = document.getElementById (config.id); this._bind ();}, _ getValue: function () {return this.input.value;}, _ render: function () {var value = this._getValue (); if (! document.getElementById ("show")) {var append = document.createElement ('span') Append.setAttribute ("id", "show"); input [XSS _ clean] .appendChild (append);} var show = document.getElementById ("show"); if (/ ^ [0-9a-zA-Z] + $/ .exec (value)) {show [XSS _ clean] = 'passwords';} else {show [clean] = 'failed' }, _ bind: function () {var self = this; self.input.addEventListener ('keyup', function () {self._render ();});}}); _ window.onload = function () {new JudgeInput ({id: "input"});}

However, in this way, the basic function is realized, the key is that it is not easy to expand, there is no essence of object-oriented. Therefore, in view of the current situation, we are going to establish a Base base class. Init represents initialization, render function represents rendering, bind function represents binding, and destory is used to destroy. At the same time, get and set methods provide to obtain and change properties:

Var Base = Class.extend ({init: function (config) {this._config = config; this.bind ();}, get: function (key) {return this._ configs [key];}, set: function (key, value) {this._ configs [key] = value }, bind: function () {/ / later construction}, render: function () {/ / later construction}, destory: function () {/ / define destruction method}})

Based on this Base, we modify the JudgeInput as follows:

Var JudgeInput = Base.extend ({_ getValue: function () {return this.get ('input') .value;}, bind: function () {var self = this; self.get (' input'). AddEventListener ('keyup', function () {self.render ();});}, render: function () {var value = this._getValue () If (! document.getElementById ("show")) {var append = document.createElement ('span'); append.setAttribute ("id", "show"); input [XSS _ clean] .appendChild (append);} var show = document.getElementById ("show"); if (/ ^ [0-9a-zA-Z] + $/ .exec (value)) {show [XSS _ clean] =' passwords' } else {show [XSS _ clean] = 'failed requests;}); _ window.onload = function () {new JudgeInput ({input: document.getElementById ("input")});}

For example, we later modified the judgment condition to return success only when the length is 5-10. At this time, we can quickly locate the render function of JudgeInput:

Render: function () {var value = this._getValue (); if (! document.getElementById ("show")) {var append = document.createElement ('span'); append.setAttribute ("id", "show"); input [XSS _ clean] .appendChild (append);} var show = document.getElementById ("show") / / modify the regular if (/ ^ [0-9a-zA-Z] {5 value 10} $/ .exec (value)) {show [XSS _ clean] = 'passwords';} else {show [XSS _ clean] = 'Failedcodes;}}

As far as I can go, that's all I can understand.

With regard to the writing of a component, there are twists and turns from the entry level to the final version, taking into account not only the practicality of the code, but also post-maintenance. Object-oriented is implemented in JS. When I first came into contact with JS, I could use a simple prototype chain to achieve it. Later, I read some articles and found a lot of problems. I was deeply impressed by the Class of John Resig. Fortunately, the goal now is to achieve.

After reading the above, do you have any further understanding of how to deeply understand inheritance in JS from the implementation of a component? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.