javascript学习十:面向对象之对象的创建

2023-04-12


简单对象的创建


/**
     * 在js中并不存在类,所以可以直接通过Object来创建对象
     * 但是使用如下方式创建,带来最大的问题是,由于没有类的约束
     * 无法实现对象的重复利用,并且没有一种约定,在操作时会带来问题
     */
    var person = new Object();
    person.name = "Leon";
    person.age = 33;
    person.say = function() {
        alert(this.name+","+this.age);
    }

jason对象的创建


/**
     * json的意思就是javascript simple object notation
     * json就是js的对象,但是它省去了xml中标签,而是通过{}来完成对象的说明
     */
    var person = {
        name:"张三",//通过属性名:属性值来表示,不同的属性通过,来间隔
        age:23,
        say:function() {
            alert(this.name+","+this.age);
        }//最后一个属性之后不能有,
    }

    person.say();

通过json创建对象数组


var ps = [
        {name:"Leon",age:22},
        {name:"Ada",age:33}
    ];
    for(var i=0;i

范例:创建一组用户,用户的属性有name:string,age:int,friends:array


ps = [
        {
            name:"Leon",
            age:22,
            friends:["Ada","Alice"]
        },
        {
            name:"John",
            age:33,
            friends:["Ada","Chris"]
        }
    ];

通过工厂的方式来创建对象


/**
     * 通过工厂的方式来创建Person对象
     * 在createPerson中创建一个对象
     * 然后为这个对象设置相应的属性和方法
     * 之后返回这个对象
     */
    function createPerson(name,age) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.say = function() {
            alert(this.name+","+this.age);
        }
        return o;
    }
    /**
     * 使用工厂的方式,虽然有效的解决了类的问题,但是依然存在另外一个问题
     * 我们无法检测对象p1和p2的数据类型
     */
    var p1 = createPerson("Leon",22);
    var p2 = createPerson("Ada",33);
    p1.say();
    p2.say();

使用工厂的方式,虽然有效的解决了类的问题,但是依然存在另外一个问题,我们无法检测对象的数据类型


使用构造函数创建对象


/**
     * 通过构造函数的方式创建,和基于工厂的创建类似
     * 最大的区别就是函数的名称就是类的名称,按照java的约定,第一个
     * 字母大写。使用构造函数创建时,在函数内部是通过this关键字来
     * 完成属性的定义
     */
    function Person(name,age) {
        this.name = name;
        this.age = age;
        //以下方式带来的问题是所有的对象都会为该行为分配空间
        // this.say = function() {
            // alert(this.name+","+this.age);
        // }
        this.say = say;
    }
    /**
     * 将行为设置为全局的行为,如果将所有的方法都设计为全局函数的时候
     * 这个函数就可以被window调用,此时就破坏对象的封装性
     * 而且如果某个对象有大 量的方法,就会导致整个代码中充斥着大量的全局函数
     * 这样将不利于开发
     */
    function say() {
        alert(this.name+","+this.age);
    }
    /*
     * 通过new Person来创建对象
     */
    var p1 = new Person("Leon",22);
    var p2 = new Person("Ada",32);
    p1.say(); p2.say();
    /**
     * 使用构造函数的方式可以通过以下方式来检测
     * 对象的类型
     */
    alert(p1 instanceof Person);
    /**
     * 使用构造函数创建所带来的第一个问题就是每一个对象中
     * 都会存在一个方法的拷贝,如果对象的行为很多的话
     * 空间的占用率就会大大增加
     * 可以将函数放到全局变量中定义,这样可以让类中的行为指向
     * 同一个函数
     */
    alert(p1.say==p2.say);

使用构造函数创建所带来的第一个问题就是每一个对象中都会存在一个方法的拷贝,如果对象的行为很多的话,空间的占用率就会大大增加,可以将函数放到全局变量中定义,这样可以让类中的行为指向同一个函数。
解决这个问题的办法是将行为设置为全局的行为,但是如果将所有的方法都设计为全局函数的时候,这个函数就可以被window调用,此时就破坏对象的封装性,而且如果某个对象有大 量的方法,就会导致整个代码中充斥着大量的全局函数,这样将不利于开发。
解决上述问题可以使用基于原型的创建。


基于原型创建对象


/**
     * 以下演示了通过原型的创建方式,使用基于原型的创建可以将属性和方法
     * 设置为Person专有的,不能再通过window来调用
     */
    function Person(){

    }
    Person.prototype.name = "Leon";
    Person.prototype.age = 23;
    Person.prototype.say = function() {
        alert(this.name+","+this.age);
    }
    var p1 = new Person();
    p1.say();
    //通过window没有办法调用say方法,如此就完成了封装
    // say();



本文仅代表作者观点,版权归原创者所有,如需转载请在文中注明来源及作者名字。

免责声明:本文系转载编辑文章,仅作分享之用。如分享内容、图片侵犯到您的版权或非授权发布,请及时与我们联系进行审核处理或删除,您可以发送材料至邮箱:service@tojoy.com