开发者社区> 技术小阿哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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
 person2 =

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

.name=.age=.job== person1 =  Person("kevin",31,"SE"

 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。当然在真正开发中要根据实际需要进行选择,也许创建的对象根本不需要方法,也就没必要一定要选择它们了。


本文转自 风雨萧条 51CTO博客,原文链接:http://blog.51cto.com/1095221645/1865185,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【前端】JQuery框架 -- JQuery怎么使用和各个版本的区别、JQuery对象和JS对象区别、JQuery选择器
JQuery框架 -- JQuery怎么使用和各个版本的区别、JQuery对象和JS对象区别、JQuery选择器? jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨 是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
0 0
【前端】JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象? Document Object Model 文档对象模型:将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD(增删改查)的动态操作。 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。 提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访。
0 0
【前端】JavaScript(JS)的BOM对象(JS的Browser对象)----什么是BOM对象?
JavaScript(JS)的BOM对象(JS的Browser对象)----什么是BOM对象:Browser Object Model 浏览器对象模型:将浏览器的各个组成部分封装成对象。
0 0
js两个数组对象中,获取不相同的值 非交集元素对象
js两个数组对象中,获取不相同的值 非交集元素对象
0 0
js判断数组中对象是否存在某个值
js判断数组中对象是否存在某个值
0 0
js Map对象的用法
给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长。
0 0
前端基础知识库-JavaScript对象的深拷贝
在JavaScript数据类型分为基础类型和引用类型,而引用类型又称为对象,可见了解对象是我们真正掌握JavaScript语言的必备技能。本章主要与大家一起去探索JavaScript对象的一些经常被我们忽略的以及难以理解的知识。好了,废话不多说让我们一起进入JavaScript对象的世界吧。
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript异步编程
立即下载
Javascript中的对象
立即下载
JS零基础入门教程(上册)
立即下载