JS创建对象的几种方式

这几天看了JS的几种常见创建对象的方式,首先JS里面是木有类这个概念的,所以其实一开始学java的孩子学JS的面向对象的时候会出现不习惯,而且JS的创建对象方式十分灵活,现在就来归纳一下:
1.在原有对象中添加属性和方法:

    var object=new Object();

    object.username="huang";
    object.show=function(name){
        alert(name);
    }
    object.show("恭喜发财");
    alert(object.username);

从运行结果看以看出来第一个运行结果是’恭喜发财’,第二个运行结果是输出了’huang’,所以JS允许我们动态得加入属性和方法。从而构造自己想要的对象。

2.大括号方式定义

    var object={"username":"huang","password":"lalala"};
    alert(object.username);
    alert(object.password);

这个就是JS穿件对象的第二种方式,也是JS创建对象最常用的方式,广泛得用于JS的各种框架当中

3.运用工厂方式创建

a.一个函数只被一个对象使用
            function createObject(username,password)
            {
                var object=new Object();

                object.username=username;
                object.password=password;
                object.show=function()
                {
                    alert(object.username+":"+object.password);
                }

                return object;
            }

            var object1=createObject("huang","恭喜发财");
            var object2=createObject("yu","新年快乐");

            object1.show();
            object2.show();
b.多个对象公用一个函数
            function show()
            {
                alert(this.username+":"+this.password);
            }

            function createObject(username,password)
            {
                var object=new Object();

                object.username=username;
                object.password=password;
                object.show=show;

                return object; 
            } 

            var object1=createObject("huang","恭喜发财");
            var object2=createObject("yu","新年快乐");

            object1.show();
            object2.show();

4.构造方法构造

        function Person(username,password)
        {
            this.username=username;
            this.password=password;
            this.show=function()
            {
                alert(this.username+":"+this.password);
            }

        } 

        var p1=new Person("huang","恭喜发财");
        var p2=new Person("yu","新年快乐");

        p1.show();
        p2.show();

这个方法创建对象的时候JS引擎在第一行首先会帮我们创建一个对象。然后在最后一行JS引擎会帮我们把对象返回。

5.原型(“prototype”)方式

            function Person()
            {

            } 

            Person.prototype.username=new Array();
            Person.prototype.password="1234";
            Person.prototype.getInfo=function()
            {
                alert(this.username+":"+this.password);
            }

            var p1=new Person();
            var p2=new Person();
            p1.username.push("huang");
            p1.username.push("yu");
            p1.password="5678";
            p1.getInfo();
            p2.getInfo();

单纯用原型的方式定义对象的方式,不能为对象属性赋初值,只能在对象生成后再改变属性值。而因为在JS里面字符串是常量所以所以改变值,只会一个对象的值受到影响,而数组是一个复杂类型,改变它里面的值,所有对象的值都会被改变

6.使用原型+构造函数的方式来定义对象

            function Person()
            {
                 this.username=new Array();
                 this.password="1234";
            } 
            Person.prototype.getInfo=function()
            {
                alert(this.username+":"+this.password);
            }

            var p1=new Person();
            var p2=new Person();
            p1.username.push("huang");
            p2.username.push("yu");
            p1.getInfo();
            p2.getInfo();

这种方式可以把对象的属性放在函数体里面,把方法用原型定义,这样就可以使得每个对象的属性都是各自的,而方法是公有的。
7.动态原型方式

            function Person()
            {
                 this.username="huang";
                 this.password="1234";

                 if(typeof Person.flag=="undefined")
                 {
                     Person.prototype.getInfo=function()
                     {
                         alert(this.username+":"+this.password); 
                     }
                     Person.flag=true;
                 }
            } 

            var p1=new Person();
            var p2=new Person();
            p1.getInfo();
            p2.getInfo();
        </script>

通过给每个函数的方法设定一个标志量使得对象的函数的方法被多个对象共用,而属性则每个对象都有一份。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值