JavaScript prototype prototype usage

JavaScript object prototype

All JavaScript objects inherit properties and methods from the prototype.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>

<h2>JavaScript 对象</h2>

<p id="demo"></p>

<script>
    function Person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }

    var myFather = new Person("John", "Doe", 50, "blue");
    var myMother = new Person("Sally", "Rally", 48, "green");

    document.getElementById("demo").innerHTML =
        "My father is " + myFather.age + ". My mother is " + myMother.age;
</script>

</body>
</html>

We also learned that you can not add new attributes to an existing object constructor:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript对象</title>
<body>

<h2>JavaScript对象</h2>

<p>您无法向构造函数添加新属性。</p>

<p id="demo"></p>

<script>
    function Person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }

    Person.nationality = "English";

    var myFather = new Person("John", "Doe", 50, "blue");
    var myMother = new Person("Sally", "Rally", 48, "green");

    document.getElementById("demo").innerHTML =
        "The nationality of my father is " + myFather.nationality;
</script>

</body>
</html>

To add a new constructor property, you must add it to the constructor:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript对象</title>
<body>

<h2> JavaScript对象</h2>

<p id="demo"></p>

<script>
    function Person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
        this.nationality = "English";
    }

    var myFather = new Person("John", "Doe", 50, "blue");
    var myMother = new Person("Sally", "Rally", 48, "green");

    document.getElementById("demo").innerHTML =
        "我父亲的国籍是 " + myFather.nationality + ". 我母亲的国籍是: " + myMother.nationality;
</script>

</body>
</html>
  • Prototypal inheritance

    All JavaScript objects inherit properties and methods from the prototype:

    Object.prototype prototype inheritance chain is located at the top: Date Object, Array objects, and Person object inherits from Object.prototype.

    • Date object inherits from Date.prototype
    • Array object inherits from Array.prototype
    • Person object inherits from Person.prototype

Add properties and methods to an object

Sometimes, you want to add a new property (or method) to a given type of all existing objects. Sometimes you want to add a new property (or method) to the object constructor.

Use the prototype property

JavaScript prototype property allows you to add new attributes to the object constructor:

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";

JavaScript prototype property also allows you to add new methods to the object constructor:

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;
};

Better prototype object article

Guess you like

Origin blog.51cto.com/13578973/2421048