Javascript对象创建的几种方式

本文是Nicholas的《Javascript高级程序设计》6.2章的读书笔记，仅在加强记忆


  1. 工厂模式。即用一个函数来生成类的实例 
    function creator(name, age, job){
    var o = {};
    o.name = name;
    o.age = age;
    o.job = job;
    o.getName = function(){
        return this.name;
    };
    return o;
}

var person1 = creator('siglud', 10, 'Engineer');
var person2 = creator('ethlin', 12, 'Doctor');

console.log(person1.getName == person2.getName);
    这种方法的很好理解，就是构造一个能返回一个类实例的函数，但是弊端有两个，一是无法用反射知道一个对象的类型，因为这个对象的类型是Object（例子中我用{}来代替）；二是getName作为一个函数本来是可以复用的，但是却其实生成了两个，所以在最后的console log中打印出了false
  2. 生成器模式。原版翻译为构造函数模式，但是这个“构造函数”明显是和C语言中的构造函数不是一个东西，所以我换个说法，其本质就是把函数本身作为一个类，用new关键字来生成一个新的函数（类）对象，因为JS中函数本身也是一个对象 
    function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.getName = function(){
        return this.name;
    }
}

var person3 = new Person('siglud', 10, 'Engineer');
var person4 = new Person('ethlin', 12, 'Doctor');

console.log(person3 instanceof Person);
console.log(person4 instanceof Person);
console.log(person3.getName == person4.getName)
    这种的算是正统的构造对象的方法了，但是问题就是getName是同一个函数，但是在不同的对象中却是不同的，不是一个可以复用的东西，当然，你可以用一个全局的函数来替代它，但是很明显，这不是一个好主意。
  3. 原型模式。不在生成器函数中写入任何属性，而是放到prototype中，让new出来的对象直接继承prototype的属性 
    function Person2(){}

Person2.prototype.name = "default name";
Person2.prototype.age = 18;
Person2.prototype.job = 'Doctor';
Person2.prototype.getName = function(){
    return this.name;
};

var person5 = new Person2();
console.log(person5.getName());

var person6 = new Person2();
person6.name = 'Siglud';
person6.age = 19;
person6.job = 'Engineer';
console.log(person6.getName());

console.log(person5 instanceof Person2);
console.log(person6 instanceof Person2);
console.log(person5.getName == person6.getName);
    这种方法就是经常用的最多的原型模式了，函数也是公用的原型函数，但是注意到person6的name是person6自己的属性，而person5用的是它的prototype的属性，会被hasOwnProperty判定为false的，person6的prototype其实也有name属性，但是当它也有了自己的name属性的时候，它就不再向prototype请求和使用这个属性了。这里需要注意的是我用的是 
    Person2.prototype.name = "default name";
Person2.prototype.age = 18;
Person2.prototype.job = 'Doctor';
    这样给原有的原型对象赋值的方式，你也可以用以下方法把原型对象完全替换掉： 
    Person2.prototype = {
    name: 'default name',
    age: 18,
    job: 'Doctor',
    getName: function(){
        return this.name;
    }
};
    这样的问题一个就是person5的constructor不再指向Person2了，当然，你也可以这样修正： 
    Person2.prototype = {
    constructor: Person2,
    name: 'default name',
    age: 18,
    job: 'Doctor',
    getName: function(){
        return this.name;
    }
};
    但是这样又会产生一个问题，如果这段代码写在var person5 = new Person2();之前是没问题的，如果写在之后，person5将不会具有新赋值的Person2.prototype的全部属性，因为它两个已经指向两个完全不同的目标。除此之外，原型继承还是有坑的，体现在类似Python的函数参数默认值为可变量（如list）时一样的坑： 
    function Person3(){}

Person3.prototype.name = "default name";
Person3.prototype.age = 18;
Person3.prototype.job = 'Doctor';
Person3.prototype.friends = ['default friends'];
Person3.prototype.getName = function(){
    return this.name;
};

