最近看了一下《Javascript高级程序设计(第三版)》,这本书很多人都推荐,我也再次郑重推荐一下。看过之后总得总结一下吧,于是我选了这么一个主题分享给大家。

  使用Javascript创建对象的方法有很多,现在就来列举一下:

  1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值。

    var person = new Object();
person.name="kevin";
person.age=31;
alert(person.name);
alert(person["name"])

  2. 使用对象字面量创建一个对象;不要奇怪person["5"],这里是合法的;另外使用这种加括号的方式字段之间是可以有空格的如person["my age"].

    var person =
{
name:"Kevin",
age:31,
5:"Test"
};
alert(person.name);
alert(person["5"]);

  3. 使用工厂模式创建对象,返回带有属性和方法的person对象。

function createPerson(name, age,job)
{
var o = new Object();
o.name=name;
o.age=31;
o.sayName=function()
{
alert(this.name);
};
return o;
}
createPerson("kevin",31,"se").sayName();

  4. 使用自定义构造函数模式创建对象;这里注意命名规范,作为构造函数的函数首字母要大写,以区别其它函数。这种方式有个缺陷是sayName这个方法,它的每个实例都是指向不同的函数实例,而不是同一个。

function Person(name,age,job)
{
this.name=name;
this.age=age;
this.job=job;
this.sayName=function()
{
alert(this.name);
};
} var person = new Person("kevin",31,"SE");
person.sayName();

  5. 使用原型模式创建对象;解决了方法4中提到的缺陷,使不同的对象的函数(如sayFriends)指向了同一个函数。但它本身也有缺陷,就是实例共享了引用类型friends,从下面的代码执行结果可以看到,两个实例的friends的值是一样的,这可能不是我们所期望的。

function Person()
{ } Person.prototype = {
constructor : Person,
name:"kevin",
age:31,
job:"SE",
friends:["Jams","Martin"],
sayFriends:function()
{
alert(this.friends);
}
};
var person1 = new Person();
person1.friends.push("Joe");
person1.sayFriends();//Jams,Martin,Joe
var person2 = new Person(); 
person2.sayFriends();//James,Martin,Joe

  6. 组合使用原型模式和构造函数创建对象,解决了方法5中提到的缺陷,而且这也是使用最广泛、认同度最高的创建对象的方法。

function Person(name,age,job)
{
this.name=name;
this.age=age;
this.job=job;
   this.friends=["Jams","Martin"];
}
Person.prototype.sayFriends=function()
{
alert(this.friends);
};
var person1 = new Person("kevin",31,"SE");
var person2 = new Person("Tom",30,"SE");
person1.friends.push("Joe");
person1.sayFriends();//Jams,Martin,Joe
person2.sayFriends();//Jams,Martin

7. 动态原型模式;这个模式的好处在于看起来更像传统的面向对象编程,具有更好的封装性,因为在构造函数里完成了对原型创建。这也是一个推荐的创建对象的方法。

function Person(name,age,job)
{
//属性
this.name=name;
this.age=age;
this.job=job;
this.friends=["Jams","Martin"];
//方法
if(typeof this.sayName !="function")
{
Person.prototype.sayName=function()
{
alert(this.name);
}; Person.prototype.sayFriends=function()
{
alert(this.friends);
};
}
} var person = new Person("kevin",31,"SE");
person.sayName();
person.sayFriends();

另外还有两个创建对象的方法,寄生构造函数模式和稳妥构造函数模式。由于这两个函数不是特别常用,这里就不给出具体代码了。

写了这么多创建对象的方法,其实真正推荐用的也就是方法6和方法7。当然在真正开发中要根据实际需要进行选择,也许创建的对象根本不需要方法,也就没必要一定要选择它们了。

