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());

评论

发表评论

此博客中的热门博文

转一下关于Fuck的用法

不得不说,不会国骂人的人那一定不是土生土长中国人,相对的,不会用这英文四字真经的绝对也不是土生土长美国人. “Fuck” 是现代英语中最强烈，最有争议的粗语之一，这个词可能也是世界上最著名的亵渎语。但何时这个词从一个友好用法变成亵渎用法却仍然无法解释。一些证明显示，在一些英语为母语的地区，这个词直到17世纪才有一种攻击和亵渎的含义; 而另外一些证明却表明，早在16世纪的英国，这个词已经变成粗语。因此一些诸如牛津大英字典的权威资料仍然无法确定这个粗语的来源，但倾向于相信撒克逊人(英国人)起源说，然后再流传到英国殖民地，再到全世界。 　　 　　在现代英语中，”Fuck”是一种高度冒犯性的用词，是最为严厉的4字母词。”Fuck” 原意就是性交(操，干)，但它往往被用作一个咒骂语和语气加强词。一些”Fuck”原意的例子有： 　　 　　”Let‘ s fuck.” (让我们操吧) 　　”That was a good fuck.” (那真是一次美妙的性交) 　　”I can‘t believe she‘s fucking him!” (我不能相信她正在操他！) 　　”I fucked my teacher!” (我干了我老师) 　　 　　其他则是一些粗直语用法，但这些用法往往牵涉到性，譬如强奸(fuck you)或者自慰(fuck yourself). 　　 　　”Fuck you!” or “Go fuck yourself!” (我不喜欢你，快滚开) 　　”He”s a dumb fuck.” (他是个白痴) 　　”Sorry, I fucked up your computer.” (不好意思，我弄坏了你的电脑) 　　”He‘ s pretty fucked up.” (他心理或者心情不稳定) 　　”I fucked up on this test.” (我这次测验做的很糟) 　　”Let‘s fuck around for a couple hours.” (让我们浪费2个小时好了) 　　”I‘m fucked.” (结果) 　　”What the fuck!” (到底刚才发生了什么?) 　　”Shut the fuck up!” (闭嘴) 　　”I‘m so fucked up right now.” (我已经烂醉或者被药物搞的晕晕乎乎了。) 　　其他一些粗直用法则...
阅读全文

远程记录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'  # 如果不加这个可能会丢失部...
阅读全文

用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                ...
阅读全文