var person7 = new Person3();
var person8 = new Person3();

person7.friends.push('jack');

console.log(person8.friends);
    这时候输出的居然是["default friends", "jack"]，当然你也可以这样改造来让它正常 
    function Person3(){}

Person3.prototype.name = "default name";
Person3.prototype.age = 18;
Person3.prototype.job = 'Doctor';
Person3.prototype.friends = ['default friends'];
Person3.prototype.getName = function(){
    return this.name;
};

var person7 = new Person3();
var person8 = new Person3();

/*person7.friends.push('jack');

console.log(person8.friends);*/

person7.friends = [];
person7.friends.push('jack');

console.log(person8.friends);
console.log(person7.friends);
    但是我们没办法约束客户端程序员每个都这么乖乖的去写，所以这也是独立的使用原型模式比较少的原因。
  4. 组合模式 其实就是综合使用原型模式和构造函数模式 
    function ComplexPerson(name, age, job){
    this.name = name;
    this.aget = age;
    this.job = job;
}

ComplexPerson.prototype = {
    constructor: ComplexPerson,
    sayName : function(){
        return this.name;
    }
};

var person_complex_1 = new ComplexPerson('siglud', 11, 'Worker');
var person_complex_2 = new ComplexPerson('ethlin', 12, 'Doctor);

console.log(person_complex_1 instanceof ComplexPerson);
console.log(person_complex_2 instanceof ComplexPerson);

console.log(person_complex_1.sayName());
console.log(person_complex_2.sayName());
    这样又做到了函数的复用，又做到了类型统一
  5. 动态原型模式

    这个其实和上面的没啥区别，唯一的区别在于它不会重复的定义函数，它通过首先检查对应的方法是否存在然后再决定是否初始化它

    function ComplexPerson(name, age, job){
    this.name = name;
    this.aget = age;
    this.job = job;
}

if(typeof ComplexPerson.sayName !== 'function'){
    ComplexPerson.prototype = {
        constructor: ComplexPerson,
        sayName : function(){
            return this.name;
        }
    };
}
  6. 寄生构造函数模式

    寄生构造函数其实就是工厂模式，但是Nicolas把它独立出来是因为这货虽然并不怎么好用，但是偶尔却能处理一些很麻烦的问题，比如你想继承系统的Array，并且给它添加一部分功能，当然，你不能随意的去给系统的array的prototype添加功能，这样会给其他人埋坑，所以这个时候工厂模式就有了用武之地了，举例就不用了，其实是工厂模式

  7. 稳妥构造函数模式

    这也是一个为了特殊目的而构造的东西，它的最大目的是隐藏内部变量，不允许直接使用this来访问内部属性，相当于一个非常极端的把属性设置为private的方式，因为js基本上没办法让类的属性变成private

    function DurablePerson(name, age, job){
    var o = {};
    
    o.sayMyName = function(){
        return name;
    };
    return o;
}

var durablePerson = DurablePerson('siglud', 11);

console.log(durablePerson.sayMyName());
console.log(durablePerson.name);

    可以看到第二个试图访问的结果被抛出错误了，当然，你也可以给他定义setter，让它可以更改，但是除了你开放的接口，你别人终于无法改动你的变量了

    function DurablePerson(name, age, job){
    var o = {};

    o.sayMyName = function(){
        return name;
    };

    o.setMyName = function(myName){
        name = myName;
    };

    return o;
}

var durablePerson = DurablePerson('siglud', 11, 'Worker');

console.log(durablePerson.sayMyName());
durablePerson.setMyName('Ethlin');
console.log(durablePerson.sayMyName());

评论

发表评论

此博客中的热门博文

远程记录OpenWRT日志

默认的OpenWRT日志放在/tmp/log下，这样有个问题就是每次重启就会丢失全部的日志，于是公司的路由器每次重启之后连为什么重启都不知道 于是就想办法把日志迁移出来，好在OpenWRT本身就附带了远程日志打印功能，于是直接在内网中开一个rsyslog服务器就可以了 在/etc/rsyslog.d/下新建一个router.conf 内容如下： module(load="imtcp") module(load="imudp") input(type="imudp"      port="514"      ruleset="routerSet") input(type="imtcp"      port="514"      ruleset="routerSet") # rsyslog RuleSets ruleset(name="routerSet") {     action(type="omfile"         File="/var/log/router.log") } （这个配置文件可以在 http://www.rsyslog.com/rsyslog-configuration-builder/ 生成） 接下来启动一下rsyslog服务就可以了 systemctl restart rsyslog 在OpenWRT端需要做的工作： vim /etc/config/system 在config system下增加这么几行         option log_remote '1'         option log_ip '192.168.0.13'  # 你的日志i服务器内网IP         option log_port '514'         option log_size '0'  # 如果不加这个可能会丢失部分日志 最后那个log_size其实是日志缓冲区的意思，如果使用它默认
阅读全文

用OpenWRT打造自动翻墙路由器（详解篇）

最初先调整一下bash ，让它符合自己的工作习惯： 到vim /etc/profile，可以在里面设置自己想要的alias 比如我加了一行： alias ll='ls -al' 然后就装图形显示界面再说 首先update一下 opkg update 安装luci opkg install luci 设置luci自动启动 /etc/init.d/uhttpd enable 结果告诉我 /etc/rc.common: line 1: procd_add_reload_trigger: not found 坑爹，搜索了一下发现是因为我的固件版本与软件仓库的版本不符，导致软件与系统组件不搭配所致，后来发现是 新版的OpenWrt更新了而已，于是我升级了一下系统就好了 ，如果你无法升级系统，那么可以按照下述方式解决： 先把安装的那些个用不了的一个个卸载掉 opkg remove luci opkg remove uhttpd-mod-ubus opkg remove uhttpd 修改opkg的配置，修改到以前的仓库 vim /etc/opkg.conf 注释掉原有的仓库地址，改用旧的 #src/gz barrier_breaker http://downloads.openwrt.org/snapshots/trunk/ar71xx/packages src/gz barrier_breaker http://downloads.openwrt.org/attitude_adjustment/12.09/ar71xx/generic/packages 然后在opkg update一下，继续 opkg install luci opkg install luci-i18n-chinese 这次在/etc/init.d/uhttpd start 的时候就不会报错了 然后稳妥的进入luci的Web界面，修改一下时区、界面语言之类的 接下来的工作是 修改防火墙的设置，让远端的HTTP和SSH能够通过 vim /etc/config/firewall config rule                                         optio
阅读全文

Python中为什么要用is None来代替== None?

一直以来，我对于Pycharm提示我让我用is None来替代 == None这个判断表达式表示不是很理解。 直到我看到了《Python3程序开发指南》中的一句话： “身份比较的一个好处是速度非常快， 这是因为，并不必须对进行比较的对象本身进行检查，is操作符只需要对对对象所在的内存地址进行比较——同样的地址存储的是同样的对象。” 因为None是一个特殊的内置的空对象，所以所有的为None的对象都是指向的同一个内存地址的。所以用is None的速度也应该超过== None。 简单的试验一下： __author__ = 'Siglud' import time def testIsNone(): now = time.time() a = None i = 0 while i < 100000: if a is None: i += 1 return time.time() - now def testEqualNone(): now = time.time() a = None i = 0 while i < 100000: if a == None: i += 1 return time.time() - now if __name__ == '__main__': totalTime_isNone = 0 totalTime_equalNone = 0 for i in range(10): useTime = testIsNone() print 'TYPE:UseIS TestNum: %s, Time consumed: %s' % (i, useTime) totalTime_isNone += testIsNone() for i in range(10): useTime = testEqualNone() print 'TYPE:UseEqual TestNum: %s, Tim
阅读全文