WithCoderWithCoderWithCoder

Javascript原型对象之概念简介

    使用Javascript很长时间了,对于Javascript的原型还是一知半解。在网上查询很多关于JS原型的解释的文章,也看书和通过代码试图来了解原型是什么,但总是感觉理解不够透彻。本文就个人对Javascript的理解做简单介绍,以备后续深入学习使用。

    1. 什么是原型

    原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承。

    2. 函数的原型对象(prototype)

    在JavaScript中,我们通过function关键字创建一个函数A后,该函数A就会默认带有一个名称是 prototype 的属性,这个prototype 属性就叫做函数的原型对象,简称函数的原型。

    通过在浏览器控制台中打印这个原型属性(A.prototype),我们可以发现这个原型属性默认会有一个属性 constructor 指向了这个函数A ( 也就是说,原型属性的 constructor 属性的值是函数A )。  1-20041922404O36.png

    通过以下简单的代码,也可以明确的看到函数和函数的原型对象的关系:    

    <script>
        // 创建一个函数A
        function A() {

        }

        // 控制台打印函数A的原型对象
        console.log(A.prototype);
    </script>

    打印结果如下图:    

    1-2004192246123V.png    

    3. 实例对象的原型属性(__proto__)

    在之前的文章中,我们介绍过创建实例对象的三种方式对象直接量、关键字new和(ECMAScript 5中的)Object.create()方法来创建对象。

    当使用关键字new,把上面创建的函数A作为构造函数(理论上任何函数都可以是构造函数)创建一个实例对象时,新创建的实例对象就会存在一个默认的不可见属性__proto__,我理解它为实例对象的原型属性。

    通过浏览器打印,我们可以发现这个属性和函数A的prototype原型指向的是同一个对象。

    1-20041923005B32.png

    同样,我们通过以下简单的代码,也可以明确的看到实例对象和函数的原型对象的关系:   

    <script>
        // 创建一个函数A
        function A() {

        }

        // 创建实例对象a
        var a = new A();

        // 控制台打印实例对象a
        console.log(a);

        // 判断实例a的__proto属性和函数A的prototype,结果为true
        console.log(a.__proto__ == A.prototype);
    </script>

    打印结果如下:

    1-200419230F91G.png

欢迎分享交流,转载请注明出处:WithCoder » Javascript原型对象之概念简介