第八节课之原型的理解

梦里梦外; 2022-06-02 08:30 208阅读 0赞

> javascript的原型理解

当一个函数被声明为构造函数的时候，就会出现一个属性叫做prototype，该属性类型为对象。  
我们可以通过这个属性为构造函数添加其他的方法或者属性。

function Fish( name,color){
        this.name= name;
        this.color= color;
    }
      //可以通过prototype额外给他们赋值
    Fish.prototype.width=1000;
    Fish.prototype.swing =function(){ console.log(this.name+" I can swing")};
    
    //现在创建两条鱼，查看他们是否都具有上面的方法和属性
    
    var fish1 = new　Fish("xiao hong","yellow");
    var fish2 = new Fish("xiao bai "," green");
    fish1.swing();//xiao hong I can swing
    fish2.swing();//xiao bai  I can swing
    console.log(fish1.__proto__.width);//1000
    console.log(fish1.__proto__.name);//undefined 说明只能找到原型的属性和方法
    console.log(fish1.__proto__==Fish.prototype);//true
    //从上面可以看出，通过prototype赋值不用逐个给每个实例赋值

每个实例对象中，还有一个内部属性叫做　**proto**，这个属性指向了它的构造器(Employee)的属性prototype。所有的函数对象都有"prototype"属性，该属性的值会被赋值给该函数创建的对象(即为实例)的"**proto**"属性.

##### 换句话说，原型的值会被赋给实例中**proto**中去 #####

##### **proto**也可以叫做实例属性 #####

通过这个可以访问到

console.log(fish1.__proto__.width);

--------------------

#### 函数对象中自身声明的方法和属性与prototype声明的对象有什么差别? ####

有下面几个差别:

自身声明的方法和属性是 静态的, 也就是说你在声明后,试图再去增加新的方法或者修改已有的方法,并不会 对由其创建的对象产生影响, 也即 继承 失败  
而prototype可以动态地增加新的方法或者修改已有的方法, 从而是 动态的 ,一旦 父函数对象 声明了相关 的prototype属性,由其创建的对象会 自动继承 这些prototype的属性.

--------------------

既然有函数对象本身的属性, 也有prototype的属性, 那么是由其创建的对象是如何搜索相应的属性的呢?

基本是按照下面的流程和顺序来进行.

1.先去搜索函数对象本身的属性,如果找到立即执行  
2.如果1没有找到,则会去搜索prototype属性,有2种结果,找到则直接执行,否则继续搜索 父对象 的 父对象 的prototype, 直至找到,或者到达 prototype chain 的结尾(结尾会是Object对象)

--------------------

再看一个多重prototype链的例子:

// 多重prototype链的例子

继承链.jpg

--------------------

三者关系 .jpg

每个原型prototype中都有一个constructor属性，这个constructor属性最初是指向了他的构造函数。  
总结：  
每个构造函数中有一个prototype属性，每个prototype中有一个constructor属性指向了构造函数，每个实例对象中有一个 **proto**属性，该属性指向了prototype对象。