Javascript 创建对象方法的总结

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

时间: 2024-12-09 09:42:10

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

Javascript创建对象方法

1.工厂模式:及时由一个工厂类根据传入的参数决定生产那种产品类 function createPerson(name,age,job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function() { alert(this.name); } return o; } var person = createPerson("xiaoqiang",12,"student&

【译】JavaScript 创建对象: 方法一览与最佳实践

本文是我在众成翻译上认领并翻译的:JavaScript 创建对象: 方法一览与最佳实践 在JavaScript中“创建对象”是一个复杂的话题.这门语言提供了很多种创建对象的方式,不论新手还是老手都可能对此感到无所适从,不知道应该选择哪一种.不过,尽管创建对象的方法很多,看上去语法差异也很大,但实际上它们的相似性可能比你所以为的要多.本文将带领你踏上一段梳理对象创建方法的旅程,为你揭示不同方法之间的依赖与递进关系. 对象字面量 我们的第一站毫无疑问就是创建对象最简单的方法,对象字面量.JavaSc

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&

Javascript创建对象几种方法解析

Javascript创建对象几种方法解析 Javascript面向对象编程一直是面试中的重点,将自己的理解整理如下,主要参考<Javascript高级程序设计 第三版>,欢迎批评指正. 通过字面量形式,创建对象: var person_1 = { name: "userName", age: 20 } 工厂模式创建对象 通过一个构造函数接收参数的方式构造对象,可无数次调用这个函数,通过改变参数构造不同的对象 function createPerson(name,age){

分享几个Javascript 封装方法

基本封装方法 请看下面的例子: var Person = function(name,age){ this.name = name; this.age = age || "未填写"; this.hobbys = []; } Person.prototype = { sayName:function(){ console.log(this.name); }, sayAge:function(){ console.log(this.age); }, addHobby:function(ho

Javascript 封装方法

基本封装方法 请看下面的例子: var Person = function(name,age){ this.name = name; this.age = age || "未填写"; this.hobbys = []; } Person.prototype = { sayName:function(){ console.log(this.name); }, sayAge:function(){ console.log(this.age); }, addHobby:function(ho

JavaScript 创建对象的七种方式

转自:xxxgitone.github.io/2017/06/10/JavaScript创建对象的七种方式/ JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产.接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点. 工厂模式 1 function createPerson(name, job) { 2 var o = new Object() 3 o.name = name 4 o.job

理解JavaScript创建对象的不同模式

ps:前端渣第一次写博客,排版什么的还不清楚,后续会慢慢改进. 时隔两个月再次温习前端,发现很多东西都忘了,昨天刚看到constructor和prototype一脸懵逼,回去查资料和看书,对对象的理解又比从前啃书的时候更加深入.本文仅对JavaScript创建对象的各种模式进行辅助性的理解,有错误的地方欢迎指正. 创建对象 字面量对象 var person = { name:"myName", age:"18", sayName:function(){ alert(

javascript创建对象的相关问题

javascript创建对象的方法有很多种,一般来说,推荐使用对象字面量来创建对象. 对象构造函数捕捉 使用new Object来创建对象,可能会带来一些问题: var o = new Object(); console.log(o.constructor === Object);//true var o = new Object(1); console.log(o.constructor === Object);//false console.log(o.constructor === Num