"Javascript advanced programming" study notes - the constructor and prototype

Constructors and Prototype

Constructor mode

　The simplest constructor:

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() {
        console.log(this.name);
    }
}

var p1 = new Person("jerry", 18, "Coder");
var p2 = new Person("tom", 28, "Javaer");

　To create an instance of the Person, you need to use the new keyword. In this way the calling function can create an instance of an object because implicitly perform the following four steps after using the new:

1. Create a new object (the object-based Object)
2. The scope of the constructor assigns a new object (this case points to the new object)
3. The constructor is executed in Code
4. Returns the object

　Without using the new keyword directly calling the function, then it is just the same as a normal function; the function of this would be the current global scope:

Person("jerry", 18, "Javaer"); //添加到window中
window.sayName();   // "jerry"

　Examples of objects will have a constructor (in fact, this property should be on the prototype of the next section talk about the concept of prototypes.) Properties, point constructor:

console.log(p1.constructor == Person); //true

But this is not recommended way to detect the type of the object, because the property is writable; use instanceof.

---

Prototype mode

　In front of that most basic constructor mode there is a very obvious question is this: For every time you create a new instance, you need to re-create a sayName function on the instance; this created many of the same features of the function object is clearly not necessary . Below that prototype model can solve this problem.

　Each type of function has created a the prototype in JS (prototype) property, which points to an object, the prototype object, and the object is to use may contain attributes and methods are shared by all instances of a certain type .
　By use of this example to aid in understanding the prototype:

function Person() {
}
Person.prototype.name = "jerry";
Person.prototype.age = 18;
Person.prototype.job = "Javaer";

Person.prototype.sayName = function() {
    console.log(this.name);
}

var p1 = new Person();
var p2 = new Person();
p1.sayName() //"jerry"
console.log(p1.sayName == p2.sayName) //true

　By the definition of the variables and functions of the prototype, so that all instances of the constructor can share the same variables and functions. This is a prototype search mechanism completed: Because each instance of an object has two internal property [[prototype]] points to the prototype object; when a property search object, the object itself will first search instance, if there is returned; no, it would have to [[prototype]] pointer prototype keep looking. Thus, in the example a subject may be covered with the same name in the properties of the prototype. Moreover, all instances of objects are pointing to the same prototype, which is why the code example above object has the same variables and functions.

　Note that instances of objects [[prototype]] is assigned by the object is created in the early prototype property to the constructor; if so rewriting prototype After creating the instance of the object, then the prototype is rewritten previously created examples of unrelated objects (instances of objects that are still pointing to the original prototype):

function Person() {
}
Person.prototype = {
    constructor: Person,
    name : "Tom"
}
var p = new Person();
console.log(p.name); //"Tom"

Person.prototype = {
    constructor: Person,
    name: "jerry",
    age: 18,
    job: "Javaer",
    sayName: function() {
        console.log(this.name);
    }
}

console.log(p.name); //"Tom"

p.sayName(); //throw error

---

Parasitic constructor mode

　Name from the strange, in fact, refers to the package to create an object, and then return to the newly created object.

function Person() {
    var o = new Object();
    o.name = "Java";
    o.f = function() {
        console.log("Kotlin");
    }
    return o;
}

var temp = new Person();
console.log(temp.name); //"Java"
temp.f();   //"Kotlin"

　Here so as not to use the new operator has no effect, both the effect is the same. New new use, in the absence of a constructor return value returned by default a new instance of the object created implicitly. And add a return statement in the constructor, the value returned by calling the constructor can be rewritten.


　Essentially, this model is to use an ordinary function in which the object is added to the existing attributes or override the existing objects in order to achieve enhanced functionality; a little bit similar to inherit the role.

Creating a custom Array object:

function myArray() {
    var arr = new Array();

    arr.push.apply(arr, arguments);

    arr.toString = function() {
        return this.join("|");
    }

    return arr;
}

var colors = myArray("red", "blue", "yellow");
console.log(colors.toString()); //"red|blue|yellow"

---

Constructors safe mode

　The contents of this section on the Little Red Book put in the position of feeling is not very suitable for beginners = _ = ... look at this section of the content may be a bit lost, but also to the example code in the book is not all. This mode of action set forth in the book is to construct an object without major public properties, i.e., analog private variable, only accessed by the function. Suggestions can skip this section, the following can be understood under this section back to see the concept of closure.