Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

【设计模式+原型理解】第一章:使用Javascript来巧妙实现经典的设计模式

彭胜光 2019-02-19 23:45:00 阅读数:161 评论数:0 点赞数:0 收藏数:0

        刚开始学习设计模式之前,我是没想说要学习设计模式的,我只是因为想学习JS中的原型prototype知识,一开始我想JS中为什么要存在原型这个东西?于是慢慢通过原型而接触到设计模式,后来发现我这个过程是非常正确的,即先学习设计模式,然后在剖析原型及其原理

        我一开始,都是通过针对原型的知识点去看去学,发现还是理解不了,就算理解了原型,可以说只是停留在表面的知道,你并不懂得如何运用原型?后来,我通过用设计模式的角度去理解原型prototype,我才焕然大悟

        但是在这一篇章里面,并没有说到原型、原型模式,因为如果你要进入设计模式的角度去理解原型,你就必须得了解一下用JS来实现单例模式、工厂模式和构造函数模式,看看Javascript是如果巧妙地实现各种设计模式。

   

    【单例模式】

var person1 = {
"name": "psg",
"age": 24
};
var person2 = {
"name": "fsf",
"age": 22
};
console.log(person1.name); // ->page
console.log(person1.age); // ->24
console.log(person2 .name); // ->fsf
console.log(person2 .age); // ->22

        上面的person1与person2都不是基本数据类型,都是对象数据类型,对象数据类型的作用:把描述同一个事物(同一个对象)的属性和方法放在一个内存空间下,起到了分组的作用(例如person1与person2,都是两个独立开来的栈内存,里面的属性和方法互不影响) -> 于是,我们把这种分组编写代码的模式叫做“单例模式”。

   

    -> 在“单例模式”中,我们叫person1、person2叫做命名空间

    单例模式是一种项目开发中经常使用的模式,因为项目中我们可以使用单例模式进行“模块化”开发。

    命名空间的作用,看下面代码

// searchRender 是一个命名空间
var searchRender = {
change: function() {
this.clickEvent(); //这里this你暂时看不出来是谁,因为只有执行的时候,才知道
} ,
clickEvent: function() {
}
};
// 但是想要使用searchRender里面的change方法,你必须如下调用
serachRender.clickEvent();
// 所以change方法里面的this,只能是searchRender

    如果你学的比较深入,看上面的代码你就能看出命名空间的作用是什么了,就是能灵活运用this。

    这里使用this的好处:当命名空间改名字的时候,你并不用改里面的调用者,因为this就代表命名空间。

 

    总结

    ->单例模式解决了分组的问题

    ->但是单例模式的弊端也很明显,因为他仍然是手工作业模式,效率比较低,于是“工厂模式”就站出来解决了这个问题,因为工厂模式可以批量生产

 

   【工厂模式】

function createJsPerson(name, age) {
var obj = {};
obj.name = name;
obj.age = age;
obj.writeJs = function() {
console.log("My name is " + this.name + ", i can write js.");
};
return obj;
}
var p1 = createJsPerson("psg", 24);
var p2 = createJsPerson("fsf", 22)
p1.writeJs(); // ->My name is psg, i can write js.
p2.writeJs(); // ->My name is fsf, i can write js.

    这样写,可以减少重复代码的产出,你只需要写好公共的代码,把他放进一个方法里面,然后通过接受不同的参数,可以创建不同的对象,效率比单例模式高多了!

    接下来,讲一下“构造函数模式”,它的样子跟“工厂模式”非常相似

    

    【构造函数模式】

function CreateJsPerson(name, age) {
// var obj = {};
this.name = name;
this.age = age;
this.writeJs = function() {
console.log("My name is " + this.name + ", i can write js.");
}
// return obj;
}
var p = new CreateJsPerson("psg", 24);
p.writeJs(); // -> My name is psg, i can write js.

       看到没有,CreateJsPerson这个方法,根本不会像工厂模式那样最后返回给你一个对象,它不需要,因为当你通过使用new关键字,浏览器会在后台中自己新建一个对象,然后通过this来指向该新建对象,最后自动默认返回一个对象给你

       ->其实我们有时也会不经意用到使用构造函数模式新进实例,例如创建一个数组

