关闭

浅析面向对象(工厂模式)

标签: javascript面向对象工厂模式函数对象
62人阅读 评论(0) 收藏 举报
分类:

以前天天说面向对象,再看了JavaScript高级程序设计这一书,不知是因为水平有限,还是外国人的难以理解,总是难以理解。最近看了一些小视频,再加上结合书的理解,终于算是有了一点小了解!
1.先来一段小代码

var obj = new Object();//也可以写成var obj = {};这里创建了一个空的对象
obj.name = 'Tom';
obj.showname = function(){
  alert(obj.name);//也可写成alert(this.name);
};
obj.showname();//showname前面是obj,则该函数里面的this指向obj,若函数前面没有任何东西,则指向window

看这段代码,属性与方法都是写在obj这个对象下的,很容易看出这个方法的问题。就是如果我创建另外一个对象,有同样的方法和属性则只能再创建一次,如下代码:

var obj = new Object();
obj.name = 'Tom';
obj.showname = function(){
  alert(obj.name);
};
var obj2 = new Object();
obj2.name = 'Tom';
obj2.showname = function(){
  alert(obj2.name);
};
obj.showname();
obj2.showname();

这样写代码重复率过高,非常麻烦!接下来就要引出工厂模式
2.工厂模式
这个名字听上去很洋气~其实简单点说就是函数的封装!为什么说它是工厂模式,是因为它很形象~
再来一段代码:

function createPerson(name){//把函数内部想象成一个生成手机的工厂
    var obj = new Object();//手机原料
    obj.name = name;//设置手机的型号
    obj.showname = function(){//设置手机的功能
       alert(this.name);
    };
    return obj;//生产好的手机,发出厂子!
}
var p1 = createPerson('Tom');
p1.showname();
var p2 = createPerson('Jim');
p2.showname();

以上就是一个工厂模式,这和第一个比省了很多代码!只要调用一下函数就可以创建一个对象。
3.进阶版工厂模式
我们把自己写的这个和系统对象进行一个对比!
(系统对象:var arr1 = new Array();var date = new Date()这些类似的就是系统默认写好的对象,直接可以用)
比较一下,自己写的这个没有new,后面的函数名首字母不是大写的。我们来改一改,使得它和系统对象一致。
1)改首字母,这个简单直接改一下函数名就行了。
2)加上new
将CreatePerson函数内部的new创建移入外部,创建对象的地方;
var p1 = new CreatePerson(‘Tom’);
这里说明两点:①new后面的函数就变成构造函数le
②new后面的函数内部有this,则this指向创建对象的本身(this和p1就是一个东西了),而且函数会有一个返回值为this(隐式返回,就是自己会返回了,不用我们写)
综上,简化代码:

function CreatePerson(name){
    this.name = name;
    this.showname = function(){
       alert(this.name);
    };
}
var p1 = new CreatePerson('Tom');
p1.showname();

这样子代码又被华丽丽的简化了~~~

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1003次
    • 积分:100
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论