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

JS is an object-oriented language, and its objects are simulated by prototype properties. Let's take a look at how to encapsulate JS objects.

Regular package function Person (name,age,sex) {this.name = name; this.age = age; this.sex = sex;} Pserson.prototype = {constructor:Person, sayHello:function () {console.log ('hello');}}

This is a more common way, more intuitive, but the responsibility of Person () is to construct objects, if the initialization is also done in it, the code will appear tedious, would it be better to initialize it in a method?

Upgrade (common) function Person (info) {this._init_ (info);} Pserson.prototype = {constructor: Person, _ init_: function (info) {this.name = info.name; this.age = info.age; this.sex = info.sex;} sayHello:function () {console.log ('hello');}}

However, at this point, I found that name,age,sex did not declare in Person, where did it come from?

The implementation principle of new

The execution of new can be replaced by the following function

Var myNew = function (constructor, args) {var o = {}; o.protoplast _ = constructor.prototype; var res = constructor.apply (o, args); var type = typeof res; if (['string',' number', 'boolean',' null', 'undefined'] .indexOf (type)! =-1) {return o;} return res;}

Explanation:

First, construct an empty object by var o = {}.

Then assign the prototype property prototype of the constructor to the prototype object _ _ proto__ of o. In this way, when executing this.init (info);, the object o can look for the _ init_ method in its prototype object. (prototype chain).

After that, this sentence is the essence.

Var res = constructor.apply (o.j.args)

Call the function in the context of o, while passing the parameters as an array. that,

This._init_ (info)

This sentence will be executed by o

Function

_ init_: function (info) {this.name = info.name; this.age = info.age; this.sex = info.sex;}

Called in the context of o, o will also have its own name,age,sex property.

If return compound types, including objects, functions, and regular expressions, are returned in the constructor, the object is returned directly, otherwise, o is returned.

Var type = typeof res; if (['string','number','boolean','null','undefined'] .indexOf (type)! =-1) {return o;} return res

Test it

Function Person (name) {this.name = name;} Person.prototype.sayHello = function () {console.log (this.name);} var o1 = myNew (Person, ['pawn']); console.log (o1); o1.sayHello ()

OK.

JQuery-like encapsulation

I learned this way from jQuery.

JQuery object has a strong integration, can be called as a function, can also be called as an object, when as a function call, she can return an instance of it without new, which is very convenient.

Look at the code first.

Var Person = function (info) {return new Person.prototype.init (info);} Person.prototype = {constructor: Person, init:function () {this.name = info.name. }} Person.prototype.init.prototype = Person.prototype

This encapsulation is very ingenious.

Put the construction operation of the object in the function and act as a factory.

It's not intuitive to keep calling prototype, so

Var Person = function (info) {return new Person.fn.init (info)} Person.fn = Person.prototype = {constructor: Person, init:function () {this.name = info.name; this.sayHello = function () {this.makeArray ();}} makeArray:function () {console.log (this.name) Function of this sentence / / although common methods such as makeArray are mounted under Person.prorotype, it will still be used by init as an instance .Person.fn.init.prototype = Person.fn

Finally, it is encapsulated with a closure.

Var Person = (function (window) {var Person = function (name) {return new Person.fn.init (name);} Person.fn = Person.prototype = {constructor: Person, init: function (name) {this.name = name; this.sayHello = function () {this.makeArray () }, makeArray: function () {console.log (this.name);}} Person.fn.init.prototype = Person.fn; return Person;}) ()

Test it

Var p = Person ('pawn'); console.log (p); p.sayHello ()

Object.create ()

Finally, js also provides a way to construct objects, object.create (); you can pass an object Person, construct a p, and make p inherit Person.

Var Person = {name: 'pawn', sayHello: function () {console.log (this.name);}} var p = Object.create (Person); console.log (p); p.sayHello ()

Result

As you can see, the property of the object Person becomes the prototype property of p, that is, the p prototype inherits from Person!

We can implement an Object.create ()

Object.create = function (prototype) {function Func () {}; Func.prototype = prototype; var o = new Func (); return o;}

Here, taking Person as the prototype property of the constructor, we can construct the object with Person as the prototype object.

Test it

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.