javascript prototype原型详解(比较基础)

分手后的思念是犯贱 2022-05-16 00:39 182阅读 0赞

*   *  一.基本概念:
     *  二.代码实例:
        
         *  实例一:
         *  实例二:
         *  实例三:

## 一.基本概念: ##

`每一个函数`都具有一个prototype属性。  
此属性是一个指针，能够指向一个对象，而此对象将会被`由构造函数创建的对象实例`所`共享`，也就是会继承此对象。  
总结:prototype所指向的对象是被构造函数所创建的对象实例所共同共享的。  
创建的对象实例有一个内部属性\[\[Prototype\]\]，它是一个指针，指向构造函数原型（prototype）指向的对象。  
先看一段代码:

结果：

脚本之家

图示如下：

![这里写图片描述][70]  
上面图片基本说明了prototype的作用。

## 二.代码实例: ##

### 实例一: ###

function antzone(name,age){ 
     this.webname=name;
     this.age=age;
    }
    var obj={
     address:"江苏省徐州"
    }
    var oantzone=new antzone("脚本之家",10);
    antzone.prototype=obj;
    console.log(oantzone.address);

看以上代码，很多朋友可能以为输出值是”江苏省徐州”，但是实际输出内容是undefined，这是因为在使用构造函数创建对象oantzone的时候，oantzone对象内部属性\[\[Prototype\]\]将会指向antzone()构造函数的原型prototype所指向的对象，而后来antzone.prototype=obj是重置构造函数的原型，而oantzone的内置属性\[\[Prototype\]\]指向依然是原来的对象，自然oantzone.address是undefined。

### 实例二: ###

此代码和上一段代码的唯一不同，就是第八行和第九行进行了一下交换，这样就可以输出”江苏省徐州”，这个就不难理解了，因为对象实例是在重置原型以后创建的。

### 实例三: ###

function antzone(name,age){ 
     this.webname=name;
     this.age=age;
    }
    var obj={
     address:"江苏省徐州"
    }
    antzone.prototype.add=obj;
    var oantzone=new antzone("脚本之家",10);
    console.log(oantzone.add.address);

以上代码只是修改对象原型，而不是重置对象原型。

[70]: /images/20220516/5df95abe0b5446a1815456771ca2ac51.png