// 创建一个数组
var ary = []; // 字面量方式
var arry = new Array(); // 实例创建的方式-》构造函数模式执行的方式

   

    ->知识点一: 构造函数模式和工厂模式的区别?

    1)执行的时候

    普通函数执行 -> createJsPerson() -> 这时候,createJsPerson是一个普通函数名

    构造函数模式 -> new CreateJsPerson() -> 通过new执行后,CreateJsPerson就是一个类 -> 开头大写是因为约定了,大写开头的函数就是表示一个类

                               new  出来的返回值(p),就是CreateJsPerson这个类的一个实例

    2)在函数执行的时候

    相同点 -> 都是形成私有作用域,然后形参赋值 -> 预解释 -> 代码从上到下执行(类和普通函数一样,它也有普通函数的一面)

    不同点 -> 在代码执行之前, 不用自己再手动创建对象,浏览器会默认的创建一个对象数据类型的值(类的实例),并作为函数返回值自动返回。

   

     ->知识点二: 构造函数也是函数数据类型

        在JS中,所有类都是函数数据类型,createJsPerson是函数数据类型, new CreateJsPerson也是函数数据类型,CreateJsPerson它通过new执行变成了一类,但它本身也是一个普通的函数。

        但是,JS中所有类的实例都是对象数据类型。

 

     ->知识点三: 如果给构造函数里面添加私有变量,它返回值(实例)会存在此变量吗?

unction Fn() {
var num = 10;
}
var obj = new Fn;
console.log(num); // -> undefined
console.log(obj.num); // -> undefined

    上面例子可以看出,这里的num只是函数私有作用域里面的一个私有变量,它跟实例没有任何关系。

 

     ->知识点四: 如果给构造函数直接返回一个对象,或者直接返回一个基本数据类型,那个实例到底还是不是浏览器默认返回的实例呢?

    1)手动添加自动返回基本数据类型

function Fn() {
var num = 10;
return 100; // 代码无效
}
var f1 = new Fn;
console.log(f1); // -> Object,这个Object就是空的,也是浏览器默认返回的对象
// 也就是说,return 100 这句代码无效

    2)手动添加自动返回对象数据类型

function Fn() {
var num = 10;
return {name: 'psg'}; // 代码有效
}
var f1 = new Fn;
console.log(f1); // -> Object,这个Object就是 {name: 'psg'}
// 也就是说,强制返回的手动添加的实例对象,完全KO覆盖掉浏览器默认返回的实例对象

    总结上面两点在构造函数模式当中,浏览器会默认把我们的实例返回(返回的是一个对象数据类型的值)
    // 但是如果我们手动返回值,分两种情况
           // ******情况一,返回的是一个基本数据类型的值,当前实例不变
           // 例如: return 100
           // 那么浏览器返回的值仍然是浏览器默认创建的对象
           // ******情况二,返回的是一个引用数据类型的值,当前实例会被自己返回的值覆盖掉
           // 例如: return {name: "psg"}
           // 那么原先浏览器返回的默认值,将会被自己的手动创建返回的对象给覆盖掉。注意,一定要是对象哦

 

     ->知识点五: 检测某一个实例是否属于这个类 -> instanceof

    下面这个例子很有意思!!结合了知识点四。

function Fn() {
var num = 10;
// return 100
return {name: 'psg'}
}
var f1 = new Fn;
console.log(f1 instanceof Fn); // ->false , 因为f1不是浏览器创建的默认实例

     ->知识点六:检测某个属性是否属于某个实例,检测某个属性是否为该对象的公有属性?

function Fn1() {
this.x = 100;
this.getX = function() {
console.log(this.x);
}
}
var fun1 = new Fn1;
var fun2 = new Fn1;
console.log(fun1.getX() === fun2.getX());
// -> fun1和fun2都是Fn1这个类的实例,都拥有x和getX这两个属性,但是这两个属性是各自私有的属性
// 但是如何检测某一个属性是否属于某一个实例
// in: 检测某一个属性是否属于某一个实例,不管是私有属性还是公有属性,用in都是用来检测这个属性是否属于这个对象
console.log("getX" in fun1); // -> true
// hasOwnProperty: 用来检测某个属性是否为这个对象的私有属性,这个方法只能检测私有的属性
console.log(fun1.hasOwnProperty("getX")); // -> true
// 思考,检测某一个属性是否为该对象的“公有属性”,自己写一个 hasPubProperty
function hasPubProperty(obj, attr) {
// 首先保证它是一个对象的属性,并且不是私有属性,那就肯定就是公有属性了
return ((attr in obj) && !obj.hasOwnProperty(attr));
}
console.log(hasPubProperty(fun1, "getX")); // -> false;

       这一章,主要讲了单例模式、工厂模式和构造函数模式,同时也因为工厂模式与构造函数模式代码上非常相似,但是实现原理完全不相同,所以也讲了构造函数模式实例化对象的原理过程,以及他们两的区别。

       下一章 的《【设计模式+原型理解】第二章:JS中为什么要存在原型prototype这个东西?》会讲到原型模式,准确来说是基于构造函数模式的原型模式,因为只有讲到构造函数模式,你才知道构造函数的优缺点,原型模式就是为了解决并改进构造函数的。

       待续....

 

版权声明
本文为[彭胜光]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/pengshengguang/p/10403690.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领