day23——js中的模式，原型链（含面试题）

àì夳堔傛蜴生んèń 2024-04-17 22:36 41阅读 0赞

# js中的模式 #

#### 1. **工厂模式**（在函数中返回单个对象） ####

即使用的时候可以为**调用对象定义好的属性**

> 同一个代码中不能出现两个同名函数，后一个会覆盖上一个的内容

function factory() { 
            var obj = new Object();
            obj.name = "小明";
            obj.sex = "男";
            obj.age = 16;
            obj.eat = function () { 
                return this.name + "啥都吃";
            };
            return obj;
        }
        var person = factory();
    console.log(person);

![在这里插入图片描述][20190902143802865.png_pic_center]  
**也可以传参调用**

function factorya() { 
            var obj = new Object();
            obj.name = arguments[0];
            obj.sex = arguments[1];
            obj.age = arguments[2];
            obj.eat = function () { 
                return this.name + "啥都吃";
            };
            return obj;
        }
        var person = factorya("xiaohua","女",16);
        console.log(person);

![在这里插入图片描述][20190902144016492.png_pic_center]

> 这种模式的缺点创建多个对象时不能区分对象的类型，都为object类型

刷新前的显示内容：  
![在这里插入图片描述][20190902144230269.png_pic_center]

#### 2. **构造函数模式** ####

> 1）实例化（new）后类才被执行  
> 2）在实例化之前，函数里的this代表window对象，实例化之后代表当前对象  
> 3）因为是在new的时候重新声明，所以可以区分类型（变量的类型和构造函数名称相同）

**实例化之前**  
![在这里插入图片描述][20190902144322543.png_pic_center]  
**实例化之后**（从输出情况也可以看出实例化后类才执行）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][20190902144338401.png_pic_center]

> 总结：可以区分不同类别；每次都是重新new实例化变量重新声明，和工厂模式不同

#### 3. **原型模式** ####

1）直接**追加至原型链**中

![在这里插入图片描述][20190902144404500.png]

2）**原型对象**

输出结果为：  
![在这里插入图片描述][20190902172038114.png_pic_center]

> 和上面直接添加至原型链中的区别是：没有自己默认生成构造函数`constructor`，可以手动添加（添加的构造函数名不带“”，否则为添加一个普通变量） `contructor:Animal,`

> 总结：添加的原型链属性共享给所有变量  
> 例如：（在以上代码基础上）

var cat = new Animal();
        var dog = new Animal();
        console.log(cat.name,dog.name);//小花 小花

解决方法：结合构造函数修改引用值

> 1.  方法function的长度指的是方法中的形参个数
> 2.  原型模式共享属性的本质是省略了构造函数传递初始化参数的环节，所以要结合构造函数修改引用，相互互补，既可以共享属性，又可以修改引用

![在这里插入图片描述][2019090217481674.png_pic_center]

/*原型模式结合构造函数*/
        function Animal() { 
            this.name=arguments[0];
            this.sex=arguments[1];
        }
        Animal.prototype = { 
            contructor: Animal,
            eat: function () { 
                return this.name + "会吃";
            },
            sleep: function () { 
                return this.name + "会睡觉";
            }
        }
        var cat = new Animal("TOM","公");
        var mouse = new Animal("JERRY","母");
        console.log(cat);
        console.log(mouse);

输出结果  
![在这里插入图片描述][20190902180057478.png_pic_center]  
3） **动态原型**（结合以上几种模式；可以通过相关属性动态判断是否需要添加原型 ）  
例如：

/*动态原型*/
        function Animal(name, age, job) { 
            this.name = name;
            this.age = age;
            this.job = job;
            this.speak = "我会说话";
            if (typeof this.speak != "function") { 
                Animal.prototype.sleep = function () { 
                    console.log(this.name + "在睡觉");
                };
            }
        }
        var snack = new Animal("小蛇", 2, '爬');
        console.log(snack);

> speak为字符串类型，需要动态添加原型

![在这里插入图片描述][2019090218203663.png_pic_center]

> speak为函数类型，不需要动态添加原型

![在这里插入图片描述][20190902182904959.png_pic_center]