Javascript 创建对象方法的总结的更多相关文章

  1. javascript创建对象的方法总结

    Javascript创建对象 最简单的方法:创建object实例. var person=new Object(); person.name="Joey";person.age=2 ...

  2. Javascript 创建对象的三种方法及比较【转载+整理】

    https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain 本文内容 引 ...

  3. Javascript创建对象几种方法解析

    Javascript创建对象几种方法解析 Javascript面向对象编程一直是面试中的重点,将自己的理解整理如下,主要参考<Javascript高级程序设计 第三版>,欢迎批评指正. 通 ...

  4. javascript创建对象的方法--基本模式

    javascript创建对象的方法--基本模式 一.总结 关注本质 二.代码 <!DOCTYPE html> <html lang="zh-cn"> < ...

  5. javascript创建对象的方法--动态原型模式

    javascript创建对象的方法--动态原型模式 一.总结 1.作用:解决组合模式的属性和函数分离问题  2.思路:基本思路和组合模式相同:共用的函数和属性用原型方式,非共用的的函数和属性用构造函数 ...

  6. javascript创建对象的方法--组合模式

    javascript创建对象的方法--组合模式 一.总结 0.作用:解决原型模式对象独有属性创建麻烦的问题 1.组合模式使用普遍:jquery就是用的组合模式,组合模式使用非常普遍 2.组合模式优点: ...

  7. javascript创建对象的方法--原型模式

    javascript创建对象的方法--原型模式 一.总结 1.原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改 2.原型的使用(p ...

  8. javascript创建对象的方法--构造函数模式

    javascript创建对象的方法--构造函数模式 一.总结 构造函数模式作用和不足 1.作用:解决工厂模式不是用new关键字来创建对象的弊端 2.作用:解决工厂模式创建的实例和模型没有内在联系的问题 ...

  9. javascript创建对象的方法--工厂模式(非常好理解)

    javascript创建对象的方法--工厂模式(非常好理解) 一.简介 创建对象的方法 本质上都是把"属性"和"方法",封装成一个对象 创建对象的基本模式 普通 ...

随机推荐

  1. Java抽象类的总结

    什么是抽象类: 当你在定义一个父级的类的时候,往往在父级内的方法没有添加任何内容,这时候如果你在子类里面调用父级的时候,万一在子类之中类名或者方法名没有写正确,会出现不执行的情况,但是这种情况默认是不 ...

  2. Atitit  数据库的事件机制--触发器与定时任务attilax总结

    Atitit  数据库的事件机制--触发器与定时任务attilax总结 1.1. 事件机制的图谱1 2. 触发器的类型2 3. 实现原理 After触发器 Vs Instead Of触发器2 3.1. ...

  3. SQL Server数据库sql语句生成器(SqlDataToScript)的使用(sql server自增列(id)插入固定值)

    SqlDataToScript是根据表数据进行生成 Insert Into语句,此工具还有一个好处是可以对自增列插入固定值,例如:自增的列id值为5,但是5这个行值已经删除,如果想存储Id自增列值为5 ...

  4. selenium结合最新版的sikuli使用

    sikuli安装,下载sikulixsetup-1.1.0.jar,地址:https://launchpad.net/sikuli/sikulix/1.1.0 在装有Java环境的机器上直接双击jar ...

  5. [转]深入理解JavaScript的变量作用域

    1.JavaScript的作用域链 2.函数体内部,局部变量的优先级比同名的全局变量高. 3.JavaScript没有块级作用域. 4.函数中声明的变量在整个函数中都有定义. 5.未使用var关键字定 ...

  6. 移动端web开发

    meta基础知识点: 页面自动调整到设备宽度,并禁止用户缩放. <meta name="viewport" content="width=device-width, ...

  7. 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

    × 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过 ...

  8. .Net 转战 Android 4.4 日常笔记(1)--工具及环境搭建

    闲来没事做,还是想再学习一门新的技术,无论何时Android开发比Web的开发工资应该高40%,我也建议大家面对移动开发,我比较喜欢学习最新版本的,我有java的基础,但是年久,已经淡忘,以零基础学习 ...

  9. MapReduce的理解

    1 什么是MapReduce? Map本意可以理解为地图,映射(面向对象语言都有Map集合),这里我们可以理解为从现实世界获得或产生映射.Reduce本意是减少的意思,这里我们可以理解为归并前面Map ...

  10. 构建自己的PHP框架--定义ORM的接口

    在上一篇博客中,我们抽象出了Controller的基类,实现了页面的渲染和返回JSON字符串的功能. 那作为一个框架,我们现在还缺少什么?是的,大家应该已经注意到了,我们在这之前从来没有连接过数据库, ...