Prototype and Inheritance of JavaScript

Keywords: Web Development Javascript Attribute

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

Posted by nitation on Mon, 28 Jan 2019 13:21:14 -0800