JS objects of the package (II)

JS objects packaged in the usual manner

1. The conventional packages

    function Person (name,age){ 
        this.name = name;
        this.age = age;
    }
    
    Pserson.prototype = {
       constructor:Person,
       say:function(){
           console.log('hello everyone!');
     }
    }

2. Upgrade version (more common)

    function Person (example){
        this._init_(example);
    }
    Pserson.prototype = {
        constructor : Person,
        _init_ : function(example) {
            this.name = example.name;
            this.age = example.age;
        }
        say:function(){
            console.log('hello everyone');
        }
    }

The implementation of the principle of 3.new

var myNew = function(constructor, args) {
    var obj = {};
    obj .__proto__ = constructor.prototype;
    var res = constructor.apply(obj , args);
    var type = typeof res;
    if (['string', 'number', 'boolean', 'null', 'undefined'].indexOf(type) !== -1) {
        return obj ;
    }
    return res;
}
Explanation: var obj = {} By Constructs an empty object attribute assignment prototype prototype prototype constructor object obj to the __proto__.
, Performing this.init (example); this sentence, the subject can be obj Find _init_ its prototype object method. (Prototype chain).
var res = constructor.apply(obj,args);

Obj is in the context of the calling function, while the parameter as an array. Well,

this._init_(example);

Obj will be executed

function

_init_ : function(example) {
    this.name = example.name;
    this.age = example.age;
}

To call for the context obj, o will also have its own name, age properties.
If in the constructor, return complex types, including objects, functions, and regular expressions, it will return the object directly, otherwise, returns obj

var type = typeof res;

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

For example

   function Person(name) {
        this.name = name;
    }
    Person.prototype.say = function() {
        console.log(this.name);
    }
    var jack = myFriend(Person, ['jack ']);
    console.log(jack );
    jack.say();

4. Class Packaging jQuery

jQuery object has a strong integration can be called as a function, can also be used as an object called when a function call time, may not need to return a new instance.

Code

    var Person = function(info){
     return new Person.prototype.init(info);
    }
    
    Person.prototype = {
        constructor: Person,
        init:function(){
            this.name = example.name.
        }
    }
    Person.prototype.init.prototype = Person.prototype;
  • This package is very clever way. The structure of the operation object on the inside function, while he acts as a factory. Continue to call prototype is not an intuitive approach, so
    var Person = function(example){
            return new Person.fn.init(example);
        }
    
    Person.fn = Person.prototype = {
        constructor: Person,
        init:function(){
            this.name = info.name;
            this.say = function(){
                this.makeExp();
            }
        }
        makeExp:function(){
            console.log(this.name);
        }
    }

// Although the conventional method to mount the like makeArray Person.prorotype below, but they will be init this instance.
Person.fn.init.prototype = Person.fn;
finally encapsulated with closures

 var Person = (function(win) {
        var Person = function(name) {
            return new Person.fn.init(name);
        }

        Person.fn = Person.prototype = {
            constructor: Person,
            init: function(name) {
                this.name = name;
                this.say = function() {
                    this.makeExp();
                }
            },
            makeExp: function() {
                console.log(this.name);
            }
        }

        Person.fn.init.prototype = Person.fn;

        return Person;
    })()

For example:

var people = Person('jack');
console.log(people);
people.say();

Object.create ();
way to construct the object, an object can pass the Person, construct a people, and the people inheriting Person.

var Person = {
    name: 'jack',
    say: function() {
        console.log(this.name);
    }
}
var people = Object.create(Person);
console.log(people);
people.say();

Person object attributes become archetype attributes people, that people inherit from prototype Person!

We can achieve a Object.create ()

Object.create = function(prototype){
   function Fun(){};
   Fun.prototype = prototype;
   var obj = new Fun();
   return obj;
}

Description:
The attribute Person as a prototype for the constructor, the object can be constructed as a prototype object to Person.

Object.create (prototype); create a prototype instance objects inherit the

On this approach some considerations:
(1) If the mass participation is Object.prototype, the creation of prototype Object.prototype,

  • Objects and new Object () creates the same Object.create (Object.prototype) <==> new new
    Object ();

(2) If the parameter passing empty or null, then the object is not created prototype,

  • It causes the object is not using document.write () will print an error,
Because the principle of printing document.write () is invoked Object.prototype.toString () method,
the object is not a prototype, there is no method, so document.write () does not print

   由此延伸的知识点: 引用值都也是算作是对象,  所以都可以用document.write()打印; 原始值numebr, boolean,
   string都有自己对象的包装类, 借助此机制也是可以用document.write()打印出的;

  但undefined 和 null既不是引用值,也没有对应的包装类,    所以应该无法打印的,但大家会发现这两个值也是可是用document.write()打印的, 因为这两个值被设定为特殊值,   

document.write () Print it is without calling any method, but the value of the direct printing

Guess you like

Origin www.cnblogs.com/baimeishaoxia/p/11921384.html
Recommended