前端---JavaScript基础4

淩亂°似流年 2022-10-11 13:59 13阅读 0赞

### 文章目录 ###

*   *  前端---JavaScript基础3
     *   *  call&apply
         *  原型链
         *  原型链操作
         *   *  例子：按钮组件封装：（类似于Bootstrsp里的按钮组件封装）

## 前端—JavaScript基础3 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]

### call&apply ###

//call apply
    function Cat(name,color){ 
    	this.name = name;
    	this.color = color;
    }
    var cat = new Cat();
    var o = { };
    //Cat.call(o,"大白","white");
    Cat.apply(o,["大白","white"]);
    console.log(o.name);

### 原型链 ###

function People(){ 
    	this.name = "小王";
    	this.sayName = function(){ 
    		console.log(this.name);
    	};
    }
    People.prototype.walk = "walk";
    var p1 = new People();
    var p2 = new People();
    p1.name = "p1";
    p2.name = "p2";

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]

### 原型链操作 ###

//修改原型
    function Animal(){ 
    	this.type= "动物";
    }
    function Cat(name,color){ 
    	this.name = name;
    	this.color = color;
    }
    Cat.prototype = new Animal();
    var a = new Cat("小黑","black");
    console.log(a._proto_);  //new Animal()
    a._proto_.type = "大动物";
    console.log(Cat.prototype); 
    
    
    //另一种情况
    function Animal(){ 
    	this.type= "动物";
    }
    Animal.prototype.type2 = "动物2";
    function Cat(name,color){ 
    	this.name = name;
    	this.color = color;
    }
    Cat.prototype = new Animal();
    var a = new Cat("小黑","black");
    console.log(a._proto_._proto_);  //
    a._proto_._proto_type = "大动物2";
    console.log(Cat.prototype._proto_); 
    
    
    //复杂原型链
    function F1(){ 
    	this.name1 = "f1";
    }
    F1.prototype.name = "first";
    function F2(){ 
    	this.name2 = "f2";
    }
    function F3(){ 
    	this.name3 = "f3";
    }
    F2.prototype = new F1();
    F3.prototype = new F2();
    var ff = new F3();
    console.log(ff.name2); 
    ff._proto_._proto_._proto_.name = "secend";
    console.log(F1.prototype); 
    
    delete ff._proto_._proto_._proto_.name
    console.log(F1.prototype);

#### 例子：按钮组件封装：（类似于Bootstrsp里的按钮组件封装） ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221005/937ea2c0021b42e29fc8ce5a505bccd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/c068f319e7c445819d4b07b3dc38754d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/0f10ad402fe04176815d2a2be12f6450.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/07d37b197c44440190b04c8f9ff6af54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/0a3bf23af97c461eb40712896f1acef4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]: /images/20221005/a3d7fb2673bb4a7fac597cc5a8001406.png