JavaScript原型和原型链

论坛 期权论坛     
选择匿名的用户   2021-6-1 22:26   399   0
<h2 id="articleHeader0"><span style="color:#ffbb66;">基本概念</span></h2>
<p>我们创建的每个函数都有一个<code>prototype</code>属性,这个属性是一个指针,指向一个对象,这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。那么,<code>prototype</code>就是通过调用构造函数而创建的那个对象实例的原型对象。</p>
<p>使用原型的好处是可以让对象实例共享它所包含的属性和方法。也就是说,不必在构造函数中添加定义对象信息,而是可以直接将这些信息添加到原型中。使用构造函数的主要问题就是每个方法都要在每个实例中创建一遍。</p>
<p>在<code>JavaScript</code>中,一共有两种类型的值,原始值和对象值。每个对象都有一个内部属性 <code>prototype</code> ,我们通常称之为原型。原型的值可以是一个对象,也可以是<code>null</code>。如果它的值是一个对象,则这个对象也一定有自己的原型。这样就形成了一条线性的链,我们称之为<code>原型链</code>。</p>
<h3 id="articleHeader4"><span style="color:#ffbb66;">含义</span></h3>
<p>函数可以用来作为构造函数来使用。另外只有函数才有prototype属性并且可以访问到,但是对象实例不具有该属性,只有一个内部的不可访问的<code>__proto__</code>属性。<code>__proto__</code>是对象中一个指向相关原型的神秘链接。按照标准,<code>__proto__</code>是不对外公开的,也就是说是个私有属性,但是Firefox的引擎将他暴露了出来成为了一个共有的属性,我们可以对外访问和设置。</p>
<pre class="blockcode"><code>&lt;script type&#61;&#34;text/javascript&#34;&gt;
    var Browser &#61; function(){};
    Browser.prototype.run &#61; function(){
        alert(&#34;I&#39;m Gecko,a kernel of firefox&#34;);
    }
   
    var Bro &#61; new Browser();
    Bro.run();
&lt;/script&gt;</code></pre>
<p>当我们调用<code>Bro.run()</code>方法时,由于<code>Bro</code>中没有这个方法,所以,他就会去他的<code>__proto__</code>中去找,也就是<code>Browser.prototype</code>,所以最终执行了该run()方法。(在这里,函数首字母大写的都代表构造函数,以用来区分普通函数)</p>
<p>当调用构造函数创建一个实例的时候,实例内部将包含一个内部指针(<code>__proto__</code>)指向构造函数的<code>prototype</code>,这个连接存在于实例和构造函数的<code>prototype</code>之间,而不是实例与构造函数之间。</p>
<pre class="blockcode"><code>&lt;script type&#61;&#34;text/javascript&#34;&gt;
function Person(name){                             //构造函数
                this.name&#61;name;
            }
            
            Person.prototype.printName&#61;function() //原型对象
            {
                alert(this.name);
            }
            
            var person1&#61;new Person(&#39;Byron&#39;);//实例化对象
            console.log(person1.__proto__);//Person
            console.log(person1.constructor);//自己试试看会是什么吧
            console.log(Person.prototype);//指向原型对象Person
            var person2&#61;new Person(&#39;Frank&#39;);
&lt;/script&gt;
</code></pre>
<p><code>Person</code>的实例person1中包含了name属性,同时自动生成一个<code>__proto__</code>属性,该属性指向Person的prototype,可以访问到<code>prototype</code>内定义的<code>printName</code>方法,大概就是这个样子的:</p>
<p><img alt="27224146-a78177522b814194a4eaaa840e1b4aea.png" class="blockcode" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-9d0909464ae0ac26135467a3d93a884f"><br>  每个<code>JavaScript</code>函数都有<code>prototype</code>属性,这个属性引用了一个对象,这个对象就是原型对象。原型对象初始化的时候是空的,我们可以在里面自定义任何属性和方法,这些方法和属性都将被该构造函数所创建的对象继承。</p>
<p>那么,现在问题来了。构造函数、实例和原型对象三者之间有什么关系呢?</p>
<h2 id="articleHeader5"><span style="color:#ffbb66;">构造函数、实例和原型对象的区别</span></h2>
<p>实例就是通过构造函数创建的。实例一创造出来就具有<code>constructor</code>属性(指向构造函数)和<code>__proto__</code>属性(指向原型对象),</p>
<p>构造函数中有一个<code>prototype</code>属性,这个属性是一个指针,指向它的原型对象。</p>
<p>原型对象内部也有一个指针(<code>constructor</code>属性)指向构造函数:<code>Person.prototype.constructor &#61; Person;</code></p>
<p>实例可以访问原型对象上定义的属性和方法。</p>
<p>在这里person1和person2就是实例,<code>prototype</code>是他们的原型对象。</p>
<p><strong>再举个栗子:</strong></p>
<pre class="blockcode"><code>&lt;script type&#61;&#34;text/javascript&#34;&gt;
    f
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP