JavaScript原型

JavaScript原型教程

在 JavaScript 中每一个对象 (除 null 外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中 “继承” 属性。

JavaScript prototype

在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性指向函数的原型对象。

JavaScript constructor

在 JavaScript 中，每个原型都有一个 constructor 属性，指向该关联的构造函数。

JavaScript `proto`

在 JavaScript 中，每个对象(除 null 外)都会有的属性，叫做 __proto__，这个属性会指向该对象的原型。

JavaScript原型链

在 JavaScript 中，每个继承父函数的子函数的对象都包含一个内部属性 _proto_。该属性包含一个指针，指向父函数的 prototype。

若父函数的原型对象的 _proto_ 属性为再上一层函数，在此过程中就形成了原型链。

案例

JavaScript prototype

每个函数都有一个 prototype 属性

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript prototype</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function Person(name, age) {
                this.name = name;
                this.age = age;
            }
            var person = new Person("HaiCoder", 109);
            console.log("Person =", person);
            console.log("Person prototype =", Person.prototype);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

37_JavaScript prototype.png

我们定义了一个函数 Person，该函数包含两个属性，即 name 和 age，接着，我们使用 new 创建了一个 Person 对象 person。

最后，我们打印了 person 对象，同时，打印了 Person 函数的 prototype，我们发现，Person 函数的 prototype 也是一个对象，即，每一个 person 对象都包含一个 prototype。

同时，我们发现，person 对象的 prototype 里面包含了一个 constructor 属性，该属性指向了关联的构造函数。

JavaScript constructor

每个原型都有一个 constructor 属性

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript constructor</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function Person(name, age) {
                this.name = name;
                this.age = age;
            }
            var person = new Person("HaiCoder", 109);
            console.log("Person =", person);
            console.log("Person == Person.prototype.constructor: ", Person === Person.prototype.constructor);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

38_JavaScript constructor.png

我们可以看到，Person 与 Person 的原型的 constructor 是相等的，即 Person 的原型的 constructor 指向了 Person 本身。

JavaScript `proto`

每个对象都会有 __proto__ 属性

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript __proto__</title>
        <script type="text/javascript">
            console.log("嗨客网(www.haicoder.net)");
            function Person(name, age) {
                this.name = name;
                this.age = age;
            }
            var person = new Person("HaiCoder", 109);
            console.log("Person =", person);
            console.log("person __proto__ =", person.__proto__);
            console.log("person.__proto__ === Person.prototype :", person.__proto__ === Person.prototype);
        </script>
    </head>
</html>

程序运行后，控制台输出如下：

39_JavaScript proto.png

我们可以看到，每一个对象都有一个 __proto__ 属性，并且对象的 __proto__ 属性与 Person 的 prototype 相等。

JavaScript原型总结

在 JavaScript 中每一个对象 (除 null 外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中 “继承” 属性。