1. Implementation examples:
function Person(name, sex) { this.name = name; this.sex = sex; } Person.prototype = { name:'Anonymous person', sex:'Unknown', nation:'Mars', getName: function() { return this.name; }, getSex: function() { return this.sex; }, getNation: function() { return this.nation; } } var people = new Person("Tom", "man"); alert(people.getName()); //name value when constructing objects alert(people.getNation()); //Using the nation al value in the prototype
We call the function Person (that is, the function to create a custom object) a constructor, and Person.prototype a prototype of Person. It can be seen that JavaScript simulates and implements the functions of classes by means of constructors and prototypes. Prototype is essentially a JavaScript object, and each function has a default prototype attribute. Attributes in prototype prototypes can be referenced by custom objects of the class to which the prototype belongs.
If People is understood as a parent class, a child class Employee is defined to inherit the attributes in the parent prototype. Then:
function Employee(employeeID,name,sex){ this.employeeID = employeeID; this.name = name; this.sex = sex; } Employee.prototype = new Person(); //Point Employee's prototype to the parent class's object Employee.prototype.getEmployeeID = function() { return this.employeeID; }; //At this point, Employee objects can call methods in Person var boss = new Employee("001", "Jim", "man"); alert(boss.getEmployeeID()); //employeeID value when constructing objects alert(boss.getName()); //name value when constructing objects alert(boss.getNation()); //Using the nation al value in the prototype
2. Variable this: Represents the current object. If this is used in global scope, the current page object window is returned. If this is used in a function (method), the object calling the function is returned. You can use call or apply to reassign the object represented by this.
(1) In the global scope:
<script type="text/javascript"> alert(this === window); // true </script>
(2) Within the function:
var fruit = "apple"; //Define a global variable equivalent to window. fruit = apple. function test() { alert(this.fruit); } test(); //apple
(3) In the method:
var obj = { fruit: "orange", test: function(){alert(this.fruit);} }; obj.test(); // "orange"
3. The constructor property of an object: always points to the constructor that created the object.
var a = new Array(1, 56, 34, 12); alert(a.constructor===Array); //true var b = [1, 56, 34, 12]; alert(b.constructor===Array); //true var c = new Function(); alert(c.constructor===Function); //true var d = function(){}; alert(d.constructor===Function); //true var Foo = function(){}; var obj = new Foo(); alert(obj.constructor.constructor === Function); //true function Person(name) { this.name = name; } var p = new Person("Tom"); alert(p.constructor===Person); //true
If the prototype of Person is modified, the constructor of the object created by Person is still Person
function Person(name) { this.name = name; } //Modify Person's prototype instead of covering it all Person.prototype.getName = function() { return this.name; }; var p = new Person("Tom"); alert(p.constructor===Person); //true
However, if the prototype of Person is overwritten, the constructor of the object created by Person becomes Object
function Person(name) { this.name = name; } //Prototype Overlaying Person Person.prototype = { getName: function(){ return this.name; } }; var p = new Person("Tom"); alert(p.constructor===Person); //false alert(p.constructor===Object); //true
This is because the actual operation of overwriting Person's prototype is:
Person.prototype = new Object({ getName: function(){ return this.name; } });
So the constructor of the object points to Object rather than Person, and this error can be corrected in the following ways:
Person.prototype.constructor=Person;
Specifically: the prototype constructor of the constructor always points to the constructor itself.
alert(String.prototype.constructor===String); //true alert(Array.prototype.constructor===Array); //true alert(Date.prototype.constructor===Date); //true alert(Number.prototype.constructor===Number); //true alert(Object.prototype.constructor===Object); //true function Person(name) { this.name = name; } alert(Person.prototype.constructor==Person); //true
Reference: Douglas Crockford, The Essence of JavaScript Language
http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html