#### 4. **单例模式**（返回一个对象） ####

![在这里插入图片描述][20190902184253928.png]

![在这里插入图片描述][20190902184405799.png]

#### 5. 模块模式（相当代码块的封装） ####

![在这里插入图片描述][20190902184805623.png]

> 注意return中的内容（调用格式）

#### 6. 发布和订阅模式（了解） ####

python 中我们定义一个事件类Event, 并且为它提供 事件监听函数、（事件完成后）触发函数，以及事件移除函数。任何类都可以通过继承这个通用事件类，来实现“订阅-发布”功能。

# 原型链 #

#### 1. 图解 ####

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

#### 2. 案例说明 ####

1）构造函数+原型模式

function Animal(){ 
            this.name="小猫";
            this.sex="母";
        }
        //原型对象
        Animal.prototype={ 
            constructor:Animal,
            }
        var cat=new Animal();
        console.log(cat)

输出结果为：  
![在这里插入图片描述][20190902205340510.gif]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]

> animal指向原型对象的过程叫原型链，原型对象的内容代码中有标注  
> 原型对象中又有contructor构造函数指向他的上一层`_proto_`

2） 原型链继承

function Animal(){ 
            this.name="名字";
        }
        function Cat(){ 
    
        }
        Cat.prototype=new Animal();//原型链继承
        var cat=new Cat();
        console.log(cat);

输出结果为：  
![在这里插入图片描述][20190902211655722.gif]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]

## 原型链面试题 ##

![在这里插入图片描述][20190902214731374.gif]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]

> object是**最高层**原型链对象

> instanceof 检测类型是否一致

问题代码同上

console.log(cat instanceof Animal);//true
    console.log(cat instanceof Object);//true

var arr=[];
        console.log(arr instanceof Array);//true
        console.log(arr);
        console.log(Array.prototype.__proto__);

![在这里插入图片描述][20190902215709679.png]  
![在这里插入图片描述][20190902215826774.png]

1.  自定义一个可以用数组点出来（原型中的方法）的排序算法

> 原型链追加

输出结果为：  
![在这里插入图片描述][20190902221730137.PNG]

[20190902143802865.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/32e13ae9d4fe4585b8944debf18c602b.png
[20190902144016492.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/de976a5b86a5450da2790e23059c1d17.png
[20190902144230269.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/bcb3c76cbe6c4e9db3a0b33b7de78878.png
[20190902144322543.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7545aeeb080e4d429e19ecc98dac9283.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/89fccd7186394181a226f4e61ed3f8d6.png
[20190902144338401.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e73567ffa1fa4483889ccffc43134561.png
[20190902144404500.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/79b87ca8810141f7b7e69a15ae0103f1.png
[20190902172038114.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3c1a088a231a4d9881f1893fe46d6b86.png
[2019090217481674.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1252fc9a18c544c5ac5c06d723f6d35b.png
[20190902180057478.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ad7f4bd8464e4e3892502c2ad7a83627.png
[2019090218203663.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e27a5f6a98514a23ae5362fed4c01672.png
[20190902182904959.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7dab260a7167451baed19eafffcaafcd.png
[20190902184253928.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1ceec8000bcb4cb58856aba333007566.png
[20190902184405799.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c31c9fee30e94befb75c2b6e576e875d.png
[20190902184805623.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b98b4deffe364e44962c409b6b8508e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/225f49032ba54c2da15a2035b1bbb3e4.png
[20190902205340510.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5f7e717898e4459ca71edbec8363d2ce.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7b0de9f9ab124a68a46965132d9e14cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a3d6649847634c11b4bd9cd302253beb.png
[20190902211655722.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9c61cd68cb0a47ae90445671d8503fa5.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a96a8f6c71f54251966c01635dc54bad.png
[20190902214731374.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1b001faeb23e4add9e1457839e90dad1.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7834868836b1442eb9e22d9b6dd4980b.png
[20190902215709679.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/89ef29ca3de14b128fbc81b38bb4faa3.png
[20190902215826774.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e5766713668e483298c6c62ce977755c.png
[20190902221730137.PNG]: https://img-blog.csdnimg.cn/20190902221730137.PNG